PC端页面适配与移动端布局方案

PC端页面适配

以设计图 1920 宽度为例：
css中存在一种叫vw的单位，是针对浏览器宽度为基础的百分比单位，与%的区别在于，子元素%是相
对于父级元素的宽度来计算的，而vw则是针对浏览器的宽度来计算的。打个比方，浏览器宽度为
1920px，父级元素宽度为100px，子元素宽度写50%则是50px；而子元素如果写50vw，则其宽度则为
浏览器宽度的50%即960px；
弄清楚这点之后，我们可以计算得出：
100vw = 1920px;
1vw = 19.2px
1px = 1 / 19.2vw;
由此，我们可以设置变量 @1px : 1 / 19.2vw;
如此一来，在写样式的时候就可以使用到@1px进行计算，如图：
这样如果浏览器大小发生变化，对应的vw值也会改变，自然vw计算的px也会发生改变，就达到了我们
兼容各种浏览器的目的；
但是，这个方法美中不足的是，当浏览器宽度逐渐变小时，margin padding等值也会越来越小，而字
体最小是12px，所以大概在800px左右的时候元素会挤在一块，虽然我们现在不必做800分辨率的PC兼 @media screen and (min-device-width: 1440px){ div{width: 300px; height: 300px; background