随着时间的推移老旧的IE6、7、8的使用的人越来越少,而移动设备浏览器的使用越来越多。很多人特别是年轻人开始习惯用手机等移动设备访问网页,如果为正常的写一遍又为移动端写一遍耗时又耗力,所以响应式网站开始成为必然。
我对响应式的理解为不同设备访问相同网站返回不同内容。让我想到了java中的动态调用。
接下来进入正题:
(1)媒体调用
css3中@media来进行媒体查询
可 查询内容如下:
width:视口宽度
height:视口高度
device-width:屏幕宽度
device-height:屏幕高度
orientation:横纵检测
aspect-ratio:视口宽高比例 例如 aspect-ratio:16/9
device-aspect-ratio:屏幕宽高比例
color:颜色位数
color-index:颜色索引表中颜色数
monochrome:单色帧缓冲区颜色数
resolution:屏幕或打印机分辨率
scan:电视机扫描方式
grid:网格设备还是位图设备
虽然有这么多属性可以检测但是常用的是width和device-width
检测方式:
经典公式:目标元素宽度/上下文元素宽度=百分比宽度
抛去从前的像素px吧,换成百分比,用百分比替代宽度等,用em代替font-size中的px,使你的网页充满活力。
在所有之前应该添加<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">阻止移动设备浏览器自动调整页面大小
或者使用<meta name="viewport" content="width=device-width, initial-scale=1.0">
介绍一些css网格系统快速开发响应式网站:Semantic、Skeleton、Less Framework、1140 CSS Grid、Col一些帮助跨浏览器umanl
IE6、7、8中基本不支持css3这里介绍跨浏览器问题Modernizr.js和Respond.js具体用法百度一下 网上好多的
最后想说的是无论怎么设计都要以内容优先