菜单 搜索
首页 前端知识 CSS3单独制作移动端页面布局方式(响应式布局)、重绘和回流

CSS3单独制作移动端页面布局方式(响应式布局)、重绘和回流

2024-04-03 12:04:04 前端知识 前端哥 326 905 我要收藏

目录

  • 1. 响应式布局
    • 1.1 Bootstrap
      • 1.1.1 简介
      • 1.1.2 简单使用
      • 1.1.3 布局容器
      • 1.1.4 栅格系统
      • 1.1.5 其它
  • 2. 重绘和回流

1. 响应式布局

使用媒体查询针对不同宽度的设备，改变父级布局容器宽度(版心)，再改变里面子元素的布局和样式。从而实现不同尺寸屏幕的不同页面布局和样式

参考设备划分参考尺寸区间参考父级布局容器宽度(版心宽度)
超小屏幕(xs)<576px100%
小屏设备(sm)>=576px ~ 768px540px
中等屏幕(md)>=768px ~ <992px720px
大屏设备(lg)>=992px ~ <1200px960px
超大设备(xl)>=1200p ~ <1400px1140px
特大设备(xxl)>=1400px1320px

1.1 Bootstrap

1.1.1 简介

Bootstrap基于HTML、CSS和JAVASCRIPT，有预制样式库、组件和
插件，使得Web开发更加快捷

  • 中文官网：http://www.bootcss.com/
  • 官网：http://getbootstrap.com/
  • 推荐使用：https://v5.bootcss.com/

1.1.2 简单使用

在官网下载页下载Compiled CSS and JS，然后进行解压，我们的代码中引用css/bootstrap.min.css(内部引用了normalize.css)

在官网的图标页跳转到github下载链接进行bootstrap-icons-1.11.2.zip的下载，复制压缩包的font目录到项目的根目录下，然后在html文件中引入font/bootstrap-icons.min.css

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!-- 第一个解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
  <!-- 第二个解决ie9以下浏览器对css3 Media Query的不识别 -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <title>test title</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="font/bootstrap-icons.min.css" rel="stylesheet">

</head>
<body>

  <!-- 参考: https://v5.bootcss.com/docs/components/buttons/#示例 -->
  <button type="button" class="btn btn-danger">Danger</button>

  <!-- 参考: https://icons.bootcss.com/#usage -->
  <i class="bi-alarm"></i>

  <!-- 参考: https://v5.bootcss.com/docs/components/navbar/#supported-content -->
  <!-- 导航栏式响应式的 -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

</body>
</html>

效果如下：
Bootstrap效果

1.1.3 布局容器

Bootstrap的页面内容和栅格系统，都需要一个父级布局容器(版心)，只需给这个父级布局容器添加class="container"(响应式布局，会自动使用媒体查询改变宽度)或class="container-fluid"(流式布局，宽度为100%)

注: 一个页面可以有多个父级布局容器(版心)添加class="container"，也可以有父级布局容器(版心)不添加class="container"

1.1.4 栅格系统

