文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 03:40

关注

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

什么是响应式布局?

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

美团官网PC屏幕

如果是在类似于 iPad Pro 的平板电脑上,由于屏幕大小原因,我们会使用不一样的布局。对于美团官网来说,他们就把顶部的导航栏隐藏起来,需要通过点击左上角的菜单按钮才能显示,如下图所示。

美团官网iPad屏幕

如果是在更小的手机屏幕上,那不仅导航栏要隐藏起来,就连下面的文章列表也只能一行显示一篇文章,如下图所示。

美团官网iPhone屏幕

总结一下,所谓的响应式布局,就是根据不同的浏览介质,制定不同的布局方案,以便于用户更好地浏览信息。

快速入门

了解完响应式布局原理,我们从代码层面来看看如何实现这样的响应式布局。

在 CSS3 中,定义了 @media 这个属性来实现响应式效果。例如我们希望在屏幕尺寸低于 768px 的时候显示黑色,大于 768px 的时候显示红色,那么我们可以这么写。




 
 
 响应式布局例子
 




上面代码的运行效果如下图所示。我们手动改变窗口的大小,当窗口的大小大于 768px 的时候,窗口的背景颜色变成了红色。当窗口大小小于 768px 的时候,窗口背景颜色变回了黑色。

响应式布局小案例

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

@media (min-width:768px) {
 body {
  background-color: red;
 }
}

上面这段 CSS 表示:当宽度最小为 768px 的时候,窗口的背景颜色设置为红色。

这个例子只是为了简洁地向大家解释响应式布局的使用,在实际的项目使用中,响应式布局的使用会更加复杂一些。但无论如何复杂,它都是由最基本的单元组成。你理解了这个例子,你就能理解实战项目中的响应式布局。

实战案例

上面举了一个小案例,向大家简单说明了如何使用 @media 实现响应式布局。这里我再举一个实战项目的例子,让大家更深刻地理解响应式布局。

我们还是举美团官网这个例子:美团官网在浏览器宽度小于 1280px 的时候,会将导航栏隐藏起来。在导航栏宽度大于 1280px 的时候,会将导航栏显示出来,如下图所示。

美团官网导航栏-PC与iPad对比

为了较好地解释实现原理,我们用如下的 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 常用取值有如下几个:

更多的媒体类型取值可参考:@media - CSS: Cascading Style Sheets | MDN。

举个很简单的例子,我们只想针对打印机或打印机预览使用某些 CSS 样式,那么我们可以这么写:

@media print {
  
}

如果我们只想对除了打印机或打印机预览之外的其他所有设备适用,那么我们可以这么写:

@media not print {
  
}

mediatype 部分可以不填,不填的时候默认取 all 值,表示对于所有设备都适用。

mediafeature

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) {
  
}

总结

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

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

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

来源:树哥聊编程内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