响应式布局

响应式这个概念目前很火,是目前智能手机、平板普遍后的一个概念。由于智能手机,平板都对 html 支持相当良好,老套的 wml,wap 等编码被淘汰是必然之势,HTML终迎统一!

随之问题来了,手机即使支持 HTML 但屏幕太小,初期的手机一般就 320480,480800 等,发展到现在虽然都1000以上了,但屏幕才 4-5 寸,只能说 DPI 很高,内容还是放不了多少。

响应式布局就是开发一个页面,用户不管在什么设置上打开都能看到满意的效果。不管是手机还是电脑什么的,都能适配。

智能手机一般都支持 HTML5 了,响应式布局是利用 CSS3 的媒体查询特性,先看看 CSS3 对媒体查询的特性、就知道大体原理了:

媒体特性 取值 必须 说明
width length yes 定义输出设备中的页面可见区域宽度
height length yes 定义输出设备中的页面可见区域高度
device-width length yes 定义输出设备的屏幕可见宽度
device-height length yes 定义输出设备的屏幕可见高度
orientation portrait/landscape no 定义’height’是否大于或等于’width’。值portrait代表是,landscape代表否
aspect-ratio ratio yes 定义’width’与’height’的比率
device-aspect-ratio ratio yes 定义’device-width’与’device-height’的比率。如常见的显示器比率:4/3, 16/9, 16/10
color integer yes 定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0
color-index integer yes 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
monochrome integer yes 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
resolution resolution yes 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan progressive/interlace no 定义电视类设备的扫描工序
阅读更多