关于响应式布局,你需要了解的知识点

大家好,我是树哥。

相信大家都知道我最近在学习前端知识,最近学到了响应式这块的内容。既然学到这块内容,那我必然会遵循「理论 - 实践 - 总结」的学习方法,这篇文章就是我对响应式知识的简单总结。

什么是响应式布局?

响应式布局,就是根据不同设备展示不同的布局,以免更方便用户浏览页面。 举个很简单的例子,我们在电脑上浏览网页,屏幕非常大,这时候可能采用的是如下图所示的布局方式。这种布局方式很宽敞,能够容纳的内容也很多,能够最大程度地传递信息。

美团官网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 的时候,窗口背景颜色变回了黑色。

20231214195709

在上面的代码中,最核心的代码是如下这段代码,如下代码所示。

@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;
    }
}

随后,我们再继续在 pcipad 对应的 div 块中实现相应的 html 结构和 CSS 样式即可。在这个过程中,可能不仅涉及到隐藏,还会涉及到其他的布局变动,例如:在小屏幕时是 display: block,而在大屏幕的时候则是 display: flex。在小屏幕的时候可能是 flex-direction: column,而在大屏幕的时候则是 flex-direction: row等等。

对于设计师来说,响应式布局就是针对不同的屏幕媒介,设计不同的布局方式,让用户更简单方便地阅读信息。对于开发者来说,响应式布局就是使用 @mediadisplay:nonedisplay: 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) {
  /* … */
}

总结

看到这里,相信大家都已经能理解响应式布局的含义了。

其实响应式布局并不难,其语法也很简单,更重要的是理解响应式布局背后的重要意义 —— 信息传递。在不同的信息传递媒介,为了阅读者地体验,我们应该设计不同的布局方式,需要思考应该传递哪些信息。我们只有拥有了这样的意识,我们才能做出让用户拍手叫好的产品,做出让用户用着感觉酣畅淋漓的作品!

按我自己的理解,目前响应式布局更多还是在各类官网的使用上,因为这些场景更看懂信息的传递,需要在不同的信息传递媒介都能有很好的体验效果。除此之外,其他的类似于管理后台、工具类站点,使用到响应式布局的需求还是非常少的。

这次关于响应式布局的分享就到此结束,如果你喜欢这篇文章,那就点赞支持转发支持我吧!

参考资料

posted @ 2023-12-14 21:06  陈树义  阅读(432)  评论(4编辑  收藏  举报