导航

⭐️ rem 适配方案

原理是什么？

rem是个相对单位，相对的是 html 根元素的 font-size 大小。这样一来我们就可以通过 html 上的字体大小来控制页面上所有以 rem 为单位的元素尺寸。

两种常见方案

把页面宽度分成 10 份

思路：

把页面宽度分成 10 分，算出每份 px 值（window.innerWidth / 10）
写个 scss mixin 函数，参数为设计稿px值，返回对应rem值（也就是份数）
1. 公式：rem份数 = 设计稿px / 每份有多少px值

示例代码 例如在 vue 项目的 index.html 页中动态计算根元素字体大小

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    ...
  </head>
  <body>
    <noscript>
      ...
    </noscript>
    <div id="app"></div>
    <script>
    ;(function(doc, win) {
      const docEl = doc.documentElement
      const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      const recalc = () => {
        let clientWidth = docEl.clientWidth;
        clientWidth = clientWidth < 750 ? clientWidth : 750;
        // 把屏幕宽度划分成10份，那么每一份的宽度就等于1rem，也就是 75px
        docEl.style.fontSize = clientWidth / 10 + 'px'
      }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
      recalc()
    })(document, window)
    </script>
  </body>
</html>

然后利用 CSS 预处理器定义一个 mixin 函数（下方用的 stylus），用来将设计稿上的 px 转为对应的rem值计算公式为：页面元素的rem值 = 设计稿元素值（px）/（屏幕宽度 / 划分的份数）

mixin.stylus

/* 把px转为rem */
/* 用设计稿px除以每一份rem的px，就能算出几个rem */
px2rem(designpx)
  $rem = 750 / 10;
  return (designpx / $rem)rem

最后在css中使用

某 vue 组件的 style 标签中

/* 375设计稿上100%宽以及50高的导航条（iPhone6的dpr为2，所以px值得都乘以2） */
header
  width px2rem(750)
  height px2rem(100)

html的font-size设置为 100px （PC端适配）

思路：

html { font-size: 100px; }，把100px当做因子
如果要设置 1200px 宽，那么换算下来就是 { width: 12rem }
这样也不会受到浏览器默认字体的影响（对比设置 html 字体大小为 62.5% ）

⭐️ VW 适配方案

原理就是：把屏幕分成100份举例：假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.button {
	  width: 16vw;        /*  120/(750/100vw)  */
	  font-size: 3.73vw;  /*  28/(750/100vw)  */
	  line-height: 6.4vw; /*  48/(750/100vw)  */
	  border: 1px solid #000; /* 不需要缩放的部分用px */
	  text-align: center;
	}
	</style>
</head>
<body>
	<div class="button">按钮</div>
</body>
</html>

在正式的项目里，我们也可以用SCSS，把换算交给预处理器

@function px2vw($px) {
	@return $px * 100vw / 750;
}
.button {
	width: px2vw(120);
	font-size: px2vw(28);
	line-height: px2vw(48);
	border: 1px solid #000;
	text-align: center;
}

https://zhuanlan.zhihu.com/p/340299974