• CSS 【详解】响应式布局（含 rem 详解）

    响应式布局： 同一页面在不同的屏幕上有不同的布局，即一套代码自适应不同的屏幕。

    为什么 rem 能用于实现响应式布局？

    • px 绝对长度单位，不同客户端表现都相同，不具有响应式
    • em 相对长度单位，相对于父元素的 font-size 值，不同元素的父元素的尺寸各不相同，没有统一标准。
    • rem 相对长度单位，相对于根元素的 font-size 值，页面中的根元素只有一个（即 html 标签），标准统一，可用于响应式布局。

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      html {
        font-size: 20px;
      }
      .box1 {
        font-size: 1rem;
      }
      .box2 {
        font-size: 2rem;
      }
      .box3 {
        font-size: 3rem;
      }
    style>
  head>
  <body>
    <div class="box1">1remdiv>
    <div class="box2">2remdiv>
    <div class="box3">3remdiv>
  body>
html>

    • 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
    • 26
    • 27
    • rem 除了可用于 font-size 外，还可以用于任意其他表示长度的属性，如 width，height 等

    响应式布局的实现

    方案一【推荐】 相对根元素响应 = 媒体查询 + rem

    • 使用媒体查询，随屏幕宽度的变化，调整根元素的 font-size
    • 使用单位 rem
    DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>响应式布局title>
    <style type="text/css">
      @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 和 iphone x */
        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;
      }
      .titleBox {
        width: 3rem;
        background-color: #ccc;
      }
    style>
  head>
  <body>
    <div class="titleBox">响应式布局———— 媒体查询 + remdiv>
  body>
html>

    • 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
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    缺点

    • rem 具有阶梯性，即在某个媒体查询的范围内，其实是没有响应式的，只有超越媒体查询的临界线，进入新的媒体查询范围，才会触发响应式。（无法针对每一个媒体宽度值，都响应式地变化）

    方案二【推荐】 相对视口响应 = vh + vw

    在这里插入图片描述

    • 网页视口宽度 window.innerWidth：客户端浏览器渲染网页的区域中可见部分的宽度（如上图）
    • 网页视口高度window.innerHeight;：客户端浏览器渲染网页的区域中可见部分的高度（如上图）

    移动端的网页视口宽度和高度在PC端浏览器的模拟是不准确的（PC端的模拟没有显示移动端浏览器的头部和底部），只能在移动端上用 js 获取

    相关概念还有

    • 屏幕的高度 window.screen.height
    • 屏幕的宽度 window.screen.width
    • body 的高度 document.body.clientHeight
    • body 的宽度 document.body.clientWidth
    • vh 相对长度单位， 1vh = 网页视口高度 * 1%
    • vw 相对长度单位， 1vw = 网页视口宽度 * 1%
    • vmin 相对长度单位， 1vmin = 1vh 和 1vw 中的较小值
    • vmax 相对长度单位， 1vmax = 1vh 和 1vw 中的较大值

    CSS3 新增 vh 和 vw 就是用于实现真正的响应式布局（随客户端设备宽高的变化，页面自动适配调整变化，呈现预期的页面效果）

    移动端的横竖屏切换时，可能需要使用 vmin 和 vmax 实现响应式布局

    缺点

    需浏览器支持 vh 和 vw 【CSS3 的语法】（某些支持CSS3语法的浏览器，仍不支持 vh 和 vw）

    方案三： 百分比

    大部分情况下，百分比是相对于父元素进行计算的，但也有很多例外的情况，如vertical-align的百分比是相对当前元素的line-height值来计算的，又因每个元素的父元素各不相同，导致使用百分比实现响应式布局变得更加复杂，所以并不推荐。

    方案四【推荐】flex 布局

    缺点

    1. flex 布局在响应式方面，主要是实现元素宽高的自适应，无法实现其他属性，如字体大小的自适应。
    2. 需浏览器支持 CSS3

    其他方案

    • 使用 JavaScript 动态计算（缺点是工作量比较大）
    • 使用开源框架 bootstrap
  • 相关阅读:
    HTML: css中的display属性
    vue 插槽 作用域插槽
    安达发|印刷包装行业利用APS自动排产系统迎来绿色革命
    ClickHouse数据类型完整使用 第三章
    Selenium自动化测试框架
    管理Linux的软件包和进程
    fpm模式下读取到is_cli为何为true
    【python】爬虫系列Day03--url传参
    使用Redis常遇到的问题
    壹基金为爱同行走进绿水青山，为乡村儿童送去健康水
  • 原文地址：https://blog.csdn.net/weixin_41192489/article/details/136423056