大家好，我是树哥。
相信大家都知道我最近在学习前端知识，最近学到了响应式这块的内容。既然学到这块内容，那我必然会遵循「理论 - 实践 - 总结」的学习方法，这篇文章就是我对响应式知识的简单总结。
响应式布局，就是根据不同设备展示不同的布局，以免更方便用户浏览页面。 举个很简单的例子，我们在电脑上浏览网页，屏幕非常大，这时候可能采用的是如下图所示的布局方式。这种布局方式很宽敞，能够容纳的内容也很多，能够最大程度地传递信息。
美团官网PC屏幕
如果是在类似于 iPad Pro 的平板电脑上，由于屏幕大小原因，我们会使用不一样的布局。对于美团官网来说，他们就把顶部的导航栏隐藏起来，需要通过点击左上角的菜单按钮才能显示，如下图所示。
美团官网iPad屏幕
如果是在更小的手机屏幕上，那不仅导航栏要隐藏起来，就连下面的文章列表也只能一行显示一篇文章，如下图所示。
美团官网iPhone屏幕
总结一下，所谓的响应式布局，就是根据不同的浏览介质，制定不同的布局方案，以便于用户更好地浏览信息。
了解完响应式布局原理，我们从代码层面来看看如何实现这样的响应式布局。
在 CSS3 中，定义了 @media 这个属性来实现响应式效果。例如我们希望在屏幕尺寸低于 768px 的时候显示黑色，大于 768px 的时候显示红色，那么我们可以这么写。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式布局例子</title> <style type="text/css"> body { background-color: black; } @media (min-width:768px) { body { background-color: red; } } </style></head><body></body></html>上面代码的运行效果如下图所示。我们手动改变窗口的大小，当窗口的大小大于 768px 的时候，窗口的背景颜色变成了红色。当窗口大小小于 768px 的时候，窗口背景颜色变回了黑色。
响应式布局小案例
在上面的代码中，最核心的代码是如下这段代码，如下代码所示。
@media (min-width:768px) { body { background-color: red; }}上面这段 CSS 表示：当宽度最小为 768px 的时候，窗口的背景颜色设置为红色。
这个例子只是为了简洁地向大家解释响应式布局的使用，在实际的项目使用中，响应式布局的使用会更加复杂一些。但无论如何复杂，它都是由最基本的单元组成。你理解了这个例子，你就能理解实战项目中的响应式布局。
上面举了一个小案例，向大家简单说明了如何使用 @media 实现响应式布局。这里我再举一个实战项目的例子，让大家更深刻地理解响应式布局。
我们还是举美团官网这个例子：美团官网在浏览器宽度小于 1280px 的时候，会将导航栏隐藏起来。在导航栏宽度大于 1280px 的时候，会将导航栏显示出来，如下图所示。
美团官网导航栏-PC与iPad对比
为了较好地解释实现原理，我们用如下的 html 代码代表美团导航栏的实现。
<div> <div class="pc"></div> <div class="ipad"></div></div>那么美团官网是如何去实现这样的响应式效果的呢？
其实实现这样的效果很简单，只需要实现这样的逻辑即可：默认情况下，显示 ipad 类对应的 div 块，隐藏 pc 类对应的 div 块。当浏览器的宽度大于 1280px，那就隐藏 ipad 类对应的 div 块，显示 pc 类对应的 div 块。实现的 CSS 代码如下所示。
.pc { display: none;}.ipad { display: block;}@media (min-width:1280px) { .pc { display: block; } .ipad { display: none; }}随后，我们再继续在 pc 和 ipad 对应的 div 块中实现相应的 html 结构和 CSS 样式即可。在这个过程中，可能不仅涉及到隐藏，还会涉及到其他的布局变动，例如：在小屏幕时是 display: block，而在大屏幕的时候则是 display: flex。在小屏幕的时候可能是 flex-direction: column，而在大屏幕的时候则是 flex-direction: row等等。
对于设计师来说，响应式布局就是针对不同的屏幕媒介，设计不同的布局方式，让用户更简单方便地阅读信息。对于开发者来说，响应式布局就是使用 @media、display:none、display: flex 等各种工具，来实现设计师想要的各种布局方式。
弄清楚了响应式布局的道，我们还需要弄清楚响应式布局的术 —— 也就是语法！
对于响应式布局来说，它就只有一个语法 —— @media，它的语法格式如下所示。
@media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Code;}上述语法可以分为两部分，分别是 mediatype 部分和 mediafeature 部分。
mediatype 代表媒体类型，例如：电脑屏幕、平板电脑、打印机等。对于 mediatype 部分来说，其前面可以加上 not 或者 only 修饰符来分别表示「否」或者「只有」的意思。mediatype 常用取值有如下几个：
更多的媒体类型取值可参考：@media - CSS: Cascading Style Sheets | MDN。
举个很简单的例子，我们只想针对打印机或打印机预览使用某些 CSS 样式，那么我们可以这么写：
@media print { /* … */}如果我们只想对除了打印机或打印机预览之外的其他所有设备适用，那么我们可以这么写：
@media not print { /* … */}mediatype 部分可以不填，不填的时候默认取 all 值，表示对于所有设备都适用。
mediafeature 代表媒体特性，例如：颜色、宽度、高度等。对于 mediafeature 部分来说，其可以使用 and、or、not 来组成一组判断语句，从而实现更加复杂的功能。mediafeature 常用取值有如下几个：
更多的媒体特性取值可参考：@media - CSS: Cascading Style Sheets | MDN
举个很简单的例子，我们想针对所有屏幕宽度小于768px的设备应用某些样式，那么我们可以这么写：
@media (max-width:768px) { /* … */}如果我们想针对所有屏幕宽度小于 768px 并且屏幕高度小于 500px 的设备应用某些样式，那么我们可以这么写：
@media (max-width:768px and max-height: 500px) { /* … */}看到这里，相信大家都已经能理解响应式布局的含义了。
其实响应式布局并不难，其语法也很简单，更重要的是理解响应式布局背后的重要意义 —— 信息传递。在不同的信息传递媒介，为了阅读者的体验，我们应该设计不同的布局方式，需要思考应该传递哪些信息。我们只有拥有了这样的意识，我们才能做出让用户拍手叫好的产品，做出让用户用着感觉酣畅淋漓的作品！
目前响应式布局更多还是在各类官网的使用上，因为这些场景更看懂信息的传递，需要在不同的信息传递媒介都能有很好的体验效果。除此之外，其他的类似于管理后台、工具类站点，使用到响应式布局的需求还是非常少的。
本文链接：http://www.28at.com/showinfo-26-46354-0.html关于响应式布局，你需要了解的知识点
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
下一篇： 听说你会架构设计？来，弄一个红包系统
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
