大家好,我是树哥。
相信大家都知道我最近在学习前端知识,最近学到了响应式这块的内容。既然学到这块内容,那我必然会遵循「理论 – 实践 – 总结」的学习方法,这篇文章就是我对响应式知识的简单总结。
什么是响应式布局?
响应式布局,就是根据不同设备展示不同的布局,以免更方便用户浏览页面。 举个很简单的例子,我们在电脑上浏览网页,屏幕非常大,这时候可能采用的是如下图所示的布局方式。这种布局方式很宽敞,能够容纳的内容也很多,能够最大程度地传递信息。
如果是在类似于 iPad Pro 的平板电脑上,由于屏幕大小原因,我们会使用不一样的布局。对于美团官网来说,他们就把顶部的导航栏隐藏起来,需要通过点击左上角的菜单按钮才能显示,如下图所示。
如果是在更小的手机屏幕上,那不仅导航栏要隐藏起来,就连下面的文章列表也只能一行显示一篇文章,如下图所示。
总结一下,所谓的响应式布局,就是根据不同的浏览介质,制定不同的布局方案,以便于用户更好地浏览信息。
快速入门
了解完响应式布局原理,我们从代码层面来看看如何实现这样的响应式布局。
在 CSS3 中,定义了 @media
这个属性来实现响应式效果。例如我们希望在屏幕尺寸低于 768px 的时候显示黑色,大于 768px 的时候显示红色,那么我们可以这么写。
响应式布局例子
body {
background-color: black;
}
@media (min-width:768px) {
body {
background-color: red;
}
}
上面代码的运行效果如下图所示。我们手动改变窗口的大小,当窗口的大小大于 768px 的时候,窗口的背景颜色变成了红色。当窗口大小小于 768px 的时候,窗口背景颜色变回了黑色。
在上面的代码中,最核心的代码是如下这段代码,如下代码所示。
@media (min-width:768px) {
body {
background-color:服务器托管网 red;
}
}
上面这段 CSS 表示:当宽度最小为 768px 的服务器托管网时候,窗口的背景颜色设置为红色。
这个例子只是为了简洁地向大家解释响应式布局的使用,在实际的项目使用中,响应式布局的使用会更加复杂一些。但无论如何复杂,它都是由最基本的单元组成。你理解了这个例子,你就能理解实战项目中的响应式布局。
实战案例
上面举了一个小案例,向大家简单说明了如何使用 @media
实现响应式布局。这里我再举一个实战项目的例子,让大家更深刻地理解响应式布局。
我们还是举美团官网这个例子:美团官网在浏览器宽度小于 1280px 的时候,会将导航栏隐藏起来。在导航栏宽度大于 1280px 的时候,会讲导航栏显示出来,如下图所示。
为了较好地解释实现原理,我们用如下的 html 代码代表美团导航栏的实现。
那么美团官网是如何去实现这样的响应式效果的呢?
其实实现这样的效果很简单,只需要实现这样的逻辑即可:默认情况下,显示 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 代表媒体类型,例如:电脑屏幕、平板电脑、打印机等。对于 mediatype 部分来说,其前面可以加上 not 或者 only 修饰符来分别表示「否」或者「只有」的意思。mediatype 常用取值有如下几个:
- all 用于所有设备
- print 用于打印机和打印预览
- screen 用于电脑屏幕,平板电脑,智能手机等。
- speech 应用于屏幕阅读器等发声设备
- 等等
更多的媒体类型取值可参考:@media – CSS: Cascading Style Sheets | MDN。
举个很简单的例子,我们只想针对打印机或打印机预览使用某些 CSS 样式,那么我们可以这么写:
@media print {
/* … */
}
如果我们只想对除了打印机或打印机预览之外的其他所有设备适用,那么我们可以这么写:
@media not print {
/* … */
}
mediatype 部分可以不填,不填的时候默认取 all 值,表示对于所有设备都适用。
mediafeature
mediafeature 代表媒体特性,例如:颜色、宽度、高度等。对于 mediafeature 部分来说,其可以使用 and、or、not 来组成一组判断语句,从而实现更加复杂的功能。mediafeature 常用取值有如下几个:
- height 定义输出设备中的页面可见区域高度
- height 定义输出设备中的页面可见区域高度
- min-resolution 定义设备的最小分辨率
- max-resolution 定义设备的最大分辨率
- grid 用来查询输出设备是否使用栅格或点阵
- 等等
更多的媒体特性取值可参考:@media – CSS: Cascading Style Sheets | MDN
举个很简单的例子,我们想针对所有屏幕宽度小于768px的设备应用某些样式,那么我们可以这么写:
@media (max-width:768px) {
/* … */
}
如果我们想针对所有屏幕宽度小于 768px 并且屏幕高度小于 500px 的设备应用某些样式,那么我们可以这么写:
@media (max-width:768px and max-height: 500px) {
/* … */
}
总结
看到这里,相信大家都已经能理解响应式布局的含义了。
其实响应式布局并不难,其语法也很简单,更重要的是理解响应式布局背后的重要意义 —— 信息传递。在不同的信息传递媒介,为了阅读者地体验,我们应该设计不同的布局方式,需要思考应该传递哪些信息。我们只有拥有了这样的意识,我们才能做出让用户拍手叫好的产品,做出让用户用着感觉酣畅淋漓的作品!
按我自己的理解,目前响应式布局更多还是在各类官网的使用上,因为这些场景更看懂信息的传递,需要在不同的信息传递媒介都能有很好的体验效果。除此之外,其他的类似于管理后台、工具类站点,使用到响应式布局的需求还是非常少的。
这次关于响应式布局的分享就到此结束,如果你喜欢这篇文章,那就点赞支持转发支持我吧!
参考资料
- CSS3 @media查询 | 菜鸟教程
- @media – CSS: Cascading Style Sheets | MDN
- CSS前瞻:@media (scripting)助你优雅降级 – 掘金
- 【CSS】关于媒体查询media那些事儿 – 掘金
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
某日二师兄参加XXX科技公司的C++工程师开发岗位第31面: 面试官:什么是锁?有什么作用? 二师兄:在C++中,锁(Lock)是一种同步工具,用于保护共享资源,防止多个线程同时访问,从而避免数据竞争和不一致。 面试官:有哪些锁? 二师兄:从种类上分,可以分为…