通过@media实现Media Query实现响应布局

今天在CSDN上面看到有人不知道如何实现自适应。。。自适应在CSS3开始就很简单了。不用写一堆的代码只要通过CSS3 Media Query实现响应布局。利用@media screen实现网页布局的自适应。

Media Query能在不同的条件下使用不同的样式，使页面在不同的终端设备设备下达到不同的渲染效果。使用Media Query时必须要使用@media开头，然后指定媒体类型和媒体特性。媒体特性的书写方式和样式的书写方式基本相同，主要分为两个部分，一个是媒体特性，一个是媒体特性的值。如：{max-width:800px}

最大宽度：max-width

max-width指媒体类型小于或等于指定宽度时生效。

程序代码 - 在屏幕分辨率小于480时取消banner广告
@media screen and (max-width:480){
  .ads??banner{display:none}
}

最小宽度：min-width

min-width用法雨max-width一样，不同的是min-width指媒体类型大于或等于指定宽度时生效。

多个媒体特性一起使用

Media Query可以使用关键词“and”将多个媒体特性结合在一起。如：

@media screen and (min-width: 768px) and (max-width:1400){}

指定设备屏幕宽度

可以通过max-divice-width或min-device-width指定设备屏幕最大或最小分辨率。如：

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css"/>

上面的代码指定iphone.css的样式适用于最大屏幕宽度为480px的设备。

原文链接：http://www.7znews.com/dll_website/dll_showHTML.php?h_id=24