CSS 合集 4 (响应式)

1. rem 是什么

rem

相对长度单位，相对于根元素，常用于响应式布局

对比

px：绝对长度单位，最常用
em：相对长度单位，相对于父元素，不常用

例如

html {
  font-size: 100px;
}

div {
  background-color: #ccc;
  margin: 10px 0;
  font-size: 0.16rem;
}

<p style="font-size: 0.1rem;">p1</p>
<p style="font-size: 0.2rem;">p2</p>
<p style="font-size: 0.3rem;">p3</p>

<div style="width: 1rem;">div1</div>
<div style="width: 2rem;">div2</div>
<div style="width: 3rem;">div3</div>

弊端

“阶梯”性

优化

使用 vw/vh（见第3题）

2. 响应式布局的常用方案（※）

CSS3

media-query

根据不同的屏幕宽度设置根元素的 font-size

rem

基于根元素的相对单位

例如

<div id="div1">
  div
</div>

@media only screen and (max-width: 374px) {
  /* iPhone5 或者更小的尺寸，以 iPhone5 的宽度（320px）比例设置 font-size */
  html {
    font-size: 86px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 413px) {
  /* iPhone6/7/8 和 iPhoneX */
  html {
    font-size: 100px;
  }
}

@media only screen and (min-width: 414px) {
  /* iPhone6p 或者更大的尺寸，以 iPhone6p 的宽度（414px）比例设置 font-size */
  html {
    font-size: 110px;
  }
}

body {
  font-size: 0.16rem;
}

#div1 {
  width: 1rem;
  background-color: #ccc;
}

vw 和 vh

3. vw 和 vh

背景

由于 rem 存在“阶梯”性问题

网页视口尺寸

网页视口高度：window.innerHeight
网页视口宽度：window.innerWidth

对比

屏幕尺寸

屏幕高度：window.screen.height
屏幕宽度：window.screen.width

body 尺寸

body 高度：document.body.clientHeight
body 宽度：document.body.clientWidth

vw

网页视口宽度（window.innerWidth）的 1/100

即 window.innerWidth = 100vw

vh

网页视口高度（window.innerHeight）的 1/100

即 window.innerHeight = 100vh

拓展

vmax

取 vw 和 vh 中的较大值

vmin

取 vw 和 vh 中的较小值

【前端造火箭🚀】CSS 合集 4 (响应式)