rem以及scss转css
2018-08-25 本文已影响0人
小志1
rem 是根元素(html)的font-size
一般rem会和em进行比较
两者本质上没任何关系，如果说有关系的话，那便是：rem是根元素font-size，em是自己的font-size。
在做手机页面的时候，不可能做响应式布局的，因为手机屏幕大小由几十种，不可能完全用响应式布局，这个时候就要使用到比例布局。
若是用纯比例百分比布局，则会出现宽度按照百分比，高度无法实现，无法完美还原设计稿，这时候rem就比较适合。
因为rem既可以实现宽度的比例，也可以实现高度的比例。而一切以宽度为基准就能保证完美还原设计稿。
rem使用
1rem = html font-size = 1 page width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<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}px</style>`)
</script>
</head>
<body>
1rem = html font-size = 1 page width
</body>
</html>
给HTML标签好像素px，那么在写样式的时候，只需要给需要的样式用rem表示宽高即可。
但是在使用rem的时候，需要给样式写到小数点以后，这样比较繁琐，比如给<body>标签fon-size:0.01rem的1%大小时候，会用到小数点好几位，就需要进行转换下。
px转rem
按照设计稿设计时，根据px转成rem是比较繁琐的，所以需要计算好来使用px。
这时候需要进行换算
@function px2rem( $px ){
@return $px*320/$designWidth/20 + rem;
}
$designWidth : 750;
并且通过scss转成css（因为scss使用比较方便）
- 首先安装淘宝镜像：
* npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null") - 然后按照
node-sass：cnpm i -g node-sass - 接着就开始创建文件
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss
mkdir css
touch scss/style.scss
touch css/style.css
- 然后开始
node-sass启动热加载监听：node-sass --watch scss/style.scss css/style.css监听文件(或者node-sass -wr scss -o css监听文件夹) - 再然后写代码
scss/style.scss
@function px2rem( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 750; //750 是设计稿的宽度，要根据设计稿的宽度填写。
body{
p{
width:px2rem(10); //10px
height:px2rem(10); //10px
}
}
css/style.css
在看css/style.css就变成了
body p {
width: 0.13333rem;
height: 0.13333rem; }
这样scss里的px就自动变成了css里的rem，
我们只需要根据设计稿直接填写像素，而不需要进行换算了。
