zoukankan      html  css  js  c++  java
  • 简单响应式布局展示

    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>

  • 相关阅读:
    基于Python的人脸动漫转换
    let 与 var的区别
    【LeetCode】汇总
    【HDU】4632 Palindrome subsequence(回文子串的个数)
    【算法】均匀的生成圆内的随机点
    【LeetCode】725. Split Linked List in Parts
    【LeetCode】445. Add Two Numbers II
    【LeetCode】437. Path Sum III
    【LeetCode】222. Count Complete Tree Nodes
    【LeetCode】124. Binary Tree Maximum Path Sum
  • 原文地址:https://www.cnblogs.com/samdx/p/6119641.html
Copyright © 2011-2022 走看看