响应式web设计之CSS3 Media Queries
<!DOCTYPE HTML>
<html>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>css3-media-queries-demo</title>`` <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; } .content{ zoom:1; } .content:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .leftBox, .rightBox{ float: left; width: 20%; height: 500px; margin: 5px; background: #ffccf7; display: inline; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 2s ease; transition: width 1s ease; } .middleBox{ float: left; width: 50%; height: 800px; margin: 5px; background: #b1fffc; display: inline; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } .rightBox{ background: #fffab1; } @media only screen and (min-width: 1024px){ .content{ width: 1000px; margin: auto } } @media only screen and (min-width: 400px) and (max-width: 1024px){ .rightBox{ width: 0; } .leftBox{ width: 30%} .middleBox{ width: 65%} } @media only screen and (max-width: 400px){ .leftBox, .rightBox, .middleBox{ width: 98%; height: 200px; } } </style> </head>
<body> <div class="content"> <div class="leftBox"></div> <div class="middleBox"></div> <div class="rightBox"></div> </div> </body>
</html>
