移动端布局—待续

我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中显示,后者则采用百分比。
响应式布局意味着媒体查询,这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。
响应式web设计并非新的技术,只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起,并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样,将已有的技术重新组合发挥新的作用。

媒体特性:
– width 视口宽度
– height 视口高度
– device-width 设备屏幕的宽度
– device-height 设备屏幕的高度
– orientation 检测屏幕处于横屏还是竖屏
– aspect-ratio 基于视口的宽高比例
– device-aspect-ratio 基于设备屏幕的宽高比
– color 颜色的位数,如min-color:32 匹配设备是否有32位或以上的颜色
– color-index 设备的颜色索引表中的颜色数
– monochrome 检测单色振缓冲区中每像素使用的位数。为非负数,如monochrome:3
– resolution 检测屏幕或打印机的分辨率,如min-resolution:300dpi(dpi后面会介绍),也可以是每厘米像素点的度量值,如min-resolution:120dpcm
– scan 扫描方式,值为progressive(逐行扫描)、interlace(隔行扫描)
– grid 检测输出设备是网格设备还是位图设备
创建媒体查询时,上述特性(scan和grid不行)都可以加上min和max前缀创建媒体查询的范围。除了link标签能够进行媒体查询

参考文章:
浅淡HTML5移动Web开发

此条目发表在HTML分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注