自适应，响应式，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。