当前位置: 海之晶网站设计> 建站知识> 建站教程>2018年利用媒体查询进行响应式设计

2018年利用媒体查询进行响应式设计

文章出处:网站建设-海之晶网络 | 网站编辑:网站设计 | 发表时间:2020/10/11 21:43:39
分享:

早在2010年7月,我曾为Smashing杂志写过一篇文章,题为“如何使用CSS3媒体查询创建移动版网站”。近8年过去了,这篇文章仍然收到了大量的流量。我认为重新讨论这个主题是个好主意,现在我们有了诸如Flexbox和Grid布局的布局方法。本文将介绍媒体查询在响应式设计中的应用,并展望未来的发展趋势。

2018年使用媒体查询的第一条规则是问问自己是否需要使用媒体查询。当使用浮动构建布局时,我们通过使用百分比计算列的大小来创建一个灵活的网格。我们使用Ethan Marcotte在其关于流体网格的文章中概述的方法计算出这些百分比,这是我们现在所知的“响应式设计”技术的基础;如果我们想更改这些列的大小或比例,则必须使用媒体查询添加断点并重新定义它们。当以百分比工作时,我们没有其他选项,因为无论容器是宽的还是窄的,它们在容器中的百分比始终相同。

Flexbox和网格布局以及多列布局在默认情况下都是响应的。这些规范是在响应式设计和支持多种设备已经成为一件事的世界里编写的。这意味着它们包含了很多常识性的功能,这使得我们无需做太多的事情就可以进行响应式设计。

在这个代码栏中,我举了一些灵活的多芯、Flexbox和网格组件的示例,这些组件都可以根据可用空间调整和更改布局。这里没有使用媒体查询,CSS也很少

关键字:
南京市汉中路1号国际金融中心9楼
建站热线:13815417591
免责声明: 本站部分内容来源于互联网,如果本站部分内容侵犯您的权益,请您告知,站长会立即处理。