CSS响应式
2023-09-14 21:48:29 #CSS #rem #vw #vh

响应式

rem 是什么

  • px，绝对长度单位，最常用
  • em，相对长度单位，相对于父元素，不常用
  • rem，相对长度单位，相对于根元素，常用于响应式布局
  • 例如： html {font-size: 100px;} ，1rem 等同于 100px，不仅仅可以设置字体大小，其他 px 单位的都可以使用 rem，比如设padding: .2rem，等同于 padding: 20px

响应式布局

  • meta：<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • media-query：根据不同的屏幕宽度设置根元素的 font-size
  • rem：基于根元素的相对单位
  • PC 端：限制最外层 container 的宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@media only screen and (max-width: 374px) {
    /* iPhone5 或者更小的尺寸，以 iPhone5 的宽度 320px比例设置 */
    html {
        font-size: 85px;	/* 85/100 ≈ 320/375 */
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iPhone6/7/8 和 iPhone x */
    html {
        font-size: 100px;
    }
}
@media only screen and (min-width: 414px) {
    /* iPhone6p 或者更大的尺寸，以 iPhone6p 的宽度414px比例设置 */
    html {
        font-size: 110px;	/* 110/100 ≈ 414/375 */
    }
}
body {
    font-size: 0.16rem;
}
#div1 {
    background-color: #ccc;
    width: 1rem;
}
1
2
3
<body>
<div id="div1">this is div</div>
</body>

注意！rem 弊端：产生“阶梯”性

网页视口尺寸

  • window.screen.height：屏幕高度
  • window.innerHeight：网页视口高度
  • clientHeight：div 高度
  • clientWidth：div 宽度

vw / vh

  • vh：网页视口高度的 1/100，window.innerHeight === 100vh
  • vw：网页视口宽度的 1/100，window.innerWidth === 100vw
  • vmax：取 vw/vh 两者最大值
  • vmin：取 vw/vh 两者最小值
1
<div id="container"></div>
1
2
3
4
5
#container {
    width: 20vw;    /* 20vw = window.innerWidth/100*20 */
    height: 10vh;   /* 10vh = window.innerHeight/100*10 */
    background-color: #ccc;
}
1
2
3
4
5
console.log("屏幕高度： ", window.screen.height);     // 720
console.log("网页视口宽度: ", window.innerWidth);     // 1280
console.log("网页视口高度: ", window.innerHeight);    // 571
console.log("div宽度：", document.getElementById("container").clientWidth);    // 256
console.log("div高度：", document.getElementById("container").clientHeight);   // 57
上一页
2023-09-14 21:48:29 #CSS #rem #vw #vh
下一页