栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

响应站点上媒体查询的常见断点

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

响应站点上媒体查询的常见断点

在确定媒体查询的断点时,请考虑以下现实:

  • 数千种不同的设备上有数百种不同的屏幕尺寸。
  • 未来将带来新的屏幕尺寸。
  • 苹果,三星,微软,LG,诺基亚和任何其他设备制造商都可以随时更改其流行型号的屏幕尺寸。

视口的可能性如此之多,将断点与特定设备相匹配听起来并不有效。紧跟流行,新变化以及已更改的内容将是一项永无止境的任务。

更好的方法可能是根据内容和布局设置断点。

通过这种方法,您的站点将使用其自然断点来适应 所有 视口大小,而不是针对当前常见屏幕大小的人为断点。

这种方法是如此简单和容易,可能难以置信:

  1. 在台式机或笔记本电脑上运行您的网站。
  2. 缩小浏览器窗口时,请注意网站的响应方式。
  3. 当您的布局不再完美时,这就是您的第一个断点。
  4. 调整您的网站适合该屏幕尺寸(这可能与任何设备无关)。
  5. 继续缩小浏览器窗口。
  6. 当您遇到下一个布局问题时,这就是您的第二个断点。
  7. … 等等等等。

当然,如果您设计的是移动设备优先的产品,那么过程将相反:从窄屏开始,然后逐步解决。

有了自然的断点,您不再需要关注视口大小的庞大范围,因为您的站点现在和将来都可以适应任何设备。


根据一位开发人员的说法,这种方法将断点带到了他们的初衷:

我不确定我们如何提出“特定于设备的断点”一词…据我所知,术语“断点”始终是对内容或布局将“断”的地方的引用(即看起来有缺陷),因此您需要在此时进行媒体查询。但是我想那只是语义,我一直认为在内容或布局的上下文中引用断点是常识。

〜Louis Lazaris, ImpressiveWebs



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/380715.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号