- 使用media queries属性可以根据浏览器的宽度自动选择激活需要的CSS定义:
其基本格式如下:
-
@media screen and (min-width: 600px){ /* 即当屏幕宽度大于等于600px时触发此CSS定义 */ ... } @media screen and (max-width: 599px){ /* 即当屏幕宽度小于等于599px时触发此CSS定义 */ ... }
示例:
-
<div class="container"> <nav> <ul> <li>导航01</li> <li>导航02</li> <li>导航03</li> <li>导航04</li> <li>导航05</li> </ul> </nav> <section>陈玩玩在此</section> <section>陈玩玩在此</section> <section>陈玩玩在此</section> </div> <style type="text/css"> .container{ border: 2px solid green; padding: 10px; overflow: auto; } nav{ border: 1px solid pink; } nav ul{ padding: 10px; margin: 0 auto; } section{ border: 1px solid yellow; padding: 10px; } /* 以下定义media queries相关CSS */ /* 当浏览器最小宽度为600px则触发如下CSS */ @media screen and (min-width: 600px){ /* 这里生成双列布局,左边导航,右侧内容*/ nav{ float:left; width: 25%; } section{ margin-left:25%; } } /* 当浏览器最大宽度小于599px时触发如下CSS */ @media screen and (max-width: 599px){ nav li{ display:inline; /* 这里保证导航里的元素横向排列 */ } } </style>
当≤599px时,見该网页示例:http://www.gbtags.com/gb/gbtutorials/82.htm
当≥600px时,效果如下:
- 响应式布局(responsive design)即是基于media queries技术
时间: 2024-07-30 11:03:46