CSS3 媒体查询响应式布局
在这个以手机、平板和电脑为中心的互联网时代。为了提高用户体验度，让页面适应不同屏幕的分辨率成了我们写页面时最至关重要的问题。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个样式的设置或改调，达到更高的用户体验。以上是我对媒体查询的一些拙见，欢迎各位大神纠错提点。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
