移动端布局方案
-
百分比布局
百分比布局的,这样的做法的话是比较费时间的,有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间,而且对于设计稿的还原也不好。所以这里>也不怎么推荐 -
固定的设备宽度
在做移动开发的时候很多人都会加上viewport的配置,
那么固定设备宽度的布局就是根据这个来设置的,将viewport里面的宽度width设置成设计稿的宽度,也就是说原本是width=device-width,即宽度为设备的宽度假如在iphone6上显示的时候,那么页面的宽度就是375px; 当我们将width设置成设计稿的宽度的,假如设计稿是750px,而我们的css也按设计的尺寸来做,例如一个图片是200px*200px,那么在css上也是宽高都是写200px,也就是1:1的比例。那么在375px的手机上显示的时候,就会缩小2倍显示,以此类推,在320px的宽度的时候,就会缩小2.3倍显示,在414px的宽度的时候就会缩小1.8倍。
这样的写法是会比较好的还原设计稿,而且速度也会比较快,但是这样也有缺点,在缩小的时候有些设备会比较模糊,因为你强行将设备放大了这里要注意几个重要的参数:vh\vw\vmax\vmin
vh:网页视口高度的百分之一
vw:网页视口宽度的百分之一
vmax:取两者的最大值
vmin:取两者的最小值
<style> body { margin: 0; padding: 0; } #container { background-color: red; width: 10vw; height: 10vh; } </style> <body> <p>vw vh 测试</p> <div id="container"> </div> <script> // window.innerHeight === 100vh // window.innerWidth === 100vw </script>
-
rem布局
这个应该是比较多人使用的,也是比较流行的。使用rem布局优点是可以适应多个屏幕 ,也比较好的还原设计稿。在有些地方需要一屏显示完设计稿的时候,可能需要用到vh,或是百分比。
rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性<style type="text/css"> @media only screen and (max-width: 374px) { /* iphone5 或者更小的尺寸,以 iphone5 的宽度(320px)比例设置 font-size */ html { font-size: 86px; } } @media only screen and (min-width: 375px) and (max-width: 413px) { /* iphone6/7/8 和 iphone x */ html { font-size: 100px; } } @media only screen and (min-width: 414px) { /* iphone6p 或者更大的尺寸,以 iphone6p 的宽度(414px)比例设置 font-size */ html { font-size: 110px; } } body { font-size: 0.16rem; } #div1 { width: 1rem; background-color: #ccc; } </style> <body> <div id="div1"> this is div </div> </body>