目前已经越来越多的站点以及wap站点使用响应式设计,因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。响应式设计的目的是尽可能以最好的布局显示您的数据,以实现用户友好的 Web 页面。
css2的时期有一个不是很常用的media type,他拥有比如aural(声音)braille(触摸)print(打印)handheld(移动设备)等等十种媒体类型,(附加媒体类型详细http://www.w3.org/TR/CSS2/media.html#media-types)利用@media规则可以在同一样式表里为不同终端使用不同的样式。尴尬的是这个media type并没有被多少终端真正的支持。
现在CSS3有了个更为实用的 media query。而移动终端的浏览器基本已经完全支持了css3.他可以为你获取各种终端的数据。
一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上应该也是三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。(这里关于响应式布局还有个比较好的消息,就是拖动浏览器也可以触发判断条件,测试的时候你不需要去找一堆手机,只要把自己的浏览器窗口缩小到一定尺寸就可以了,这个demo也可以用拖动浏览器大小的方式测试。)
这就是一个最简单的 响应式布局 的页面。我们就从这个例子里认识下media query属性吧。
@media screen and (min-width: 320px) and (max-width : 479px)
就从这个条件语句开始介绍,media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一)。然后用 and 关键字来连接条件(其他关键字还有 not, only,看字面大家能理解,就不多说。),然后括号里就是一个媒体查询语句,稍微懂点css的同学都能看懂,这个条件语句意思是在大于320小于479的分辨率下所激活的样式表。
这个语句,就是响应式布局的基础应用了。在判断终端分辨率大小之后,赋予不同的样式进去,就像我们的例子里
按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
→我们致力于为广大网民解决所遇到的各种电脑技术问题 如果您认为本词条还有待完善,请 编辑词条