Hot For Coding
CSS移动端的Responsive Web Design @media

随着移动端的出现,Responsive Web Design(响应式网页设计/自适应网页设计)早在前几年就已开始逐渐步入主流,但那会的移动端并不很多,使用桌面浏览器居多,大部分站点没必要考虑响应式支持,只有少部分尝鲜的站点使用。

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

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

在响应式设计中,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关键字有非常重要的作用。

full

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

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

无论如何,响应式设计已是当前网页设计主流!

TITLE: CSS移动端的Responsive Web Design @media

LINK: https://www.qttc.net/402_css_media.html

NOTE: 转载内容请注明出处