CSS3的Media Queries(媒体查询)在现在的网站开发中已经被应用得越来越频繁,现在但凡开发新的网站,只要不是布局超复杂的项目,不免都要“顺手”做一些响应式布局,尽量以低成本兼容更多的浏览器/设备。现代的移动设备尺寸多样,对于CSS的兼容问题也层出不穷,本文主要探讨Media Queries的分辨顺序问题。从粗略的概念视角开始,不涉及具体的技术细节。
常见的Media Queries顺序有两种,第一种是从大到小:
/*全局样式*/ ... @media screen and (max-width: 960px) { ... } /*兼容平板*/ @media screen and (max-width: 640px) { ... } /*兼容手机*/ @media screen and (max-width: 480px) { ... } |
这种顺序就是先根据1024px+的屏幕写一个常规的网站布局,然后再逐步对小一些的屏幕做配置。先兼容平板电脑,再兼容手机。对于我这样做了很多常规网站的老人来说,这种布局顺序做起来是很舒服的。先驾轻就熟地让网站在PC上实现,我会为最大的容器定一个固定宽度,在PC平台上觉得布局已经完美了,然后再去考虑移动端的细枝末节。在移动端不想显示的东西,直接在后面的Media Queries中隐藏掉就是了。
第二种顺序是从小到大:
/*全局样式*/ ... @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。要相信在开发的时候多费一些心思,用户会给你更多的回报。
宝鸡网站建设公司,外贸营销型网站定制设计——宝鸡市布瑞恩信息科技有限公司
请尊重我们的劳动成果。