响应式布局CSS3 Media Queries中屏幕分辨率顺序写法比较

本站所有文章均为博主人工写作,绝无AI辅助成分,请放心参阅。

CSS3的Media Queries(媒体查询)在现在的网站开发中已经被应用得越来越频繁,现在但凡开发新的网站,只要不是布局超复杂的项目,不免都要“顺手”做一些响应式布局,尽量以低成本兼容更多的浏览器/设备。现代的移动设备尺寸多样,对于CSS的兼容问题也层出不穷,本文主要探讨Media Queries的分辨顺序问题。从粗略的概念视角开始,不涉及具体的技术细节。

常见的Media Queries顺序有两种,第一种是从大到小:

1
2
3
4
5
/*全局样式*/
...
@media screen and (max-width: 960px) { ... } /*兼容平板*/
@media screen and (max-width: 640px) { ... } /*兼容手机*/
@media screen and (max-width: 480px) { ... }

这种顺序就是先根据1024px+的屏幕写一个常规的网站布局,然后再逐步对小一些的屏幕做配置。先兼容平板电脑,再兼容手机。对于我这样做了很多常规网站的老人来说,这种布局顺序做起来是很舒服的。先驾轻就熟地让网站在PC上实现,我会为最大的容器定一个固定宽度,在PC平台上觉得布局已经完美了,然后再去考虑移动端的细枝末节。在移动端不想显示的东西,直接在后面的Media Queries中隐藏掉就是了。

第二种顺序是从小到大:

1
2
3
4
5
/*全局样式*/
...
@media screen and (min-width: 480px) { ... }
@media screen and (min-width: 640px) { ... } /*兼容平板*/
@media screen and (min-width: 960px)  { ... } /*台式机*/

这种顺序是先写一个偏向手机端的全局样式表,这样手机端的菜单以及一些细小的布局都要在全局样式里面先写好,然后再进行更加宽的屏幕的详细布局。这样开发对CSS的基本功要求要高一些,在写全局样式的时候,你就得不断的考虑在所有平台上是如何实现的。所有的宽度都要按百分比来考虑,容器的“伸缩性”在一开始就要布局好,而不是像传统网站那样先直接来个固定宽度。

另外,我们还要考虑到目前还有相当用户占有率的IE8/8-浏览器是不支持Media Queries的,写在Media Queries中的样式表会被IE8/8-浏览器无视掉。对于顺序一,这个问题基本不存在,被IE忽略掉的样式表部分正是在用这些老版本的IE的PC上用不到的,所以我们几乎什么都不用做。

而对于顺序二,问题变得稍微复杂一些。众所周知我们可以添加一个
css3-mediaqueries-js,在老IE中降低一些执行效率(反正效率本来就不高),让它们自己去兼容Media Queries。也可以再为老IE多写一个兼容的样式表,这样就更加麻烦一些。

于是可以肯定的说,对于开发人员来说顺序一的优势是显而易见的。然而我们真的就应该抛弃顺序二吗?
对于移动端来说,顺序二的优势还是很大的。越是小的屏幕,用顺序二的效率就越高,它不必执行整个样式表,只要执行到超出屏幕宽度以前那一级就行了,这样页面打开的速度就会快一些。想象一下如果一张大的背景图放在最后一级的Media Queries中,你能为移动端节约多少流量?我们知道速度和流量在当今的移动端还是很敏感的,而在PC上至少没有移动端那么敏感。

总结:
如果网站的用户还只集中在PC上,或者网站的受众面只定位在PC上,或者网站上几乎没有图片加载,或者你是一个没有追求的前端…那就尽管用顺序一去构架你的样式表吧。
如果要考虑全平台,那就用顺序二,为IE单独引入一个css3-mediaqueries-js。要相信在开发的时候多费一些心思,用户会给你更多的回报。

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/314.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注