栅格系统(grid systems)也称“网格系统”，是一套响应式、移动设备优先的流式系统，通过将父级布局容器的宽度最多划分成12等份，实现在不同设备的页面内容缩放和重新布局的效果

  • 行(row)与列(column)页面布局
    • 栅格系统对于一行的内容，可以定义每个子元素占据的列份数
    • 如果总列份数小于12等份，则一行会有空白(位于右侧)；如果总列份数等于12等份，则刚好沾满一行；如果总列份数大于12等份，则会另起一行显示(位于左侧)
    • 对于不同尺寸的屏幕，可以给每个子元素多个不同的class前缀，来定义子元素占据的列份数。类前缀: 超小屏幕(.col-)、小屏设备(col-sm-)、中等屏幕(.col-md-)、宽屏设备(.col-lg-)
    • 如果没有设置较大尺寸屏幕的样式，较小尺寸屏幕的样式对较大屏幕同样有效。如知道了.col-则适用于所有尺寸的屏幕
    • 行(row)会去除父容器的padding值；列(column)会有15px的padding值

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <title>test title</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="font/bootstrap-icons.min.css" rel="stylesheet">

  <style>
    [class^="col-"] {
      border: 1px solid pink;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">1</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">2</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">3</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">4</div>
    </div>
  </div>

</body>
</html>

效果如下：

  • 当位于超小屏幕一行显示一个子元素，分四行显示

  • 当位于小屏设备一行显示两个子元素，分两行显示

  • 当位于中等屏幕，如下图所示

  • 当位于宽屏设备一行显示四个子元素
    行(row)与列(column)页面布局效果

  • 列嵌套: 栅格系统一行的一列又被划分成12等份，可以继续进行行(row)与列(column)页面布局

  • 列偏移: 使用.offset-*-*的类可以将列向右侧偏移。实际是为当前元素增加了左侧的margin值

  • 列显示/隐藏: d-none对所有尺寸的屏幕进行隐藏，d-*-block或d-*-none对大于等于该尺寸的屏幕进行显示或隐藏，同时定义多个列显示/隐藏的类，重叠部分会进行覆盖，如同时定义d-lg-none、d-md-block，在宽屏设置会隐藏，在中等屏幕会显示

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <title>test title</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="font/bootstrap-icons.min.css" rel="stylesheet">

  <style>
    [class^="col-"] {
      border: 1px solid pink;
    }
  </style>
</head>
<body>

  <div class="container">
    <!-- 列嵌套 -->
    <div class="row">
      <div class="col-lg-6">
        <div class="row">  <!-- 高度自动和父盒子一样高 -->
          <div class="col-lg-6">inner1</div>
          <div class="col-lg-6">inner2</div>
        </div>
      </div>
      <div class="col-lg-6">outer2</div>
    </div>

    <!-- 列偏移 -->
    <div class="row">
      <div class="col-lg-4">列偏移左</div>
      <div class="col-lg-4 offset-lg-4">列偏移右</div>
    </div>

    <!-- 列显示/偏移 -->
    <div class="row">
      <div class="col-lg-6 d-none d-sm-block d-lg-none">1</div>
      <div class="col-lg-6">2</div>
    </div>

  </div>

</body>
</html>

效果如下：在超小屏幕下，盒子1是隐藏的；在小屏设备和中等屏幕下，盒子1是显示的；在宽屏设置下，盒子1是隐藏的
列嵌套和列偏移和列隐藏效果

1.1.5 其它

  • 可以使用class="clearfix"清除浮动
  • 可以使用class="text-body-secondary让文字的颜色变成灰色，参考: https://v5.bootcss.com/docs/utilities/colors/#colors

2. 重绘和回流

浏览器渲染页面步骤

浏览器渲染页面步骤如下：

  1. 解析(Parser)HTML，生成DOM树(DOM Tree)
  2. 同时解析(Parser)CSS，生成样式规则(Style Rules)
  3. 根据DOM树和样式规则，生成渲染树(Render Tree)
  4. 进行布局Layout(回流/重排): 根据生成的渲染树，得到节点的几何信息(位置，大小)
    • 回流/重排: 当 Render Tree中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档。回流一定会引起重绘。会导致回流/重排的操作：
      • 页面的首次刷新
      • 浏览器的窗口大小发生改变
      • 元素的大小或位置发生改变
      • 改变字体的大小
      • 内容的变化。比如：input框的输入、图片的大小
      • 激活css伪类。比如: :hover
      • 脚本操作DOM(添加或者删除可见的DOM元素)
  5. 进行绘制Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
    • 重绘: 节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局，比如：color、background-color、outline等。重绘不一定引起回流
  6. Display: 展示在页面上
转载请注明出处或者链接地址：https://www.qianduange.cn//article/4416.html
标签
移动端页面布局方式响应式布局重绘和回流
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Python 控制机器狗实现基本动作（前进，后退，向左，向右）

2024-04-20 08:04:44

【Java】SpringMVC参数接收（二）：JSON、URI、文件

2024-04-19 21:04:31

微信开发者工具报错： app.json: 在项目根目录未找到 app.json (env: Windows,mp,1.06.2303220； lib: 2.30.4)

2024-04-19 21:04:10

关于JSONObject和String类型的相互转换

2024-04-19 21:04:10

java解析超大json文件数据

2024-04-19 21:04:10

vscode json文件添加注释报错

2024-04-19 21:04:51

头歌-JavaScript基础

2024-04-19 21:04:54

VScode,右上方三角形的运行和调试消失不见【1.C/C 插件中Intelli Sense Engine与setting.json中的同步问题 2.,右上方三角形的运行和调试被隐藏的问题】

2024-04-19 21:04:46

notepad 安装json格式化插件(Jsonviewer)的两种方式

2024-04-19 21:04:41

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！