devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css之移动端适配方案rem与less&媒体查询响应式布局&bootstrap

作者：从前慢现在也慢 | 2024-06-11 09:56:07

赞

踩

移动端适配方案

目录

一、屏幕分辨率

二、视口

三、二倍图

四、适配方案

五、rem适配方案

媒体查询

rem-flexible.js

六、less

less简介

less注释

less运算

less嵌套

less变量

less导入

less导出

less禁止导出

七、极速问诊移动端页面案例

八、vw与vh适配方案

九、响应式媒体查询

媒体查询书写位置

十、Bootatrap响应式布局

下载

 十一、Bootstrap-栅格系统

Bootstrap插件

Bootstrap全局样式

组件（components）

字体图标

一、屏幕分辨率

屏幕分辨率：纵横向上的像素点数，单位是px

pc分辨率：1920*1080.........

缩放150%——1920/150%

总结：硬件分辨率——物理分辨率（出厂设置）

缩放调节的分辨率——逻辑分辨率（软件/驱动设置）

4dd28b78513c4041a36709f5144b58bd.png

二、视口

手机屏幕尺寸不同， 网页宽度均为100%

网页宽度和逻辑分辨率尺寸相同

视口：显示html网页的区域，用来约束html尺寸等于逻辑分辨率

width=device-width：视口宽度=设备宽度

initial-scale=1.0：缩放1倍（不缩放）

07bd61a1eac24d5193321543946e6752.png

三、二倍图

设计稿里每个元素的尺寸的倍数。

作用：防止图片在高分辨率屏幕下模糊失真

四、适配方案

宽度适配：宽度自适应

1.百分比布局/流式布局

2.flex布局

等比适配：宽高等比缩放

1.rem

2.vw

五、rem适配方案

当屏幕大小不同时，宽高实现等比例缩放。

rem单位，是相对单位

rem单位是相对于HTML标签的字号计算结果

1rem=1HTML字号大小

盒子尺寸为width=30*5，height=30*3

  1. <!DOCTYPE html>
  2.   <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.       }
  7.  
  8.       /* 1. 给HTML标签加字号 */
  9.       html {
  10.         font-size: 30px;
  11.       }
  12.  
  13.       /* 2. 使用rem单位书写尺寸 */
  14.       .box {
  15.         width: 5rem;
  16.         height: 3rem;
  17.         background-color: pink;
  18.       }
  19.     </style>
  20.   </head>
  21.  
  22.   <body>
  23.     <div class="box"></div>
  24.   </body>
  25. </html>

媒体查询

能够检测视口的宽度，然后编写差异化的css样式

当某个条件成立，执行对应的css样式

@media （媒体特性） {    选择器  {  css属性  }    }

  1. <!DOCTYPE html>
  2.   <style>
  3.     /* 视口宽度是375，网页背景色是绿色 */
  4.     @media (width:375px) {
  5.       body {
  6.         background-color: green;
  7.       }
  8.     }
  9.   </style>
  10. </head>
  11. <body>
  12.   
  13. </body>
  14. </html>

不同的视口条件下，设置HTML标签字号时，把网页分成10份，html标签的字号为视口宽度的1/10

  1. <!DOCTYPE html>
  2.   <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.       }
  7.  
  8.        1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号 
  9.        @media (width:320px) {
  10.         html {
  11.             font-size: 32px;
  12.         }
  13.       }
  14.       @media (width:375px) {
  15.         html {
  16.             font-size: 37.5px;
  17.         }
  18.       }
  19.       @media (width:414px) {
  20.         html {
  21.             font-size: 41.4px;
  22.         }
  23.       } 
  24.  
  25.        2. 使用rem单位书写尺寸 
  26.       .box {
  27.         width: 5rem;
  28.         height: 3rem;
  29.         background-color: pink;
  30.       }
  31.     </style>
  32.   </head>
  33.  
  34.   <body>
  35.     <div class="box"></div>
  36.  
  37.     <script src="./js/flexible.js"></script>
  38.   </body>
  39. </html>

rem-flexible.js

flexible.js时手淘开发的一个用来适配移动端的js库

核心原理就是根据不同的视口宽度给网页中的html根节点设置不同的font-size

使用时要先引入

c19d887554f94ffb9c9eb57bc3a8ac41.png

rem单位尺寸

