1.什么是响应式网页？
一个页面，可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等。
优点：可以自动适配PC、PAD、PHONE浏览器屏幕
不足：代码变复杂，需要考虑更多兼容性，并不适合内容非常多网页
5.css文件
1 body { 2 margin: 0; 3 background: #fff; 4 font-family: 'SimHei'; 5 } 6 7 /*只在PC屏幕下执行的样式*/ 8 @media screen and (min- 992px) { 9 .box { 10 margin: 20px; 11 padding: 20px; 12 background: #fee; 13 color: #a00; 14 } 15 } 16 /*只在PAD屏幕下执行的样式*/ 17 @media screen and (min- 768px) and (max- 991px) { 18 .box { 19 margin: 10px; 20 padding: 10px; 21 background: #efe; 22 color: #0a0; 23 } 24 .box h1 { 25 display: none; 26 } 27 } 28 /*只在PHONE屏幕下执行的样式*/ 29 @media screen and (max- 767px) { 30 .box { 31 margin: 0px; 32 padding: 0px; 33 background: #eef; 34 color: #00a; 35 } 36 }
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/5.css"/> 6 <title></title> 7 </head> 8 <body> 9 <div class="box"> 10 <h1>使用媒体查询技术</h1> 11 <h1>根据屏幕不同的宽度执行不同的CSS文件</h1> 12 <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur officia quasi qui reprehenderit tempore veniam voluptas? Asperiores, culpa dolor dolorum impedit ipsam magnam minima nostrum quibusdam quod reprehenderit rerum, voluptate?</span><span>Accusantium ad atque dicta dolor est et expedita facere fuga illum iusto, labore laboriosam laudantium molestiae nam, nemo, neque nobis nostrum possimus provident quam quis quod recusandae repellendus sapiente veniam.</span><span>Architecto, assumenda at, blanditiis consectetur consequuntur deserunt dolore earum eos eum, ex fugit id laudantium magni necessitatibus nemo nihil nostrum praesentium provident recusandae repellendus similique sit ullam vel voluptatem voluptatibus.</span> 13 </p> 14 </div> 15 </body> 16 </html>
