响应式介绍

响应式设计(以下称 RWD )是一种设计思维方式,而不是某种特定的技术。我理解的响应式设计,就是让 Web 内容的呈 现到手机和平板上并且都保持最佳使用体验。现在刚接触 RWD ,感觉它关注的都是移动端,但实际上大屏幕以及高分屏也 属于 RWD 需要在设计或技术层面考量的要素。  

meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:

width 设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

此外,在安卓中还支持 target-densitydpi 这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素。

  对于响应式设计应该会是今后的趋势,对前端的要求也将越来越高,你觉得呢?的答案。
  我需要引用知乎张克军的一句话: RWD不能是桌面版叠加适配代码,这样页面体积反而变大,在小屏幕里看到的实际上是一个更笨重的页面,性能只能比桌面版还差。 同时手机浏览器的事件模型跟桌面浏览器的差异很大,意味一些交互也会不work。这样的结果无法让人接受。  
上一篇:Dotnet洋葱架构实践


下一篇:transform属性