动态REM

发布 : 2019-11-14 分类 : REM 浏览 :

1、什么是REM

动态REM是手机专用的自适应方案!

首先先了解下常见的长度单位:

  • px:表示像素,是相对于显示器屏幕分辨率而言的相对长度单位
  • em:相对长度单位,这个单位表示元素的font-size的计算值。如果用在font-size属性本身,它会继承父元素的font-size。也可以理解为em指字体高度,浏览器的默认字体为16px,所以未经调整的浏览器都符合1em=16px。1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。
  • rem:这个单位代表根元素的font-size大小(例如 <html> 元素的font-size)。当用在根元素的font-size上面时 ,它代表了它的初始值。例如:设置html { font-size: 20px }时,其他元素1rem = 20px5rem = 100px
  • vh:viewport height视口高度,100vh=视口高度
  • vw:viewport width视口宽度,100vw=视口宽度,1vw等于window.innerWidth的1%。例如:设备物理宽度为375px时,1vw = 3.75px

12px法则:
网页默认的font-size为16px
chrome默认的最小字号为12px,如果将font-size设置为12px以下,一律按12px显示!

2、使用JS动态调整REM

添加如下代码:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

1
2
3
var pageWidth = window.innerWidth   //获取页面的宽度
console.log(pageWidth)
document.write('<style>html{font-size:'+pageWidth+'px}</style>') //将html字体大小设置为页面的宽度

3、将px自动变为rem

步骤:

  • 切换淘宝源:

    1
    npm config set registry https://registry.npm.taobao.org/
  • 编辑bashrc:

    1
    vi ~/.bashrc
  • 添加如下代码:

    1
    export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"
  • 安装node-sass:

    1
    npm i -g node-sass
  • 创建文件夹及文件

    1
    2
    3
    4
    5
    mkdir ~/Desktop/scss-demo
    cd ~/Desktop/scss-demo
    mkdir scss css
    touch scss/style.scss
    start scss/style.scss
  • 运行:

    1
    node-sass -wr scss -o css

然后在style.scss头部添加如下代码:

1
2
3
4
5
@function px2rem($px) {
@return $px/$designWidth+rem;
}

$designWidth : 640;//设计稿宽度

运行node-sass -wr scss -o css,就可以看到生成了一个style.css的文件,并且把px变为了rem

详细代码

本文作者 : LqZww
原文链接 : http://yoursite.com/2019/11/14/dong-tai-rem/
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
支付宝扫一扫, 向我赞赏

支付宝扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

留下足迹