什么是 REM
REM 是一个相对长度单位，根元素
<html>的字体大小
REM 和 EM 的区别是什么
- px 像素
- em 字符 m 的宽度/一个汉字的宽度
在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如width - vh 视窗高度的1%
- vw 视窗宽度的1%
REM 的思想就是缩放，把元素放到或缩小
手机端方案的特点
页面在所有手机显示都是一样的比例，只是大小不同，因此最好是用 vw 作为单位，直接根据视窗来决定元素的大小，但是 vw 的兼容性很差，rem 具有良好的兼容性，可以担此大任，使用 JS 使得 1rem 等于视窗的宽度
JS 动态调整 REM
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
const viewportWidth = window.innerWidth
document.write("<style>html{font-size:" + viewportWidth + "px}</style>")
</script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
const viewportWidth = window.innerWidth
document.write(`<style>html{font-size:${viewportWidth}px}</style>`)
</script>
一个动态 REM 的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0">
<title>JS Bin</title>
<script>
const viewportWidth = window.innerWidth
document.write(`<style>html{font-size:${viewportWidth}px}</style>`)
</script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
font-size:16px;
}
.child{
width: 0.4rem;
height:0.2rem;
float:left;
margin:0.05rem 0.05rem;
background: #ddd;
}
.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>
消除 CSS值小数
12px法则
通过上面的例子，不难发现所有的 CSS值都是小数，计算起来特别麻烦，解决方案是用 rem 模仿 vm，这样所有的 CSS值都是整数
<script>
const viewportWidth = window.innerWidth
document.write(`<style>html{font-size:${viewportWidth/100}px}</style>`)
</script>
Chrome 浏览器默认字体最小是
12px（12px法则），通常1rem<12px，页面无法正常显示
折中方案消除 CSS值小数
<script>
const viewportWidth = window.innerWidth
document.write(`<style>html{font-size:${viewportWidth/10}px}</style>`)
</script>
REM 可以与其他单位同时存在
建议
border和font-size以px为单位
font-size: 16px;border: 1px solid red;
在 SCSS 里使用 PX2REM
SCSS 可以自动转换
px为rem，减少人工计算量，提高效率
安装 SCSS
1.切换淘宝源镜像
npm config set registry https://registry.npm.taobao.org/
2.配置 SASS下载环境
vi ~/.zshrc
export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"
source ~/.zshrc
3. 安装 node-sass
npm i -g node-sass
使用 SCSS
1. 创建 scss 文件自动 css 文件环境
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
node-sass -wr scss -o css
2. 在 SCSS 文件中写转化函数
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度，根据设计稿的宽度填写
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
3. 在 CSS 文件得到转换后的代码
cat css/style.css
.child {
width: 5rem;
height: 2.5rem;
margin: 0.625rem 0.625rem;
border: 1px solid red;
float: left;
font-size: 1.2em;
}
网友评论