简单响应式布局展示

Posted 2020-08-21 Sam_camel

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单响应式布局展示相关的知识，希望对你有一定的参考价值。

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>

以上是关于简单响应式布局展示的主要内容，如果未能解决你的问题，请参考以下文章