CSS3 Media Queries 实现响应式demo

现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。

demo：

<!DOCTYPE html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Media Query Demos</title>  
<style type="text/css">  
.wrapper {  
    border: solid 1px #666;   
    padding: 5px 10px;  
    margin: 40px;  
}  
  
.viewing-area span {  
    color: #666;  
    display: none;  
}  
  
/* max-width */  
@media screen and (max-width: 600px) {  
    .one {  
        background: #F9C;  
    }  
    span.lt600 {  
        display: inline-block;  
    }  
}  
  
/* min-width */  
@media screen and (min-width: 900px) {  
    .two {  
        background: #F90;  
    }  
    span.gt900 {  
        display: inline-block;  
    }  
}  
  
/* min-width & max-width */  
@media screen and (min-width: 600px) and (max-width: 900px) {  
    .three {  
        background: #9CF;  
    }  
    span.bt600-900 {  
        display: inline-block;  
    }  
}  
  
/* max device width */  
@media screen and (max-device-width: 480px) {  
    .iphone {  
        background: #ccc;  
    }  
}  
</style>  
</head>  
  
<body>  
    <div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>  
    <div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>  
    <div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>  
    <div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>  
    <p class="viewing-area">  
        <strong>Your current viewing area is:</strong>  
        <span class="lt600">less than 600px</span>  
        <span class="bt600-900">between 600 - 900px</span>  
        <span class="gt900">greater than 900px</span>  
    </p>  
</body>  
</html>

CSS3 Media Queries 实现响应式demo

猜你喜欢