rem
- 这个单位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。
- rem 与 em 的区别
首先理解em的意义，它表示当前元素的font-size的计算值，即em==font-size
两者区别：rem 是相对于根元素的 font-size，而 em 是相对于当前元素的font-size - 手机端方案的特点
- 所有手机显示的界面都是一样的，只是大小不同
-
1 rem == html font-size == viewport width
一切单位以宽度为基准，就能完美还原设计稿
- 使用 js 动态调整 rem
// html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
// 1 rem 等于一个页面的宽度
var pageWidth = window.innerWidth
document.write('<style>html{font-size: '+pageWidth+'px;}</style>')
</script>
</head>
<body>
<div class="parent clearfix">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
</body>
</html>
// css
*{margin:0;padding:0;}
body{
// 设置字体大小，不然就变成和页面一样大了
font-size: 16px;
}
.child{
background-color: #ddd;
float: left;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
// 所有宽高边距等都用 rem 设置
.child{
width: 0.4rem;
height: 0.2rem;
margin: 0.05rem;
}
这样，不论手机宽度如何，比例仍然是一样的，只是大小不同
另外，直接将rem与页面宽度等同，太大了，设置css都要使用小数，很麻烦
所以可以设置的小一点，比如百分之一，但是这样可能会出现一个新的问题
var pageWidth = window.innerWidth
document.write('<style>html{font-size: '+ pageWidth/100 +'px;}</style>')
得到的font-size值太小，别忘了chrome默认限制font-size最小为12px，于是页面就变‘大了’
为了防止这样的情况，不能除以太大的数字
var pageWidth = window.innerWidth
document.write('<style>html{font-size: '+ pageWidth/10 +'px;}</style>')
一般而言，10比较合适，因为智能手机屏幕通常在300-400px左右，除以10后在30-40，不会出现因为‘12px原则’而被‘放大页面’
- rem 可以与其他单位同时存在
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
比如 font-size，如果使用rem，会在屏幕很小的时候变得很难看
还有border，1px转换rem在屏幕太小的时候仍然是1px，因为浏览器最小就是1px了
这里建议太小的单位，或者如font-size这样的（字体太大太小都不好看），可以使用其它单位与rem混合使用
比如px、em
- 在 SCSS 里使用 PX2REM
这个是node-sass,
npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
source ~/.bashrc
npm i -g node-sass
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
node-sass -wr scss -o css
编辑 scss 文件就会自动得到 css 文件
在 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;
}
即可实现 px 自动变 rem
饥人谷教学视频
一些知识点
- 如果不给页面添加
font-size，则默认字体大小为16px - Chrome有最小字号设置，一般默认为12px，这个时候即使你设置更小的像素也无法生效，依然是12px（仅chrome）
网友评论