viewport和移动端布局总结

 

一、px与视口

1.像素：一个像素表示了计算机屏幕所能显示的最小区域，分为css像素（css中使用的一个抽象单位）和物理像素（只与设备的硬件密度有关）

2.视口--理想视口（理想的布局视口、在移动设备中指设备的分辨率===>给定设备物理像素的情况下，最佳的布局视口）1css 像素 = 物理像素/分辨率

在meta标签中会将width设置为decive-width，即将布局视口设置成了理想的视口

 

当屏幕大小改变时，更新当前的宽度

 

 

 3.px与自适用

通常pc端的布局视口是980px，移动端iphone6是375，现在有一个750px*1134px的视觉稿，那么有：

pc:1 css 像素 = 750/980 = 0.76px;   iphpne6:1css = 750/375=2px

因此如果只在css中通过px作为长度和宽度的话，就会使得结果无法通过一套样式实现各端的自适应。

二、媒体查询

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，尤其是响应式页面，可以针对不同屏幕的大小编写多套样式，从而达到自适用的效果。

 

缺点是：浏览器的大小改变时，需要改变的样式太多，多套代码会繁琐。

三、百分比

除了用px结合媒体查询实现响应式布局外，也可以使用百分比单位%来实现响应式的效果。

1、百分比的具体分析

子元素的height和width使用的百分比是相对于子元素的直接父元素；

子元素的top和bottom使用的百分比是相对于直接非static定位父元素的height;

子元素的left和right使用的百分比是相对于直接非static定位父元素的width;

子元素的padding和margin使用的百分水平方向与垂直方向都是相对于直接父元素的width;

例如实现一个长宽为4:3的长方形

 

 用较多的百分比的缺点：计算困难，使布局变得复杂。

四、自适应场景下的rem解决方案

1.rem单位是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同的是rem单位无论嵌套层级如果，都只是相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px,即1rem = 16px 

html{font-size:62.5%}  1rem = 16 *0.625 = 10px

2.通过rem来实现响应式布局

rem单位是相对于根元素html的font-size来决定大小的，即根元素的font-size提供了一个基准，当页面的size发生改变时，只需要改变font-size的值，那么以rem固定单位的元素的大小也会发生响应的变化。即通过rem来实现响应式的布局，只需要根据视图容器的大小，动态改变font-size即可。

如果我们要将所有的布局单位都用rem表示，高效的方法是在css中我们还是用px来表示元素的大小，最后编写完css代码之后，将css文件的所有px单位，转化为rem单位。使用px2rem，预处理以px为单位的css文件，处理后将所有的px变成rem单位，可以通过webpack loader的形式和webpack中使用postcss plugin来实现。

五、通过vw/vh来实现自适应

任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

转载于:https://www.cnblogs.com/zyl0123/p/11498388.html