[移动端]移动端适配方案略解

本文介绍: 文章目录 css3新增单位 rem vw v h 移动端适配方案flexi ble rem方案优点缺点v h、vw方案缺点css3新增单位 rem css3 新增相对单位 rem和em单位一样，都是一个相对单位，e m是相对于父元素的font–size进行计算，即父元素的font–s ize为npx，则1e m就代表npx，所以e m单位在不同的元素或选择器中都不同因此我们需要一个在所有元素或选择器中都一致的一个单位，rem因此出现了rem是相对于根元素 html的font–size来进行计算的，即根元素 html的fon

rem和e m单位一样，都是一个相对单位，em是相对于父元素的font–size进行计算，即父元素的fon t–size为npx，则1em就代表npx，所以em单位在不同的元素或选择器中都不同

因此我们需要一个在所有元素或选择器中都一致的一个单位，rem因此出现了
rem是相对于根元素html的fon t–size来进行计算的，即根元素html的fon t–size为npx，则1em就是npx

请添加图片描述
例如，在桌面端浏览器视口尺寸为650px，那么1vw = 650 * 1% = 6.5px（这是理论推算得出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，上面讲的 rem 也是对它的模拟。这里的比例关系也推荐不要自己换算，使用 p x toviewport 的库就可以帮我们转换。当然每种方案都会有其弊端，这里就不展开讨论。

在进行移动端开发时，我们会发现一个问题，代码如下

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
<head&gt;
  <meta charset="UTF-8"&gt;
  <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  <title&gt;Document</title&gt;
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      float: left;
      width: 90px;
      height: 50px;
      margin-right: 10px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

上面的代码中，将html 节点的font-size设置为页面clientWidth(布局视口)的1/10，即1rem就等于页面布局视口的1/10，这就意味着我们后面使用的rem都是按照页面比例来计算的。

vh、vw方案即将视觉视口宽度window.innerWidth和视觉视口高度window.innerHeight等分为 100 份。

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

文章 目录

css3新增单位

rem

vw vh

移动端适配方案

flexi ble rem方案

优点

缺点

vh、vw方案

缺点

发表回复取消回复

css3新增单位

vw vh

移动端适配方案

flexible rem方案

优点

缺点

vh、vw方案

缺点

相关文章

发表回复 取消回复

flexi ble rem方案

发表回复取消回复