自适应，响应式，viewport总结

ViewPort ：

　　<meta>标记用于指定用户是否能够缩放Web页面，若是能够，那么缩放到的最大和最小缩放比例是什么。使用ViewPort <meta>标记还表示文档针对移动设备进行了优化。ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表。

<meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0”>

1.viewport最最须要注意的是css中的1px并不等于设备的1px。

设备像素

 

设备像素是指设备中使用的物理像素，又称硬件像素

 

css像素

 

css像素是指css样式到吗中使用的逻辑像素。若是在一个设备中，硬件像素数与css像素数相等，将不会产生任何问题。可是，因为视网膜设备的出现，这二者之间的差别变得愈来愈大。硬件像素数与css像素数成为两种大相径庭的像素。

 

例如在iphone 4设备屏幕中的物理像素是640px*960px，而css逻辑像素数为320*480px。所以，使用大约4个物理像素来显示一个css像素。

 

2.width/height:指定视区的逻辑宽度与高度。单位能够是px,或者device-width、device-height。视区宽度与高度等于设备的宽度与高度。这样就可让网页根据不一样的屏幕大小自适应显示了。

 3.user-scalable指令指定用户是否能够缩放视区，即缩放Web页面的视图。值为yes时容许用户进行缩放，值为no时不容许缩放。

 4.initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不一样而有所差别。一般状况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。

5.maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。

 6.viewport通常使用于移动端自适应，不过移动端碎屏解决最好的我以为仍是rem比较好些，移动端切图之后还要注意效果图的最大宽度。

 7.自适应与响应式的区别

①不一样设备，自适应大小变化，但整体样式不变。响应式会根据不一样设备改变展现的样式。
②自适应布局，不能使用绝对单位。使用%，em,rem。响应式使用媒体查询。
③viewport用在手机上的。单位可使用px.viewport的做用是手机的像素与实际宽度不同。
④移动页面写px就要使用viewport。