• CSS响应式布局（自适应布局）

    CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。

    要实现响应式布局，常用的方式有以下几种：

    • 使用 CSS 中的媒体查询（最简单）；
    • 使用 JavaScript（使用成本比较高）；
    • 使用第三方开源框架（例如 bootstrap，可以很好的支持各种浏览器）。


    接下来我们以媒体查询为例来具体演示一下响应式布局的实现。

    设置 meta 标签

    首先，我们需要设置 meta 标签来告诉浏览器，让视口（网页的可视区域）的宽度等于设备的宽度，并禁止用户对页面的缩放，如下所示：

    在设置视口时需要注意，视口就是网页可见区域的尺寸，设置视口时只设置宽度就行，不用在乎高度，具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下：

    • viewport：即视口，表示网页的可视区域；
    • width：控制 viewport 的大小，可以指定一个具体的值，例如 600，也可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度；
    • initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例；
    • maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；
    • minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；
    • user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。

    媒体查询

    CSS 媒体查询可以根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS 样式，让使用不同设备的用户都能得到最佳的体验。

    关于媒体查询有以下三种实现方式：

    1、直接在 CSS 文件中使用，示例代码如下：

    1. @media (max-width: 320px) {
    2.     /*0~320*/
    3.     body {
    4.         background: pink;
    5.     }
    6. }
    7. @media (min-width: 321px) and (max-width: 375px) {
    8.     /*321~768*/
    9.     body {
    10.         background: red;
    11.     }
    12. }
    13. @media (min-width: 376px) and (max-width: 425px) {
    14.     /*376~425*/
    15.     body {
    16.         background: yellow;
    17.     }
    18. }
    19. @media (min-width: 426px) and (max-width: 768px) {
    20.     /*426~768*/
    21.     body {
    22.         background: blue;
    23.     }
    24. }
    25. @media (min-width: 769px) {
    26.     /*769~+∞*/
    27.     body {
    28.         background: green;
    29.     }
    30. }

    2、使用 @import 导入，示例代码如下：

    1. @import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
    2.  
    3. @import 'index02.css' screen and (max-width:720px)

    3、在 link 标签中使用，示例代码如下：

    1. <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
    2.  
    3. <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>



    下面通过一个综合的示例来演示一下响应式布局的实现：

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>响应式布局</title>
    6.         <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
    7.         <style>
    8.             *{
    9.                 margin: 0px;
    10.                 padding: 0px;
    11.                 font-family: "微软雅黑";
    12.             }
    13.             #head, #foot, #main
    14.             {
    15.                 height: 100px;
    16.                 width: 1200px;
    17.                 /*width: 85%;*/
    18.                 background-color: goldenrod;
    19.                 text-align: center;
    20.                 font-size: 48px;
    21.                 line-height: 100px;
    22.                 margin: 0 auto;
    23.             }
    24.             #head div{
    25.                 display: none;
    26.                 font-size: 20px;
    27.                 height: 30px;
    28.                 width: 100px;
    29.                 background-color: green;
    30.                 float: right;
    31.                 line-height: 30px;
    32.                 margin-top: 35px;
    33.             }
    34.             #head ul{
    35.                 width: 80%;
    36.             }
    37.             #head ul li{
    38.                 width: 20%;
    39.                 float: left;
    40.                 text-align: center;
    41.                 list-style: none;font-size: 20px;
    42.             }
    43.             #main{
    44.                 height: auto;
    45.                 margin: 10px auto;
    46.                 overflow: hidden;
    47.             }
    48.             .left, .center, .right{
    49.                 height: 600px;
    50.                 line-height: 600px;
    51.                 float: left;
    52.                 width: 20%;
    53.                 background-color: red
    54.             }
    55.             .center{
    56.                 width: 60%;
    57.                 border-left: 10px solid #FFF;
    58.                 border-right: 10px solid #FFF;
    59.                 box-sizing: border-box;
    60.             }
    61.             @media only screen and (max-width: 1200px) {
    62.                 #head, #foot, #main{
    63.                 width: 100%;
    64.                 }
    65.             }
    66.             @media only screen and (max-width: 980px) {
    67.                 .right{
    68.                     display: none;
    69.                 }
    70.                 .left{
    71.                     width: 30%;
    72.                 }
    73.                 .center{
    74.                     width: 70%;
    75.                     border-right: hidden;
    76.                 }
    77.             }
    78.             @media only screen and (max-width: 640px) {
    79.                 .left, .center, .right{
    80.                     width: 100%;
    81.                     display: block;
    82.                     height: 200px;
    83.                     line-height: 200px;
    84.                 }
    85.                 .center{
    86.                     border: hidden;
    87.                     border-top: 10px  solid #FFFFFF;
    88.                     border-bottom: 10px solid #FFFFFF;
    89.                     height: 600px;
    90.                     line-height: 600px;
    91.                 }
    92.                 #head ul{
    93.                     display: none;
    94.                 }
    95.                 #head div{
    96.                     display: block;
    97.                 }
    98.             }
    99.         </style>   
    100.     </head>
    101.     <body>
    102.         <div>
    103.             <header id="head">
    104.                 <ul>
    105.                     <li>header1</li>
    106.                     <li>header2</li>
    107.                     <li>header2</li>
    108.                     <li>header2</li>
    109.                     <li>header2</li>
    110.                 </ul>
    111.                 <div>icon</div>
    112.             </header>
    113.             <section id="main">
    114.                 <div class="left">
    115.                     left
    116.                 </div>
    117.                 <div class="center">
    118.                     center
    119.                 </div>
    120.                 <div class="right">
    121.                     right
    122.                 </div>
    123.             </section>
    124.             <footer id="foot">
    125.                 footer
    126.             </footer>
    127.         </div>
    128.     </body>
    129. </html>

    当浏览器窗口小于 1200 像素大于 980 像素时，页面的样式如下图所示：
     


    当浏览器窗口大于 640 像素小于 980 像素时，页面的样式如下图所示：
     


    当浏览器窗口小于 640 像素时，页面的样式如下图所示：
     

  • 相关阅读:
    Atcoder abc127
    企业如何高效平滑迁移数据？火山引擎DataLeap上线整库搬迁解决方案
    勒索病毒最新变种.mkp勒索病毒来袭，如何恢复受感染的数据？
    数据改版 | CnOpenData中国高新技术企业专利统计数据
    OSN 1800 I 增强型华为多业务光传送设备
    神经网络（九）无监督学习
    Centos Nginx SSL 配置
    CRC校验（FPGA实现）
    Javascript知识【案例：复选框操作】
    cpolar内网穿透
  • 原文地址：https://blog.csdn.net/weixin_65607135/article/details/126878366