動(dòng)態(tài)REM是手機(jī)專用的自適應(yīng)方案
REM是什么
我們常用的單位有(有問題看MDN)
px-
em(一個(gè)漢字M的寬度,對(duì)面試官說) -
rem (root em根元素的font-size)
- 根元素就是html 的 font-size 16px
-
vhviewport 的height高度 視口高度 100vh == 視口高度 -
vwviewport 的width 跨度 視口寬度 100vw == 視口寬度 - 頁面默認(rèn)
font-size:16px - chrome 默認(rèn)最小12px,字體大小不要小于12px
- REM就是根元素(html)的font-size大小
rem 和 em區(qū)別
1em == 16px默認(rèn)值-
em自己的font-size -
rem根元素的font-size
動(dòng)態(tài)REM
如果沒有設(shè)計(jì)圖,就不做響應(yīng)式
給這些圖再做響應(yīng)式
- 所有手機(jī)顯示的界面都是一樣的，只是大小不同
響應(yīng)式需做不同的適配,例如:
- 0~320px 一套css ?
- 320px~375px 一套css ?
- 375~414px 一套css ?
- 百分比布局
- 缺點(diǎn): 高度不能和寬度做配合,不知道寬度的大小
- 整體縮放
- 一切單位以寬度為標(biāo)準(zhǔn)
// html的font-size寬度 等于 頁面寬度
// 1 rem == html font-size == viewport width
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
// 動(dòng)態(tài)REM示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
var pageWidth = window.innerWidth;
document.write("<style>html{font-size:"+ pageWidth +"px;}</style>")
</script>
<style>
*{margin:0;padding:0;}
.child{
float:left;
width:0.4rem;
height:0.2rem;
margin:0.05rem 0.05rem;
background:#ddd;
}
body{
font-size:16px;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child">box</div>
<div class="child">box</div>
<div class="child">box</div>
<div class="child">box</div>
</div>
</body>
</html>
// 重要的
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
// 可以調(diào)節(jié)寬度
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+ pageWidth/10 +'px;}</style>')
</script>
-
border怎么辦?
- 太小的直接用px,和rem混用
REM 可以與其他單位同時(shí)存在
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
上面的這些可以解決我們?cè)谝苿?dòng)端是配上的單位動(dòng)態(tài)rem,但是對(duì)于我們來說,還是有一個(gè)痛點(diǎn).單位的換算特別麻煩,先px,再rem,該怎么解決呢???
px自動(dòng)變?yōu)閞em
給自己一個(gè)警告!!!!
- 為什么你學(xué)不好 LESS/SASS/Webpack/SCSS
- 你不會(huì)命令行，你非要用 Windows (卸載windows)
- 你不會(huì)英語（有些內(nèi)容可以看中文翻譯）
- 你不會(huì)看文檔（很重要的能力）
rem自動(dòng)化轉(zhuǎn)px 就用scss唄
- 先自己嘗試使用scss
