3分钟理解响应式布局

矫情吗；* 2021-07-31 17:01 390阅读 0赞

![640?][640]

**Web项目聚集地**

图文教程，技术交流

[![640?][640 1]][640_640 1]

前言

总听别人说响应式布局，觉得是一个很高大上的东西，近日做的一个项目需要适配不同的屏幕尺寸，于是就简单研究了一下 `Web响应式布局`，其实原理很简单，下面就简单整理了一下分享给大家。

## 什么是响应式布局 ##

![640?wx\_fmt=gif][640_wx_fmt_gif]\[图片来源 `caktusgroup`\]

如图就是响应式布局的体现，简单的说响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念随着移动设备的兴起而深入人心。 比如 `头条`他做的就不是响应式布局，他通过实时检测设备信息，在 `www.toutiao.com`和 `m.toutiao.com`两个网站之间切换。而最近比较火的开发者社区 `segmentfault.com`就是响应式布局，页面的布局会会随着你拖动浏览器窗口大小变化而变化。响应式布局没有绝对的话好与坏，需要根据网站的性质来确定，比如 `toutiao`的页面元素非常多，页面需要包括所有屏幕尺寸的样式显示不是很好操作，然而 `segmentfault`页面元素较少，反而放在一起方便维护。

## 如何快速实现web响应式布局 ##

我们通过一个例子来具体说明，首先使用 `@media`关键字为不同的屏幕尺寸设置不同样式，关于 `@media`我们下文有更详细的介绍

代码片段：

我们简单解释一下上述代码片段 `min-width`指的是当屏幕尺寸大于当前值的时候样式生效。 外层的 `div`包裹内层的两个 `div`。 `col-md-6col-sm-12`当屏幕尺寸大于 `768px`的时候子 `div`宽度是父 `div`的一半，所以是并排。当屏幕尺寸大于 `480px`的时候子 `div`宽度和父 `div`的宽度一样。下图为不同尺寸下的效果图。

768px

![640?wx\_fmt=png][640_wx_fmt_png]

480px

![640?wx\_fmt=png][640_wx_fmt_png 1]

注意观察的同学又发现问题了，图二没有办法看啊，太小了吧。是的，我们的响应式还没有做完，这个时候我们在 `head`里面添加如下一行代码再试试？那么问题来了，图一尺寸大于 `768px`不假，但是也大于 `480px`啊，那么怎么就按照 `768px`的尺寸排布了呢？这里就涉及到了 `CSS优先级`： `CSS` 的基本优先级如下 `（外部样式）Externalstyle sheet<（内部样式）Internalstyle sheet<（内联样式）Inlinestyle`如果优先级一样便有一个覆盖原则，后面的覆盖前面的，于是如例，当屏幕尺寸慢慢变大到 `768px`的时候，后者遍生效了。

如图神奇的一幕出现了：

![640?wx\_fmt=png][640_wx_fmt_png 2]

width=device-width: 表示此宽度不依赖于原始象素(px)，而依赖于屏幕的宽度.这样我们就大功告成了.如需要下载源码请点击，在线查看请点击。想知道为什么 `meta`有这么大作用请翻看下文。

## Meta ViewPort 是什么 ##

手机浏览器是把页面放在一个虚拟的“窗口”( `viewport`)中，通常这个虚拟的“窗口”( `viewport`)比屏幕宽，默认是把网页挤到一个很小窗口以便全部预览，这样也不会破坏没有适配手机布局的网页。移动版的 Safari 浏览器最新引进了 `viewport` 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也逐步支持。我们如果做了手机屏幕尺寸的适配就可以手动调整 `viewport`，这样就可以把网页内容和手机布局合理的展示给用户。下面是具体参数的说明：

<table> 
 <thead> 
  <tr> 
   <th><br></th> 
   <th><br></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>设置layout viewport 的宽度，为一个正整数，或字符串”width-device”</td> 
  </tr> 
  <tr> 
   <td>initial-scale</td> 
   <td>设置页面的初始缩放值，为一个数字，可以带小数</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td>允许用户的最小缩放值，为一个数字，可以带小数</td> 
  </tr> 
  <tr> 
   <td>maximum-scale</td> 
   <td>允许用户的最大缩放值，为一个数字，可以带小数</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>设置layout viewport 的高度，这个属性对我们并不重要，很少使用”</td> 
  </tr> 
  <tr> 
   <td>user-scalable</td> 
   <td>是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许</td> 
  </tr> 
 </tbody> 
</table>

## Media Queries 详解 ##

中文叫做媒体查询，它包含一个媒体类型(media type)和至少一个表达式，用媒体特性限制样式表的作用范围。下面我们直接通过例子对相对的关键字进行分析：

#### only ####

用于向早期浏览器隐藏媒体查询，比如IE如果不支持的话直接忽略当前定义的样式。和其他表达式一起用需要 `and`

`@mediaonly screenand(min-width:400px)`

#### screen ####

screen是一种 `媒体类型`，例中的 `screen`意思是仅支持彩色电脑显示器。其他属性如下： all：适用与所有设备 print：paged material and documents viewed on screen in print previe mode. screen: 彩色电脑显示器 speech：intended for speech synthesizers

#### and ####

`and`是一种 `操作符`，表示被链接的表达式不许同时满足，其他表达式如下： `and`：所有条件必须满足 `,`：只要满足一种条件即可 `not`：条件的取反

#### min-width ####

`min-width`是 `媒体特征`，他的意思是最小宽度满足的时候就为真，其他媒体特征：

*  width: viewport width
 *  height: viewport height
 *  aspect-ratio: viewport的宽高比如：16/9
 *  orientation: 宽度和高度的大小关系
 *  resolution: pixel density of the output device
 *  scan: scanning process of the output device
 *  grid: is the device a grid or bitmap
 *  color: number of bits per color component of the output device, or zero if the device isn’t color
 *  color-index: number of entries in the output device’s color lookup table, or zero if the device does not use such a table

## 总结 ##

笔者只是随学随卖，抛砖引玉，如有想更深入理解 `响应式布局`请观看如下参考链接。

**推荐阅读**

***1. ***

***2. ***

***3. ***

欢迎您的转发和点赞

![640?][640 2]

▲长按关注我们

[640]: /images/20210731/18399f98ba2c4d79a2851be238ad108b.png?
[640 1]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_gif/HRoDDYeYibjAFkDQUqliaaib6OmibTT3dS02k2flNxLUQkJ4IUTguIiadpqatcibkibdCyIVwiafS0Eib65EP0X4yVCZib8w/640?
[640_640 1]: /images/20210731/0ea070686c4a4e598ba5dc4dddc522e5.png
[640_wx_fmt_gif]: https://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz_png/R3InYSAIZkG7Q3IsicrD46APnxTOnTxlcQw5tnlzhV0HjTcBEnibnX6ySDOmFcrupCibAVI2JLehsAdficl8ltbHuQ/640?wx_fmt=gif
[640_wx_fmt_png]: /images/20210731/59ac53712ccf40d683e7364dfad211c4.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/2f7282b5e2574ce0ad2aef77ddca854c.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210731/4ad83ed29a91459a898733433c7ec28d.png?wx_fmt=png
[640 2]: /images/20210731/d5699d2dfbc8493aba55e43c9c3167fe.png?