1.媒体类型
媒体类型(Media Type)在CSS2中是一个常见属性,可以通过媒体类型对不同设备指定不同样式。
1.1 Media Type设备类型
- ALL:所有设备
- Braille:盲人用点子法触觉回馈设备
- Embossed:盲文打印机
- Handheld:便携设备
- Print:打印用纸或打印预览视图
- Projection:各种投影设备
- Screen:电脑显示器
- Speech:语音或音频合成器
- Tv:电视机类型设备
Tty:使用固定密度字母栅格的媒介,比如电传打字机和终端
Screen、All、Print为最常见的三种媒体类型。
1.2 媒体类型引用方法
- link方法
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
- xml方式
<?xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>
- @import 方式
@import url(reset.css) screen;
@import url(print.css) print;
----------
<head>
<style type="text/css">
@import url(style.css) all;
</style>
</head>
- @meida 方式
@media是CSS3新引进的一个特性,媒体查询
@media screen {
/*styles here*/
}
----------
<head>
<style type="text/css">
@media screen {
selector: {
/*styles here*/
}
}
</style>
</head>
项目中常用第一种和第四种引入媒体类型的方法。
2.媒体特性
2.1 Meida Query和CSS属性集合
- Media Query只接受单个的逻辑表达式作为其值,或者没有值
- CSS属性用于声明如何表现页面信息;Media Query是一个用于判断输出设备是否满足某种条件的表达式
- Meida Query中的大部分接受min/max前缀,用来表达其逻辑关系,表示应用大于等于或小于等于某个值的情况
- CSS属性要求必须有属性值,Media Query可以没有值,因为其表达式返回的只有真或假两种
2.2 CSS3中常用设备特性
没有特殊说明都支持Min/Max ,不支持Min/Max 用”N”表示
- color:整数,表示色彩的字节数
- color-index::整数, 色彩表中的色彩数
- device-aspct-ratio:整数/整数,宽高比例
- device-height: Length 设备屏幕的输出高度
- device-width: Length 设备屏幕的输出宽度
- grid:整数 ,N,是否基于栅格的设备
- height:Length ,渲染界面的高度
- monochrome:整数 单色帧缓冲器中每像素字节数
- resolution: 分辨率(dpi/dpcm)分辨率
- scan:Progressive interlaced N ,Tv媒体类型的扫描方式
- width:Length 渲染界面的宽度
- orientation: Portrait//landscape N 横屏或竖屏
2.3使用方法
@media 媒体类型 and(媒体特性) {css style}
使用Meida Query时必须要用@media开头,然后指定媒体类型,随后知道那个媒体特性(也叫设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分是媒体特性,第二部分为媒体特性所指定的值,中间用冒号隔开。
{max-width: 720px}
Meida Query在实际项目中常用方式
最大宽度max-width:媒体类型小于或等于指定的宽度时,样式生效
@media screen and (max-width: 480px) { /*css styles*/ .ads { display: none; } }
当屏幕小于等于480px时,广告区域隐藏
最大宽度min-width:媒体类型小于或等于指定的宽度时,样式生效
@media screen and (max-width: 900px) { /*css styles*/ .wrapper { width: 980px; } }
当屏幕尺寸大于或等于900px时,容器宽度设为980px
多个媒体特性使用
and关键词将多个媒体特性结合在一起@media screen and (min-width:600px) and (max-width:900px) { /*css styles here*/ }
设备输出宽度Device Width
在智能设备上,例如iphone,ipad等,还可以根据屏幕尺寸来设置相应的样式(或者调用相应的样式文件)。<link rel="stylesheet" media="screen and(max-device-width:480px)" href="iphone.css" />
not关键字 排除某种指定的媒体类型
@meida not print and (max-width:: 1200px){/*styles*/}
样式代码将被使用在处打印设备和屏幕宽度小于1200px的所有设备中。
only关键词
only是用来指定某种特定的媒体类型,也可以排除不支持媒体查询的浏览器。很多时候only是用来对不支持Media Query却支持Media Type的设备隐藏样式表。
例如支持媒体特性的设备会正常调用样式,此时就当only不存在;不支持媒体特性但支持媒体类型的设备就不会读取样式,因为先读取only而不是screen;不支持Media Query 的浏览器,不论是否支持only,样式都不会采用。
<link rel="stylesheet" media="only screen and(max-device-width:240px)" href="android620.css" />
3.Responsive布局概念
Responsive设计为RWD(Responsive Web Design),是提供各种设备都能浏览网页的一种设计方法,RWD能让网页在不同的设备中展现不同的设计风格,RWD不是流体布局,也不是网格布局,而是一种独特的网页设计方法。
3.1 设计特点
- 网页必须建立灵活的网格基础
- 引用到网站的图片必须是可伸缩的
- 不同的显示风格,需要在Media Query上设置不同的样式。
缺少上述任何一个条件,就不能称为合格的RWD。
3.2 Responsive术语
- 流体网格:流体网格是一个简单的网格系统,参考流体设计中的网格系统,将每个网格格子使用百分比来控制网格大小,好处是让网格随屏幕尺寸大小做出相对应的比例缩放。
- 弹性图片:不给图片设置固定尺寸,根据流体网格进行缩放,适用于各种网格的尺寸
img{max-width:100%}
- 媒体查询
- 屏幕分辨率
主要断点:设备宽度的临界点。在Media Query中,媒体特性min-width和max-width对应的属性就是响应式设计中的断点值。
设置断点应把握- 满足主要断点
- 有可能的话添加一些别的断点
- 设置高于1024px的桌面断点
3.3 Responsive技巧
- 少用无关紧要的DIV
- 不要使用内联元素
- 少用JS或者Flash
- 丢弃没用的绝对定位和浮动样式
- 摒弃任何冗余结构和不适用100%设置
- 使用HTML5 Doctype和相关指南
- 重置好样式
- 语义化布局
- 给重要的网页元素使用简单的技巧
3.4 meta标签
<meta name="viewport" content="" />
content属性值
- width:可是区域的宽度,其值可以使具体数字或关键词device-width
- height:可是区域的高度,其值可以使具体数字或关键词device-height
- initial-scale:页面首次被显示时可视区域的缩放级别,1按页面实际尺寸显示,无任何缩放
- minimum-scale:可视区域的最小缩放级别
- maximum-scale:可是区域的最大缩放级别
- user-scalable:指定用户是否可以对页面进行缩放,yes允许,no禁止。
实际项目中常用:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />