CSS3 媒体查询响应式布局

标签：style   ar   使用   strong   on   问题   代码   html   amp   

在这个以手机、平板和电脑为中心的互联网时代。为了提高用户体验度，让页面适应不同屏幕的分辨率成了我们写页面时最至关重要的问题。CSS3中的媒体查询功能很好的帮我们解决了这一问题，它可以根据屏幕的大小进行上扩和下扩呈现给用户一个可用的界面。

　　刚开始接触媒体查询这个功能，我一边感慨它的强大，一边焦虑着我应该怎么去用它呢？首先我们得对它进行一个详细的认识和了解。

　　媒体查询就是通过不同的媒体类型和条件定义样式表的规则。可以让CSS更精确的作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width。媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。目前Google Chrome、Safari 3、Firefox 3.5、Opera 7以及Internet Explorer 9都支持媒体查询。同时我们也得满足旧版本浏览器的需求，只要我们的主式样表是在没有使用媒体查询的情形下提供的，那么该页面就能够在所有的浏览器中进行式样设计。

　　媒体查询示例代码：
　　@media screen and (width:800px){ … }
　　@media screen (max-width:800px) and (min-width:800px){ … }
　　@import url(example.css) screen and (width:800px);
　　<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
　　<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

　　使用过程中我们可以根据手机、平板以及电脑屏幕的大中小分辨率定义3个样式的设置或改调，达到更高的用户体验。以上是我对媒体查询的一些拙见，欢迎各位大神纠错提点。

CSS3 媒体查询响应式布局

标签：style   ar   使用   strong   on   问题   代码   html   amp   

原文地址：http://www.cnblogs.com/LeeX/p/4082509.html