本文主要包含css3响应式布局,html5 css3响应式布局,响应式布局 media,响应式布局实例,响应式布局简单实例等相关知识,佚名 希望在学习及工作中可以帮助到您
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。随着技术的发展css3的特性也被广泛应用开来,它的很多新标签也非常好用而且非常容易学习,就像css3的响应式布局也是非常6的,原本只能在pc端显示的网页现在可以通过@media的加入就可以把一个网页变成响应式了,pc端也可以移动端也可以真是伸缩自如啊,例如呢
</div>- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <style>
- /* 小于200px*/
- @media only screen and (max-width:200px ) {
- #p{
- background: red;
- }
- }
- /* 大于300px*/
- @media only screen and (min-width:300px ) {
- #p{
- background: yellow;
- }
- }
- </style>
- <body>
- <p id="p">小于200px背景变红色大于300px背景为黄色</p>
- </body>
- </html>
这段代码的效果
@media可以用于单条件也可以用于双条件例如：
</div>- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <style>
- /* 小于200px*/
- @media (min-width:200px ) and (max-width:500px ) {
- #p{
- background: red;
- }
- }
- </style>
- <body>
- <