移动端 rem 布局

移动端 rem 布局

1. viewport 视口宽度 (clientWidth)

   • 当浏览器宽度小于 980px 时，视口宽度就是 980px ，当浏览器宽度大于 980px时，视口宽度和浏览器宽度保持一致

2. 移动端布局

   • 移动端使用 视网膜高清屏（Retina）
   • Retina 屏幕有一个属性叫 dpr(设备像素缩放比) = 物理像素 / 逻辑像素
   • 比如 iPhone 6 的宽度 750，这就是物理像素，而我们开发时写的 375 px 就是逻辑像素

3. 布局单位

   • 百分比布局（%）
     • 简单，无须设置，兼容性好，基于父元素的属性来设置的，如果父元素没有设置宽高，就会失效
   • vwvh 布局
     • 一个 vw 等于 viewport 宽度的百分之一，一个 vh 等于 viewport 高度的百分之一
     • 简单，无须设置，但兼容性不好
   • rem 布局
     • 一个 rem 等于根元素（html）的字体大小
     • 兼容性好，使用简单，但需要设置

4. rem 适配

   • rem 本身是一个不能自适应的单位，不会跟着设备尺寸不同而改变，但是可以利用 js 代码动态设置它

   • 方法一：

     • 我们可以将 1rem 设置成屏幕的某一个比例，比如将 1rem 设置成屏幕的十分之一，假设我们的设计图是 640px 宽的，我们拿到之后量了一下 a 的宽度为 480px，得到比例 a 所占屏幕 3/4，根据 rem 与屏幕的关系，最后设置成 0.75 * 10 rem，就是说在设置元素的宽度是时候，会根据设定好的比例关系去进行换算

     <script> 
         dovument.documentElement.style.fontSize = 
             document.documentElement,clientWidth / 10 + 'px' 
     </script>
     

   • 方法二：

     • 在手机宽度为 320px 时，我们设置的 1rem = 100px，可以得到一个比例 b = 100/320

       那么在 W 宽度的手机上，1rem 应该是多少呢？设为x， 那么 x / w = b

       得到 x = w / 3.2

     <script>
     	document.documentElement.style.fontSize = 
         	document.documentElement.clientWidth / 3.2 + 'px'  
         // 如果这里写的是除以 6.4 后面就不用再除 2 了
         // 假设这个时候在设计图上量出 200px  那么写的时候就是  200 / 2 / 100 = 1rem
     </script>
     

   • 需要注意的问题：

     • 1px 边框处理： 在移动端中，如果给元素设置 1px 的边框的话，那么在手机上看起来是会比一个像素粗的。解决方法：使用伪元素模拟边框，使用 transition: scale(0.5) 进行缩放
     • 响应式图片处理

     img{
         max-width: 100%;  <!--当盒子 width 比图片大时，图片保持自身最大，不会进行拉伸-->
         display: block;
         margin: 0 auto;
      }
     

其实，开发时不需要我们手动去设置，rem 布局可以使用第三方插件，自动将 px 单位转换成 rem 单位

​ 查看链接

​