码迷,mamicode.com
首页 > Web开发 > 详细

css3之响应式

时间:2015-10-10 10:19:18      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

1,媒体查询

使用css3中的媒体查询,可以让一个页面适用不同的终端(或屏幕尺寸),从而有更好的体验

(Media Queries)有两个重要的部分,一个是媒体类型,第二个是媒体特性。

媒体类型:css2中一个常见的属性,也是一个非常有用的属性,可以通过媒体的类型对不同的设备

指定不同的样式。

w3c中有10中媒体类型

All:所有设备

Braille:盲人用点字法触觉回馈设备

Embossed:盲文打印机

Handheld:便携设备

Print:打印用纸或打印预览视图

Projection:各种头晕设备

Screen:电脑显示

Speech:语音或音频合成器

Tv:电视类型设备

Try:使用固定密度字母栅格的媒介,比如打字机和终端

(all.screen,print为常见的三种媒体类型)

媒体的引用方法:link标签,@import和css3中的@media

link方法引入媒体类型其实就是在<link>标签中的media属性来指定不同的媒体类型

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

@import方法

@import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型的两种主要

方式,一种是在样式中通过@import调用另一个样式文件;

 

@importurl(reset.css) screen;   
@importurl(print.css) print;

<head>
<style type="text/css">
    @importurl(style.css) all;
</style>
</head>

css3之响应式

标签:

原文地址:http://www.cnblogs.com/fnncat/p/4865936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!