Rem 手机专用！！

2018-10-22 本文已影响0人阿龙哟

1.什么是rem?

长度单位：
px 像素
em 一个m的宽度一个汉字的宽度
rem root em 根元素的fontsize
vh viewport height 视口高度 =100vh
vw viewport width 适口宽度 = 100vw

2.12像素法则
网页默认font-size：16px;
默认字体最小 12px（chrome有效）

3.rem 和em
是根元素的fontsize 是html标签而不是body
fontsize可以继承
em和自身的fontsize相同，不是父元素或者根元素

手机屏幕宽度
手机难以做响应式
1.百分比布局，高度难以控制，无法和宽度配合
2.等比缩放，不好办
3.于是有了rem 来实现所有元素等比例变化

一切单位以宽度为基准就能保证完美还原设计
但是目前还没有任何单位直接能以宽度为基准
因此想到了用js控制

image.png

通过js来控制html的fontsize来展示页面的宽度，rem刚好也和根节点下的rem相对应，从而实现了用rem来控制整个页面的宽高

  <script>
    var pageWidth = window.innerWidth;
    console.log(pageWidth)
    document.write('<style>html{font-size:'+pageWidth+'px</style>')
  </script>
*{padding: 0;margin:0;
box-sizing: border-box;}

body{
  font-size:16px;
}

.child{
  width:0.4rem;
  height:0.2rem;
  margin:0.05rem 0.05rem;
  background:#ddd;
  border:1px solid #000;
  float:left;
}


.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

动态rem.gif

这样就可以实现动态rem了，非常适合手机端!

当距离特别小，比如1像素的border，此时就可以用px，又或者字体大小，直接用px固定一下比较美观，不然字体会随着屏幕大小的变化而变化
可以混用单位

REM 可以与其他单位同时存在
 font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;

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

Rem 手机专用！！

猜你喜欢

热点阅读