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-width: 992px) {
9 .box {
10 margin: 20px;
11 padding: 20px;
12 background: #fee;
13 color: #a00;
14 }
15 }
16 /*只在PAD屏幕下执行的样式*/
17 @media screen and (min-width: 768px) and (max-width: 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-width: 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>
时间： 2024-11-14 13:24:46