动态REM是手机专用的自适应方案
REM是什么
我们常用的单位有(有问题看MDN)
px-
em(一个汉字M的宽度,对面试官说) -
rem (root em根元素的font-size)
- 根元素就是html 的 font-size 16px
-
vhviewport 的height高度 视口高度 100vh == 视口高度 -
vwviewport 的width 跨度 视口宽度 100vw == 视口宽度 - 页面默认
font-size:16px - chrome 默认最小12px,字体大小不要小于12px
- REM就是根元素(html)的font-size大小
rem 和 em区别
1em == 16px默认值-
em自己的font-size -
rem根元素的font-size
动态REM
如果没有设计图,就不做响应式
给这些图再做响应式
- 所有手机显示的界面都是一样的，只是大小不同
响应式需做不同的适配,例如:
- 0~320px 一套css ?
- 320px~375px 一套css ?
- 375~414px 一套css ?
- 百分比布局
- 缺点: 高度不能和宽度做配合,不知道宽度的大小
- 整体缩放
- 一切单位以宽度为标准
// 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>
// 动态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">
// 可以调节宽度
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+ pageWidth/10 +'px;}</style>')
</script>
-
border怎么办?
- 太小的直接用px,和rem混用
REM 可以与其他单位同时存在
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
上面的这些可以解决我们在移动端是配上的单位动态rem,但是对于我们来说,还是有一个痛点.单位的换算特别麻烦,先px,再rem,该怎么解决呢???
px自动变为rem
给自己一个警告!!!!
- 为什么你学不好 LESS/SASS/Webpack/SCSS
- 你不会命令行，你非要用 Windows (卸载windows)
- 你不会英语（有些内容可以看中文翻译）
- 你不会看文档（很重要的能力）
rem自动化转px 就用scss呗
- 先自己尝试使用scss
