移动端常用的适配方案

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

rem

rem是一个相对长度单位 先学习什么是 绝对长度单位 和 相对长度单位

绝对长度单位

绝对长度单位的大小是固定

• px 像素
• pt 点
• in 英寸
• cm 厘米
• 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

相对长度单位

相对长度单位的大小是会相对于某一个值而改变的

• % 百分比 一般都是相对于父元素

• em 相对于自身的font-size

• rem 相对于 根元素 html标签的fontsize

      html{
        font-size: 100px;
      }
      div{
        width: 1rem;/* width:100px */
        height: 1rem;/* height:100px */
      }
  

淘宝适配方案flexible.js

扩展资料

原理

引入淘宝的js文件，通过js实现根据屏幕大小动态修改 根标签 html 的字体大小,当html标签的fontsize被修改时，页面中使用了rem单位的css会自动发生变化

1. 当屏幕宽度为 640px 时， html 的字体大小为 64px
2. 当屏幕的宽度为 375px 时 html 的字体大小为 37.5px
3. 当屏幕的宽度为 320px 时，html 的字体大小为 32px

实现原理

1. flexible.js 把 屏幕宽度分 10rem 如 当 375px = 10 rem, 当 640px = 10 rem

2. 1rem = 37.5px 或者 1 rem = 64px

3. 1px = 1rem / 37.5px 或者 1px = 1rem / 64rem

4. 当要实现 100px 宽高 div 时,按照公式 将 px 替换成 rem 单位即可。

   width:100px; 
   // 375px  
   width:100 *  10rem / 屏幕宽度    => 
   width:100 *  10rem / 375   =  2.6666rem
   

使用步骤

1. 复制以下代码 放在head标签中

   <script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function(e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
   

2. 按照公式 1px=10rem/屏幕宽度 将css中的px替换成rem单位即可 如在less，利用less的除法功能

   width: 100px;
   width:100rem /37.5 ;
   

cssrem插件的使用

在vs code中安装插件

在配置文件中加入以下配置