响应式布局_中文版响应式css库-CSDN博客

本文链接：https://blog.csdn.net/EM_77/article/details/119294773

响应式布局

响应式就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的，无论你的屏幕多大。

响应式布局通常分为三种：

一是利用弹性盒子Flex、网格布局Grid或左浮动法Float等 CSS 属性来实现的在一列上根据屏幕大小的不同而进行自动换行。
二是利用媒体查询来根据当前屏幕大小来运行相应的 CSS 代码。
三是利用 JavaScript 来获取窗口宽高来动态操作 DOM 元素。

响应式布局就是要达到这样的效果：无论屏幕宽窄，左右两侧始终没有缝隙，然后可以根据屏幕的大小来自动进行换行。

在这里插入图片描述
.

1. 中文布局css库

实例演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0 }   
    html, body { height: 100% }  /* 令html和body全屏显示 */
    /* 父元素 */
    ul {     
      list-style: none;       /* 清除默认样式 */
      display: grid;   /* 先在父元素上设置grid布局 */
      grid: var(--响应式);     
      gap: 5px   /* 给个合适的间距 */
    }
    /* 子元素 */
    li {      
      background: var(--极光绿);   /* 绿色渐变 */    
      height: 100px   /* 给个高度 */
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

2. 网格布局

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0 }
    /* 父元素 */
    ul {      
      list-style: none; /* 清除默认样式 */     
      display: grid;  /* 显示为grid */
      /* 自动添加行数 列数自动填充 每列不低于100px */
      grid: auto-flow auto / repeat(auto-fit, minmax(100px, 1fr));     
      gap: 5px   /* 5px的间距 */
    }
    /* 子元素 */
    li {      
      height: 100px;  /* 100px的高度 */    
      background: var(--极光绿)    /* 绿色渐变 */
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

通过调整 height：100px 的高度或者 <li></li> 的个数，在 vscode 运行可以看到元素会根据屏幕的大小进行自适应大小。（谷歌浏览器）

在这里插入图片描述

.

3. 弹性布局

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0 }
    li { list-style: none }
    /* 父元素 */
    ul {     
      display: flex;       /* 显示为flex布局 */
      flex-flow: wrap;  /* 允许换行 */
    }
    /* 子元素 */
    li {
      margin: 2px;        /* 2px的外边距 */
      background: var(--墨色);     /* 墨色渐变 */  
      height: 100px;           /* 100px的高度 */ 
      flex: 1;    /* 令其可伸展 */
      flex-basis: 100px    /* 100px的宽 */
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

效果如下：
在这里插入图片描述
注意：

flex: 1; 一定要写在 flex-basis 之前，不然的话就会变成这样：

在这里插入图片描述
在 Flex 布局中，一个 flex 子项的宽度是由元素自身尺寸，flex-basis 设置的基础尺寸，以及外部填充或收缩规则三者共同决定。
.

4. 左浮动法

如果项目要求必须兼容低版本浏览器的话，flex和grid可能都不能用了，只能用CSS2的语法来实现了。这种情况下float是一个非常好的选择。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0 }
    ul { list-style: none }
    /* 子元素 */
    li {    
      width: 100px;   /* 100px的宽高 */
      height: 100px;      
      background: var(--紫红);  /* 紫红渐变 */     
      float: left;   /* 左浮动 */      
      margin: 2px  /* 2px的外边距 */
    }
    /* 清除浮动 */
    ul::after {
      content: '';
      display: block;
      clear: both
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

效果如下：
在这里插入图片描述
浮动默认的是左上角或右上角，但是常常下一个元素会受到这个浮动元素的影响，为解决这个问题，我们经常会需要清除浮动。
.

5. 媒体查询

其实响应式并不仅仅是屏幕窄了就换行，屏幕宽了就填充这么简单。有很多时候是需要根据设备的不同来显示不同的布局结构，比如在手机屏幕上用单列布局刚刚好，但是这个网址被台式机访问的话单列就会显得过于宽，这时就要根据不同的设备来运行不同的代码，而媒体查询就可以很好地解决之一问题。

媒体：就是当前使用的各种设备(移动设备、固定设备等)
查询：通过查询当前属于何种设备以运行不同的代码

主要媒体（设备）类型：

all _ 所有设备
print _ 用于打印机和打印预览
screen _ 用于电脑屏幕、平板电脑、智能手机等
speech _ 应用于屏幕阅读器等发声设备

我们常用的手机、平板、笔记本和台式机等几个被归为了一类设备：屏幕设备(screen)，那么如何区分移动端还是PC端？

虽然上述几个设备都被归为屏幕设备(screen)，但即使是同一种设备也会拥有自己的一套属性，比如宽、高，我们可以利用这些属性来判断用户到底是哪一种屏幕设备：

媒体属性	含义
max-width	浏览器的最大宽度
min-width	浏览器的最小宽度
max-height	浏览器的最大高度
min-height	浏览器的最小高度

实际上后面两个最大、最小高度很少会用到，主要靠宽度来检测用户使用的是哪种屏幕设备，因此主要记住前面两个即可。即

max-width: 最大宽度就相当于 ≤ （宽度小于等于）
min-width:最小宽度就相当于 ≥（宽度大于等于）

Ps：设备实际分辨率与程序中的像素有所差别，一般程序中用到的像素为逻辑像素（px），点击此处了解相关介绍。
.

5.1 逻辑操作符

逻辑操作符可用于联合构造复杂的媒体查询，还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

逻辑操作符分为以下四种：

逻辑操作符	含义
and	用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。
not	用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用not运算符，则还必须指定媒体类型
only	仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用only运算符，则还必须指定媒体类型。
, (逗号)	逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个media语句均返回true。换句话说，列表的行为类似于逻辑或or运算符。

下面来看看语法：

@media screen {
	div {
		color: black;
	}
}

上面写了一种最简单的媒体查询规则，其中 @media 是固定写法，表示创建一个媒体查询，后面跟着的是一个媒体类型，然后大括号里面就写CSS语句。上面的那几行代码代表的含义是：

当用户使用屏幕设备浏览网页时，页面上的div元素内的字体颜色变为黑色

⚠️不过需要注意的是，@media 里面同样需要遵守CSS权重规则，比如后面的覆盖前面的，标签选择器覆盖不了类选择权的样式，所以尽量把@media 写在整个CSS文件的末尾。

div {
	color: green;
}
@media screen and (max-width: 450px) {
	div {
		color: blue;
	}
}

字体颜色在手机上是蓝色，但是在电脑上是绿色。

假设宽度低于450px的设备就是手机设备，@media screen已经声明了屏幕设备，但是如果再加入一条媒体属性(max-width: 450px)的话就需要用 and 这个逻辑操作符来进行连接，@media screen and (max-width: 450px) 就可以理解为：当媒体是屏幕设备并且最大宽度为450px时执行后面的代码。
代码中将默认样式定义在了最前面，然后把@media定义在了后面，为的就是在规则满足咱们写的条件时，后面的样式能够覆盖掉前面的。

即将刚才的需求反过来，变成字体颜色在手机上是绿色，但是在电脑上是蓝色。

div {
	color: green;
}
@media not screen and (max-width: 450px) {
	div {
		color: blue;
	}
}

not 表示否定，这里的 not 是否定整条语句，相当于：@media not (screen and (max-width: 450px))，翻译成中文：不是(最大宽度为450的屏幕设备)，那么超过450px的宽度就已经符合这个条件了。

only

only从字面意思去理解是仅仅的意思，那么如果加入它以后，翻译成中文是：仅仅只在屏幕设备中生效。

@media only screen {
	/* 省略若干代码 */
}

上面的 @media screen 也是只在屏幕设备上生效的意思，为何还要加个 only ？实际上这是为了兼容低级浏览器而生的，它是为了在不支持媒体查询的浏览器中隐藏样式表，浏览器处理以only开头的关键词时将会忽略only，在一些非常老旧的浏览器，如果你加了only，它就会直接忽略掉这条语句。

为什么要让老版本浏览器忽略掉你写的 @media 呢？

可以简单的理解为：老版本浏览器有点近视眼，只看得到 @media 和紧跟在它后面的一个单词。
在它的眼中，你写的 @media only screen and (max-width: 450px) 它只看得到 @media only。
如果你还记得媒体设备的那张表格的话，你应该知道压根儿就没有only这种设备，所以它就会认为你写错了，从而忽略掉这段语句。

但是如果你不加only的话，那么你写的 @media screen and (max-width: 450px) 在它眼里就会看成 @media screen，因为没有看到后面的限制条件，所以你写在 @media 里面的CSS代码会在 screen 这种设备生效，就相当于在所有屏幕设备(手机、平板、笔记本)这段代码都会生效。

逗号

逗号其实就相当于或者的意思。

div {
	color: green;
}
@media screen and (max-width: 450px), (min-width: 1200px) {
	div {
		color: blue;
	}
}

上面代码的意思是：字体在平板设备(假设平板设备宽度在450和1200之间)上是绿色，其他设备是蓝色。
这就相当于：x ≤ 450 或 x ≥ 1200，x 就是其他设备。

其实如果把 x 当成平板设备的话会更合理：
x ≥ 450 并 x ≤ 1200 (450 ≤ x ≤ 1200)

div {
	color: blue;
}
@media screen and (min-width: 450px) and (max-width: 1200px) {
	div {
		color: green;
	}
}

可以根据自己的业务逻辑来灵活的选择用并(and)还是或(,)。

简写

@media (min-width: 450px) {
	/* 此处省略若干代码 */
}

如果你不写设备，默认就是 all。上面的代码就相当于：

@media all and (min-width: 450px) {
	/* 此处省略若干代码 */
}

Ps：只有能够灵活运用各种各样不同的 CSS 技术才能实现层出不穷的样式需求，只掌握一种方法还是远远不够的。如果实在学不动这么多种实现方式，可以把每个章节中的弹性盒子法(Flex)重点练会即可，弹性盒子在移动端布局相当流行，并且功能也十分强大。