移动端的Responsive Web Design @media

HTML/CSS 2014-01-14 移动端,自适应网页,响应式网页

最早的网页设计没有这个概念,IE是王道,绝大多数的网页宽度都是统一的。后来随着液晶显示器的冲击,网页的宽度也相应的随着主流显示器分辨率的来设计宽度。Responsive Web Design(响应式网页设计/自适应网页设计)早在前几年就已开始逐渐步入主流,但那会的移动端并不很多,使用IE浏览器居多,对响应式支持不好,只有少部分尝鲜的站点使用。

近两年,随着大屏手机,平板电脑的大量普及,人手一部,网页设计开始脱离固定的液晶显示屏,开始转移到移动端。最早的做法,差不多是为不同的主流设备下分别开发相应的CSS主题,然后使用js判断设备并引入相应的CSS使得网页在各个设备之间能够得体的显示。这种工作量是相当大的,特别是手机、平板电脑各种尺寸都有,这需要花大量的功夫与精心设计。

如今那种做法显然要改良了,自适应设备的网页设计才是能解决这个问题的唯一宝剑。

在响应式设计中,@media是一个重要的关键词,先来看看它的属性

媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示,比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。
tv 用于电视机类型的设备。

再来看一个简单的示例:

@media (min-width: 768px) {
    #content  {  width: 750px  }
}

@media (min-width: 1800px) {
    #content  {  width: 1500px  }
}

以上代码做了一个判断,如果设备的最小宽度等于768,那#content的宽度就给750px,如果设备的最小宽度等于1800px,那#content的宽度就给1500px。这个有点类似于编程语言中的if条件判断,并且能精确到px,所以在响应式设计中@media关键字有非常重要的作用。

从图中看到,基本新版的浏览器全都支持@media属性了,IE6\7\8很不幸被标红,但相比以前,目前绝大部分浏览器都已没问题,包括IE9/10/11,所以针对不支持的IE浏览器你可以在头部给一个

<!--[if lt IE 9]>
  include IE6/7/8 style or js
<![endif]-->

无论如何,响应式设计已是当前网页设计主流,放弃低端浏览器吧!

文字链接:《移动端的Responsive Web Design @media

文章地址:http://www.qttc.net/201401402.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 3

  • 其实响应式跟 IE 6、7、8 没有什么关系。IE 6、7、8 等,即便是不支持,也没有关系,他们都是桌面浏览器,而响应式是针对平板电脑和手机的,移动端平台浏览器是 webkit 的,chrome 或者 safari ,当然也有 IE10 ,但已经支持的很好了。 所以,放心的用就行,在 chrome 中测试通过就 OK 了。
    2014-01-21 22:58:05 [ 跟帖 ]
    你说的没错,可能响应式成了移动端的专属,实际上响应式设计不分平台,因为桌面浏览器也有大小,有些人也许调整窗口大小等等,所以我认为它是针对不同分辨率的响应式设计。
    2014-01-22 09:35:55 [ 跟帖 ]
    1 #
  • 正学习中网页设计
    2014-01-15 22:24:01 [ 跟帖 ]
    2 #