动态REM

东方来客
295 阅读2分钟

动态REM是一种手机专用的适配方案，不是响应式的方案。

REM是什么？

CSS有很多长度单位，rem也是其中之一。它的单位代表根元素（<html>）的 font-size 大小,一般默认的字体大小是16px，那么 1rem === 16px; 。另外还有常见的 vh，即viewport height视口高度， 100vh === 视口高度；与之对应的还有 vw，即viewport width视口宽度， 同样的100vw === 视口宽度。 举例：

<p>
力拔山兮气盖世，
时不利兮骓不逝。
骓不逝兮可奈何，
虞兮虞兮奈若何！
</p>
<!--为其设置字体大小为1rem-->
p{
    fong-size: 1rem;
}

此时字体大小为16px;因为rem的大小取决于 <html>的大小，而其默认大小为16px; 来更改一下html{ font-size: 20px; }，可看到计算出的字体大小也改为20px;

再在<body>中添加文字，其大小也发生了改变，为20px,是因为儿子要继承父亲嘛~

那么长相相似的rem和em的区别是什么呢？

答案就是在自身设置em为单位后会继承父元素的字体大小，如果自身设置了字体大小后则用其本身的大小（如设置line-height）。

动态REM

其思想时让font-size等于页面的宽度，rem依赖于fonzt-size,就是间接依赖于page的宽度。实现方法如下：

<script>
let pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth + '}</style>')
</script>

接下来做一个demo来看看：

  <div class="parent clearfix">
    <div class="child">力拔山兮气盖世</div>
    <div class="child">时不利兮骓不逝</div>
    <div class="child">骓不逝兮可奈何</div>
    <div class="child">虞兮虞兮奈若何</div>
  </div>

*{margin:0;padding:0;}
body{
  font-size: 16px;
}
.child{
  height:0.2rem;
  width: 0.4rem;
  margin: 0.05rem 0.05rem;
  float:left;
  background: cyan;
  text-align: center;
  line-height:0.2rem;
}
.clearfix::after{
  content:'';
  display:block;
  clear: both;
}

如此便实现了一个动态rem的小demo

如果写小数觉得不方便，那么在设置html宽度时可以除以10之类的倍数，这样在为样式设置大小时就能乘以相应的倍数啦。

像这样写rem老是需要计算，那么有没有别的方法让我们直接写像素数呢？

@function px($px ){
    @return $px/$designWidth*10 + rem
}
$designWidth: 640    //設計稿的寬度

這樣在設置長度的時候直接寫px(像素數)即可，然後通過sass的sass --watch input:output實時的將scss轉換為css即可。如果你沒有安裝sass那麽就在互聯網上搜索一下吧~~

avatar
文章
阅读
粉丝