1.确定基准根字号

查看设计稿宽度——确定参考设备宽度（视口宽度）——确定基准根字号（1/10视口宽度）

2.rem单位尺寸=px单位数值/基准根字号

六、less

less简介

less是一个css预处理器，less文件后缀是.less。扩充了css语言，使css具备一定的逻辑性，计算能力。

注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件

vscode插件：easy less，保存less文件后自动生成对应的css文件

1e3b0d98ef5b42849604b012714754ba.png

less注释

单行注释：

语法：//注释内容

快捷键：ctrl+/

块注释：

语法：/*注释内容*/

快捷键：shift+alt+a

less运算

加减乘直接书写计算表达式

除法需要添加小括号或.

  1. .box {
  2.   width: 100 + 20px;
  3.   width: 100 - 80px;
  4.   width: 100 * 2px;
  5.  
  6.   // 除法 / → (计算表达式) 或 ./ → 推荐（）
  7.   width: (68 / 37.5rem);
  8.   width: 29 ./ 37.5rem;
  9.  
  10.   // 如果表达式有多个单位，最终css里面以第一个单位为准
  11.   height: (29px / 37.5rem);
  12. }

less嵌套

作用：快速生成后代选择器

  .父选择器{  //父级样式     .子选择器   {       //子级样式       }    }

  1. .father {
  2.   color: red;
  3.   .son {
  4.     width: 200px;
  5.     a {
  6.       color: green;
  7.       // & 表示的是当前选择器，代码写到谁的大括号里面就表示谁 → 不会生成后代选择器
  8.       // 应用：配合hover伪类或nth-child结构伪类使用
  9.       &:hover {
  10.         color: blue;
  11.       }
  12.     }
  13.  
  14.     // a:hover {
  15.     //   color: orange;
  16.     // }
  17.  
  18.     
  19.   }
  20. }

less变量

概念：容器，存储数据

作用：存储数据，方便使用和修改

语法：

定义变量：@变量名：数据；

使用变量：css属性：@变量名；

  1. // 1. 定义变量
  2. @myColor: green;
  3.  
  4. // 2. 使用变量
  5. div {
  6.   color: @myColor;
  7. }
  8.  
  9. p {
  10.   background-color: @myColor;
  11. }
  12.  
  13. a {
  14.   color: @myColor;
  15. }

less导入

作用：导入less公共样式文件，可以使最终只引入一个less文件。

语法：导入：@import “文件路径” ；

提示：如果是less文件可以省略后缀

  1. @import "./less-体验.less";
  2. @import "./less-注释";

less导出

写法：在less文件的第一行添加//out：存储url

提示：文件夹名称后面添加/

  1. //out： ./index.css
  2.  
  3. //out: ./css/
  4. 表示导出到css文件夹中

less禁止导出

写法：在less文件中第一行添加：//out：false

作用：如果把一些less文件导入到其他less文件中，最终只需要导出一个less文件，不需要导出的就需要禁止导出

七、极速问诊移动端页面案例

fd404023687b40d1b956d8f28f94e0ca.png

这是主页的html文件，其他的less文件在资源中需要下载

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>极速问诊</title>
  8.   <link rel="stylesheet" href="./iconfont/iconfont.css">
  9.   <link rel="stylesheet" href="./css/index.css">
  10. </head>
  11. <body>
  12.   <!-- 头部 -->
  13.   <header>
  14.     <a href="#" class="back"><span class="iconfont icon-left"></span></a>
  15.     <h3>极速问诊</h3>
  16.     <a href="#" class="note">问诊记录</a>
  17.   </header>
  18.  
  19.   <!-- banner -->
  20.   <div class="banner">
  21.     <img src="./assets/entry.png" alt="">
  22.     <p><span>20s</span> 快速匹配专业医生</p>
  23.   </div>
  24.  
  25.   <!-- 问诊类型 -->
  26.   <div class="type">
  27.     <ul>
  28.       <li>
  29.         <a href="#">
  30.           <div class="pic">
  31.             <img src="./assets/type01.png" alt="">
  32.           </div>
  33.           <div class="txt">
  34.             <h4>三甲图文问诊</h4>
  35.             <p>三甲主治及以上级别医生</p>
  36.           </div>
  37.           <span class="iconfont icon-right"></span>
  38.         </a>
  39.       </li>
  40.       <li>
  41.         <a href="#">
  42.           <div class="pic">
  43.             <img src="./assets/type02.png" alt="">
  44.           </div>
  45.           <div class="txt">
  46.             <h4>普通图文问诊</h4>
  47.             <p>二甲主治及以上级别医生</p>
  48.           </div>
  49.           <span class="iconfont icon-right"></span>
  50.         </a>
  51.       </li>
  52.     </ul>
  53.   </div>
  54.  
  55.   <script src="./js/flexible.js"></script>
  56. </body>
  57. </html>

八、vw与vh适配方案

相对单位

相对视口的尺寸计算结果

vw：viewport width

1vw=1/100视口宽度

vh：viewport height

1vh=1/100视口宽度

注意：开发中，vw和vh不能混用

vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能导致盒子变形

九、响应式媒体查询

媒体特性：

max-width：最大宽度

min-width：最小宽度

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>媒体查询</title>
  8.     <style>
  9.       /* 屏幕宽度小于等于768，网页背景色是粉色 → max-width */
  10.       @media (max-width: 768px) {
  11.         body {
  12.           background-color: pink;
  13.         }
  14.       }
  15.  
  16.  
  17.       /* 屏幕宽度大于等于1200，网页背景色是绿色 → min-width */
  18.       @media (min-width:1200px) {
  19.         body {
  20.           background-color: green;
  21.         }
  22.       }
  23.  
  24.     </style>
  25.   </head>
  26.   <body>
  27.  
  28.   </body>
  29. </html>

媒体查询书写位置

min-width：从小到大

max-width：从大到小

顺序改变会导致后面书写的会层叠前面的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       /* 网页默认背景色是灰色 */
  10.       body {
  11.         background-color: #ccc;
  12.       }
  13.       /* 屏幕宽度 大于等于 768px，网页背景色是粉色 min */
  14.       @media (min-width: 768px) {
  15.         body {
  16.           background-color: pink;
  17.         }
  18.       }
  19.       /* 屏幕宽度 大于等于 992px，网页背景色是绿色 min */
  20.       @media (min-width:992px) {
  21.         body {
  22.           background-color: green;
  23.         }
  24.       }
  25.  
  26.       /* 屏幕宽度 大于等于 1200px，网页背景色是 skyblue  min */
  27.       @media (min-width: 1200px) {
  28.         body {
  29.           background-color: skyblue;
  30.         }
  31.       }
  32.     </style>
  33.   </head>
  34.   <body></body>
  35. </html>

十、Bootatrap响应式布局

下载

中文官网：https://www.bootcss.com/

使用步骤：

1.下载：Bootstrap VS中国文档——进入中文文档——下载——下载bootstrap生产文件

ed38062221f34a50858c745914fd2689.png

2.使用步骤

        <1>引入bootstrap CSS文件

2e985b5e69bc40caa5b35c6a97cc59fc.png

        <2>调用类名：container：响应式布局版心类

 12a4c0b0cae649afb993eb6e2d97e920.png

 十一、Bootstrap-栅格系统

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的分数

例如：一行排4个盒子，则每个盒子占3份即可（12/4=3）

响应段点：

6100c380406c4a9f947013b062c72b5a.png

 设置不同的版心尺寸：

d7393cdf58294080a9d6c7f58909d07f.png

常用布局类：

col-*-*：列（例如：col-xxl-3）

row：行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>栅格系统</title>
  8.   <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11.   <!-- 
  12.     视口宽度大于等于1200px，一行排4个盒子 → 3
  13.     视口宽度大于等于768px，一行排2个盒子
  14.     视口宽度大于等于576px，一行排1个盒子
  15.    -->
  16.    <!-- 版心 → row → 子级 -->
  17.    <div class="container">
  18.     <div class="row">
  19.       <div class="col-xl-3 col-md-6 col-sm-12">1</div>
  20.       <div class="col-xl-3 col-md-6 col-sm-12">2</div>
  21.       <div class="col-xl-3 col-md-6 col-sm-12">3</div>
  22.       <div class="col-xl-3 col-md-6 col-sm-12">4</div>
  23.     </div>
  24.    </div>
  25. </body>
  26. </html>

Bootstrap插件

vs中使用col时会有代码提示

cc39dacb704c49e7866e3beccbb98758.png

Bootstrap全局样式

button类：

btn默认样式

btn-success：成功

btn-warning:警告

.........

按钮尺寸：btn-lg / btn-sm

e374ef4ceb0a42469b0d1005096f0a20.png

表格类：

table：默认样式

table-striped:隔行变色

table-success:表格颜色

.......

a9fce9389c424d968de9e607697b285a.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表格样式</title>
  8.     <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  9.   </head>
  10.   <body>
  11.     <table class="table table-striped table-hover">
  12.       <tr class="table-success">
  13.         <th>姓名</th>
  14.         <th>年龄</th>
  15.         <th>性别</th>
  16.       </tr>
  17.       <tr>
  18.         <td>张三</td>
  19.         <td>18</td>
  20.         <td>男</td>
  21.       </tr>
  22.       <tr>
  23.         <td>李四</td>
  24.         <td>20</td>
  25.         <td>女</td>
  26.       </tr>
  27.       <tr>
  28.         <td>王五</td>
  29.         <td>18</td>
  30.         <td>男</td>
  31.       </tr>
  32.       <tr>
  33.         <td>赵六</td>
  34.         <td>20</td>
  35.         <td>女</td>
  36.       </tr>
  37.     </table>
  38.   </body>
  39. </html>

组件（components）

1.引入样式表

2.引入js文件

3.复制结构，修改内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>组件</title>
  8.   <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  9.   <style>
  10.     .bg-body-tertiary {
  11.       background-color: pink !important;
  12.     }
  13.   </style>
  14. </head>
  15. <body>
  16.   <!-- 导航 -->
  17.   <nav class="navbar navbar-expand-lg bg-body-tertiary">
  18.     <div class="container-fluid">
  19.       <a class="navbar-brand" href="#">Navbar</a>
  20.       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  21.         <span class="navbar-toggler-icon"></span>
  22.       </button>
  23.       <div class="collapse navbar-collapse" id="navbarNav">
  24.         <ul class="navbar-nav">
  25.           <li class="nav-item">
  26.             <a class="nav-link active" aria-current="page" href="#">首页</a>
  27.           </li>
  28.           <li class="nav-item">
  29.             <a class="nav-link" href="#">课程</a>
  30.           </li>
  31.           <li class="nav-item">
  32.             <a class="nav-link" href="#">课程资料</a>
  33.           </li>
  34.           <li class="nav-item">
  35.             <a class="nav-link" href="#">视频</a>
  36.           </li>
  37.         </ul>
  38.       </div>
  39.     </div>
  40.   </nav>
  41.  
  42.   <!-- 轮播图 -->
  43.   <div id="carouselExampleIndicators" class="carousel slide">
  44.     <div class="carousel-indicators">
  45.       <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  46.       <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  47.       <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  48.       <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
  49.     </div>
  50.     <div class="carousel-inner">
  51.       <div class="carousel-item active">
  52.         <img src="./images/banner_1.jpg" class="d-block w-100" alt="...">
  53.       </div>
  54.       <div class="carousel-item">
  55.         <img src="./images/banner_2.jpg" class="d-block w-100" alt="...">
  56.       </div>
  57.       <div class="carousel-item">
  58.         <img src="./images/banner_3.jpg" class="d-block w-100" alt="...">
  59.       </div>
  60.       <div class="carousel-item">
  61.         <img src="./images/banner_4.jpg" class="d-block w-100" alt="...">
  62.       </div>
  63.     </div>
  64.     <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  65.       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  66.       <span class="visually-hidden">Previous</span>
  67.     </button>
  68.     <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  69.       <span class="carousel-control-next-icon" aria-hidden="true"></span>
  70.       <span class="visually-hidden">Next</span>
  71.     </button>
  72.   </div>
  73.  
  74.   <script src="./Bootstrap/js/bootstrap.min.js"></script>
  75. </body>
  76. </html>

字体图标

下载：

导航/extend：图标库-安装-下载安装包-bootstrap-icons-1.x.x.zip

使用：

复制fonts文件夹到项目目录

网页引入bootstrap-icons.css文件

调用css类名（图标对应的类名）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>字体图标</title>
  8.     <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
  9.     <style>
  10.       .bi-android2 {
  11.         font-size: 100px;
  12.         color: green;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <span class="bi-android2"></span>
  18.   </body>
  19. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/702667
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号