了解一下rem
rem(font size of the root element)是相對長度單位。相對於根元素(即html 元素)font-size 計算值的倍數。
適配原理:將px 替換成rem,動態修改html 的font-size 適配。它可以很好的根據根元素的字體大小來進行變化,從而達到各種屏幕基本一致的效果體驗
u 同學給的設計稿
常見的設計圖寬度,當然也可以是其他的寬度,比如720 像素的
- 375 iPhone7
- 750 二倍圖
- 320 iPhone5
- 640 二倍圖
為什麼給的是375?因為這個是iPhone7 的寬度,
也就是說最低兼容到375 像素的屏幕。(低於375 佈局可能會亂)
其他的同理
1. vw + rem 方案
如果效果圖是375px 的,
html 的style 屬性的font-size 設置為26.666666vw
css 中20px 改寫為0.2rem 即可
<!DOCTYPE html>
<html lang="en" style="font-size: 26.666666vw">
<head>
<meta charset="UTF-8" />
<!--
下面一行代码的解析:
width=device-width 内容宽度 等于 设备宽度,换句话说 网页宽度为设备宽度
initial-scale=1.0 初始缩放比等于1.0倍,换句话说 网页初始化缩放比为1.0 就是默认不缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* 设置 div 为宽度100px高度18px */
.app-main {
/* 移动端写法 */
width: 1rem;
height: 0.18rem;
/*
PC端写法
width: 100px;
height: 18px; */
}
</style>
</head>
<body>
<div class="app-main"></div>
</body>
</html>
复制代码
為什麼是26.666666vw?得了解下面幾個問題
- 1. 什么是 viewport?
- 2. 为什么要用它?
- 3. 怎么用?
- 4. `vw`、`vh`是什么?
答:
1. 什么是 viewport?
[MDN viewport](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Viewport_concepts)的解析是
视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。
2. 用它来移动端适配,兼容不同的设备,当然不局限于移动端,这里只讨论移动端
3. 只需要在`head`中定义 `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`就行,具体如下:
`
<head>
<meta charset="UTF-8" />
<!--
下面一行代码的解析:
width=device-width 内容宽度 等于 设备宽度,换句话说 网页宽度为设备宽度
initial-scale=1.0 初始缩放比等于1.0倍,换句话说 网页初始化缩放比为1.0 就是默认不缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
`
4. `vw` 是视口宽度的一个单位,viewport width 的简称,根据 viewport 相关定义,
已经定义好了的,PC 端 100vw 就等于浏览器的宽度,移动端 100vw 就是设备的宽度(按照上面的 width=device-width)
`vh` 同理,是视口高度,viewport height 的简称,100vh 就是可视窗口的高度
复制代码
了解完上面的知識點,我們可以回答
為什麼font-size 設置成26.666666vw?
设计图的宽度 = 设备宽度
假如 设计图的宽度为 375px,当然可以是其他的,这里是一个假如,如果是640,750就把375换成对应的数值按照以下方法换算就行就行
因为
375px = 100vw
那么
1px = 100 / 375 vw = 0.26666666666666666vw(约等于)
为了方便计算,放大一百倍,精确到6位,只能下取舍,因为上取舍,计算宽度的时候会大于页面宽度,从而出现滚动条
故:
100px = 26.666666vw(约等于)
又因为给 html 标签设置 font-size 为 26.666666vw (约等于)
1rem为font-size的大小
所以:
1rem = 100px
0.2rem = 20px
也就是说:
设计图上的 12px 换算成rem就是0.12rem,20px就写成0.2rem即可
复制代码
優點:不需要引入新的js,一行代碼搞定適配問題缺點:瀏覽器兼容性差,IE9 以下不支持,但現代瀏覽器,特別是移動端,基本都支持
可以參考:
設計圖大小(單位px) | html 的font-size(單位vw) | 備註 |
---|---|---|
375 | 26.666666 | 效果圖20px,代碼應該寫0.2rem |
750 | 13.333333 | 效果圖20px,代碼應該寫0.2rem |
320 | 31.25 | 效果圖20px,代碼應該寫0.2rem |
640 | 15.625 | 效果圖20px,代碼應該寫0.2rem |
2. flexible 方案,(阿里)
在lib-flexible的github 上有著這樣的一句話。
由於
viewport
單位得到眾多瀏覽器的兼容,lib-flexible
這個過渡方案已經可以放棄使用,不管是現在的版本還是以前的版本,都存有一定的問題。建議大家開始使用viewport 來替代此方案。vw
的兼容方案可以參閱《如何在Vue 項目中使用vw 實現移動端適配》一文。
我們可以得到一個很明確的信息,lib-flexible 這個方案已經被放棄使用了,我們可以去擁抱 vw
的那套實現方案。