REM

REM

1.各种单位

  1. px 像素

  2. em 一个M的宽度，跟自身的 font-size 相同

  3. rem 根元素的 font-size

  4. vh : viewport height 视口高度 100vh === 视口高度

    vm: viewport width 视口宽度 100vw === 视口宽度

2.使用REM

当我们要写一个适配手机的页面的时候，我们就会陷入这样蛋疼的境地。

因为各种品牌，各种型号的手机分辨率是不一样的，这就很蛋疼了。

这时候就使用REM来解决这个问题。

  1. REM始终为根元素(html)的 font-size 的值。

  2. 手机页面的宽度 width 是永远不变的。

知道了上面两个前提，我们就可以做一些事情了。

  1. 通过 width的值设置根元素的 font-size。
  2. 通过 REM 定义各种宽和高，这样就是永远适配当前页面宽度的。

首先，添加 meta:viewport 标签

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

第二步，通过 width 计算根元素的font-size

1
2
var $width = window.outerWidth;
document.write(`<style>html{font-size:${$width/10}px}</style>`)

P.S. 虽然这个 fontsize/n 中的 n ,是你可以自己决定的，但不要忘记了

  1. 12px 原则，chrome浏览器会阻止你设置比 12px还小的字。

  2. 假如你换算出来的 px 太小，CSS会认为这是 0 或者 1。

第三步，写CSS

1
2
3
4
5
div{
    height:3rem;
    widht:3rem;
    margin:0 .5rem
}

通过上面的换算，我们可以知道

  1. 根元素的 font-size = $width/10 ， 也就是 十分之一个屏幕的宽度。
  2. 所以 3rem === 十分之三个屏幕宽度。
  3. 所以，无论在什么环境下，它都永远等于十分之三个屏幕宽度。
  4. 因此，在每一个设备上的观看效果都相同。

3.使用sass

每次都要计算，非常的麻烦，所以使用 sass 或者 less 帮我们计算。

安装sass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@function px( $px) {
    @return $px/$designWidth*10+rem;  
    //这里为啥✖️10呢，因为在上面我们除以10了，所以要计算出比例值需要✖️10
    //假设 屏幕宽度为 320px , 那么 root font-size:32px ,即 1rem === 32px ，把屏幕分成了10等份。
    //但是 设计稿宽度为 640px , 里面还有一个高度为 320px 的 div,
    //相对于设计稿,div的比例是 320/640=1/2 , 也就是占了5份的屏幕宽度 即为 5rem 
    //所以 height : 5rem 
}
@designWidth:640; //根据设计稿的宽度来写。
body{
    font-size: 16px;
}
.child {
    width: px2rem(320);;
    height: px2rem(160);
    margin: px2rem(40) px2rem(40);
    border: 1px solid red;
}