响应式布局
1 什么是响应式布局
伊桑·马科特(Ethan Marcotte)在2010年首先提出了响应式网页设计(RWD,Responsive Web Design)这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧(弹性图片,弹性网格布局,媒体与媒体查询) 进行了整合,命名为响应式网页设计。
那什么才是真正的响应式设计?马科特说,真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局,而是要从整体上颠覆当前网页的设计方法,是针对任意设备的网页内容进行完美布局的一种显示机制。
2 viewport 视口
1 什么是viewport
- viewport 是用户网页的可视区域。
- viewport 翻译为中文可以叫做"视区"。
- 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
2 设置viewport
设置视口宽度与设备宽度保持一致:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
- width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:和 width 相对应,指定高度。
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
- user-scalable:用户是否可以手动缩放。
3 媒体查询
3.1 媒体类型
值 | 描述 |
---|---|
all | 用于所有设备 |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
用于打印机和打印预览 | |
speech | 应用于屏幕阅读器等发声设备 |
aural | 已废弃。用于语音和声音合成器 |
braille | 已废弃。 应用于盲文触摸式反馈设备 |
embossed | 已废弃。 用于打印的盲人印刷设备 |
handheld | 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话 |
projection | 已废弃。 用于投影设备 |
tty | 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备 |
tv | 已废弃。 用于电视和网络电视 |
3.2 媒体特性
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
grid | 用来查询输出设备是否使用栅格或点阵。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
max-resolution | 定义设备的最大分辨率。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
min-color | 定义输出设备每一组彩色原件的最小个数。 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
3.3 媒体查询运算符
and
并且,
或者not
否定 一定要指定媒体类型,因为媒体类型默认all,not后永远返回假only
only + 媒体类型
3.4 媒体查询用法
用法一
<link rel="stylesheet" media="mediatype" href="mystylesheet.css">
<link rel="stylesheet" media="mediatype and (media feature)" href="mystylesheet.css">
用法二
@media mediatype and (media feature) {
CSS-Code;
}
@media (media feature) {
CSS-Code;
}
4 阈值设置
4.1 常用设置一
两个断点: 640px 1024px
- 小屏幕 <=640px
- 中等屏幕 641px ~ 1024px
- 大屏幕 >1024px
4.2 常用设置二
三个断点: 768px 992px 1200px
- 手机 超小屏幕 <= 768px
- 平板 小屏幕 769px ~ 992px
- 中等屏幕 993px ~ 1200px
- 大屏幕 > 1200px
4.3 常用设置三
四个断点: 576px 768px 992px 1200px
- 超小屏幕 <=576px
- 小屏幕 577px ~ 768px
- 中等屏幕 769px ~ 992px
- 大屏幕 993px ~ 1200px
- 超大屏幕 >1200px