文章: 阅读:

CSS 响应式设计

CSSCSS

前言

  • 响应式设计。

1、Viewport

  • viewport 是用户网页的可视区域。翻译为中文可以叫做 “视区”。

  • 手机浏览器是把页面放在一个虚拟的 “窗口”（viewport）中，通常这个虚拟的 “窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

  • 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
属性 描述
width 控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height 和 width 相对应，指定高度
initial-scale 初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale 允许用户缩放到的最大比例
minimum-scale 允许用户缩放到的最小比例
user-scalable 用户是否可以手动缩放

2、网格视图

  • 很多网页都是基于网格设计的，这说明网页是按列来布局的。

  • 使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。

  • 响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。

  • 创建响应式网格视图，首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。确保边距和边框包含在元素的宽度和高度间。

    1
    2
    3
    * {
        box-sizing: border-box;
    }

  • 12 列的网格系统可以更好的控制响应式网页。可以计算每列的百分比: 100% / 12 列 = 8.33%。在每列中指定 class，class=”col-“ 用于定义每列有几个 span。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

  • 所有的列向左浮动，间距 (padding) 为 15px。

    1
    2
    3
    4
    [class*="col-"] {
        float: left;
        padding: 15px;
    }

  • 每一行使用 <div> 包裹。所有列数加起来应为 12。

    1
    2
    3
    4
    <div class="row">
        <div class="col-3 menu">...</div>
        <div class="col-9">...</div>
    </div>

  • 列中行为左浮动，并添加清除浮动。

    1
    2
    3
    4
    5
    .row:after {
        content: "";
        clear: both;
        display: block;
    }

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <style>
        * {
            box-sizing: border-box;
        }
        
        .row:after {
            content: "";
            clear: both;
            display: block;
        }

        [class*="col-"] {
            float: left;
            padding: 15px;
        }

        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}

        html {
            font-family: "Lucida Sans", sans-serif;
        }
        .header {
            background-color: #9933cc;
            color: #ffffff;
            padding: 15px;
        }
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color: #33b5e5;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }
        .menu li:hover {
            background-color: #0099cc;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div class="header">
        <h1>Chania</h1>
    </div>

    <div class="row">
        <div class="col-3 menu">
            <ul>
                <li>The Flight</li>
                <li>The City</li>
                <li>The Island</li>
                <li>The Food</li>
            </ul>
        </div>
        <div class="col-9">
            <h1>The City</h1>
            <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts,
                the old town and the modern city.</p>
            <p>Resize the browser window to see how the content respond to the resizing.</p>
        </div>
    </div>

  • 效果


    Chania

    • The Flight
    • The City
    • The Island
    • The Food

    The City

    Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

    Resize the browser window to see how the content respond to the resizing.


3、媒体查询

  • 使用 @media 查询，可以针对不同的媒体类型定义不同的样式。

  • 实例

    1
    2
    3
    4
    5
    6
    /* 如果浏览器窗口小于 500px, 背景将变为浅蓝色。 */
    @media only screen and (max-width: 500px) {
        body {
            background-color: lightblue;
        }
    }

3.1 添加断点

  • 在先前的教程中使用行和列来制作网页，它是响应式的，但在小屏幕上并不能友好的展示。媒体查询可以解决这个问题。可以在设计稿的中间添加断点，不同的断点有不同的效果。

  • 使用媒体查询在 768px 添加断点。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    /* 当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100% */
    @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        [class*="col-"] {
            width: 100%;
        }
    }

3.2 为移动端优先设计

  • 移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。这就意味着必须对 CSS 做一些改变。

  • 在屏幕小于 768px 进行样式修改，同样在屏幕宽度大于 768px 时也需要修改样式。以下是移动端优先实例。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /* 为移动端设计: */
    [class*="col-"] {
        width: 100%;
    }

    /* 当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100% */
    @media only screen and (min-width: 768px) {
        /* For desktop: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }

3.3 为平板设备设置断点

  • 可以根据自己的需要添加断点。同样可以为平板设备和移动手机设备设置断点。

  • 在屏幕为 600px 时添加媒体查询，并设置新的样式（屏幕大于 600px 但小于 768px）。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }

    /* For tablets: */
    @media only screen and (min-width: 600px) {
        .col-m-1 {width: 8.33%;}
        .col-m-2 {width: 16.66%;}
        .col-m-3 {width: 25%;}
        .col-m-4 {width: 33.33%;}
        .col-m-5 {width: 41.66%;}
        .col-m-6 {width: 50%;}
        .col-m-7 {width: 58.33%;}
        .col-m-8 {width: 66.66%;}
        .col-m-9 {width: 75%;}
        .col-m-10 {width: 83.33%;}
        .col-m-11 {width: 91.66%;}
        .col-m-12 {width: 100%;}
    }

    /* For desktop: */
    @media only screen and (min-width: 768px) {
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }

  • 以上代码看起来很多余，但是他可以根据屏幕大小自动设置不同的样式，所以还是非常必要的。

3.4 横屏/竖屏

  • 结合 CSS 媒体查询，可以创建适应不同设备的方向 (横屏 landscape、竖屏 portrait 等) 的布局。

  • 语法

    1
    orientation：portrait | landscape;
值 描述
portrait 竖屏，指定输出设备中的页面可见区域高度大于或等于宽度
landscape 横屏，除 portrait 值情况外，都是 landscape

  • 如果是横屏背景将是浅蓝色。

    1
    2
    3
    4
    5
    @media only screen and (orientation: landscape) {
        body {
            background-color: lightblue;
        }
    }

3.5 完整实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <style>
        * {
            box-sizing: border-box;
        }

        .row:after {
            content: "";
            clear: both;
            display: block;
        }
        html {
            font-family: "Lucida Sans", sans-serif;
        }
        .header {
            background-color: #9933cc;
            color: #ffffff;
            padding: 15px;
        }
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color: #33b5e5;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }
        .menu li:hover {
            background-color: #0099cc;
        }
        .aside {
            background-color: #33b5e5;
            padding: 15px;
            color: #ffffff;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }
        .footer {
            background-color: #0099cc;
            color: #ffffff;
            text-align: center;
            font-size: 12px;
            padding: 15px;
        }

        [class*="col-"] {
            float: left;
            padding: 15px;
        }

        /* For mobile phones: */
        [class*="col-"] {
            width: 100%;
        }

        /* For tablets: */
        @media only screen and (min-width: 600px) {
            .col-m-12 {width: 8.33%;}
            .col-m-2 {width: 16.66%;}
            .col-m-3 {width: 25%;}
            .col-m-4 {width: 33.33%;}
            .col-m-5 {width: 41.66%;}
            .col-m-6 {width: 50%;}
            .col-m-7 {width: 58.33%;}
            .col-m-8 {width: 66.66%;}
            .col-m-9 {width: 75%;}
            .col-m-10 {width: 83.33%;}
            .col-m-11 {width: 91.66%;}
            .col-m-12 {width: 100%;}
        }

        /* For desktop: */
        @media only screen and (min-width: 768px) {
            .col-1 {width: 8.33%;}
            .col-2 {width: 16.66%;}
            .col-3 {width: 25%;}
            .col-4 {width: 33.33%;}
            .col-5 {width: 41.66%;}
            .col-6 {width: 50%;}
            .col-7 {width: 58.33%;}
            .col-8 {width: 66.66%;}
            .col-9 {width: 75%;}
            .col-10 {width: 83.33%;}
            .col-11 {width: 91.66%;}
            .col-12 {width: 100%;}
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <div class="header">
        <h1>Chania</h1>
    </div>

    <div class="row">
        <div class="col-3 col-m-3 menu">
            <ul>
                <li>The Flight</li>
                <li>The City</li>
                <li>The Island</li>
                <li>The Food</li>
            </ul>
        </div>

        <div class="col-6 col-m-9">
            <h1>The City</h1>
            <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts,
                the old town and the modern city.</p>
        </div>

        <div class="col-3 col-m-12">
            <div class="aside">
                <h2>What?</h2>
                <p>Chania is a city on the island of Crete.</p>
                <h2>Where?</h2>
                <p>Crete is a Greek island in the Mediterranean Sea.</p>
                <h2>How?</h2>
                <p>You can reach Chania airport from all over Europe.</p>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>Resize the browser window to see how the content respond to the resizing.</p>
    </div>

  • 效果


    Chania

    • The Flight
    • The City
    • The Island
    • The Food

    The City

    Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

    What?

    Chania is a city on the island of Crete.

    Where?

    Crete is a Greek island in the Mediterranean Sea.

    How?

    You can reach Chania airport from all over Europe.

    Resize the browser window to see how the content respond to the resizing.


4、图片

4.1 使用 width 属性

  • 如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能。

  • 调整浏览器窗口查看图像是如何扩展的。

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
    1
    <img src="https://demo.qianchia.com/media/image/demo/demo22.png" width="460" height="345" />

  • 效果



4.2 使用 max-width 属性

  • 在以上实例中，图片会比它的原始图片大。可以使用 max-width 属性很好的解决这个问题。

  • 如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        img {
            width: 100%;
            max-width: 100%;
            height: auto;
        }
    </style>
    1
    <img src="https://demo.qianchia.com/media/image/demo/demo22.png" width="460" height="345" />

  • 效果



4.3 网页中添加图片

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <div class="col-6 col-m-9">
        <h1>The City</h1>
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts,
            the old town and the modern city.</p>
        
        <img src="https://demo.qianchia.com/media/image/demo/demo21.png" width="460" height="345" />
    </div>

  • 效果


    Chania

    • The Flight
    • The City
    • The Island
    • The Food

    The City

    Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

    What?

    Chania is a city on the island of Crete.

    Where?

    Crete is a Greek island in the Mediterranean Sea.

    How?

    You can reach Chania airport from all over Europe.

    Resize the browser window to see how the content respond to the resizing.


4.4 背景图片

  • 背景图片可以响应调整大小或缩放。

  • 以下是三个不同的方法，调整浏览器大小查看效果。

4.4.1 方法 1

  • 如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        div {
            width: 100%;
            height: 400px;
            background-image: url(https://demo.qianchia.com/media/image/demo/demo22.png);
            background-repeat: no-repeat;
            background-size: contain;
            border: 1px solid red;
        }
    </style>
    1
    <div></div>

  • 效果



4.4.2 方法 2

  • 如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        div {
            width: 100%;
            height: 400px;
            background-image: url(https://demo.qianchia.com/media/image/demo/demo22.png);
            background-size: 100% 100%;
            border: 1px solid red;
        }
    </style>
    1
    <div></div>

  • 效果



4.4.3 方法 3

  • 如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        div {
            width: 100%;
            height: 400px;
            background-image: url(https://demo.qianchia.com/media/image/demo/demo22.png);
            background-size: cover;
            border: 1px solid red;
        }
    </style>
    1
    <div></div>

  • 效果



4.5 不同设备显示不同图片

  • 大尺寸图片可以显示在大屏幕上，但在小屏幕上却不能很好显示。没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以可以使用媒体查询，根据不同的设备显示不同的图片。

  • 可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。

  • 以下大图片和小图片将显示在不同设备上。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
        /* For width smaller than 600px: */
        div {
            width: 100%;
            height: 400px;
            background-repeat: no-repeat;
            background-image: url(https://demo.qianchia.com/media/image/demo/demo23.png);
        }

        /* For width 600px and larger: */
        @media only screen and (min-width: 600px) {
            div {
                width: 100%;
                height: 400px;
                background-image: url(https://demo.qianchia.com/media/image/demo/demo21.png);
            }
        }
    </style>
    1
    <div></div>

  • 效果



4.6 HTML5 < picture > 元素

  • HTML5 的 <picture> 元素可以设置多张图片。

  • <picture> 元素类似于 <video> 和 <audio> 元素。可以设置不同的资源，第一个设置的资源为首选使用的。

  • 实例

    1
    2
    3
    4
    5
    <picture>
        <source srcset="https://demo.qianchia.com/media/image/demo/demo21.png" media="(max-width: 600px;)" />
        <source srcset="https://demo.qianchia.com/media/image/demo/demo23.png" />
        <img src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Flowers" style="width: auto;" />
    </picture>

  • 效果





    Flowers

  • srcset 属性的必须的，定义了图片资源。media 属性是可选的。

  • 浏览器支持

属性
<picture> 38.0 不支持 38.0 不支持 25.0
  • 对于不支持 <picture> 元素的浏览器你也可以定义 <img> 元素来替代。

5、视频

5.1 使用 width 属性

  • 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例。

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        video {
            width: 100%;
            height: auto;
        }
    </style>
    1
    2
    3
    4
    5
    <video width="500" controls>
        <source src="https://demo.qianchia.com/media/video/demo/demo5.mp4" type="video/mp4">
        <source src="https://demo.qianchia.com/media/video/demo/demo2.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
    </video>

  • 效果



5.2 使用 max-width 属性

  • 在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。

  • 如果 max-width 属性设置为 100%，视频播放器会根据屏幕自动调整比例，但不会超过其原始大小。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        video {
            width: 100%;
            max-width: 100%;
            height: auto;
        }
    </style>
    1
    2
    3
    4
    5
    <video width="500" controls>
        <source src="https://demo.qianchia.com/media/video/demo/demo1.mp4" type="video/mp4">
        <source src="https://demo.qianchia.com/media/video/demo/demo2.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
    </video>

  • 效果



5.3 网页中添加视频

  • 可以在网页中添加视频。以下实例视频根据 div 区域大小自动调整并占满整个 div 区域。

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        video {
            width: 100%;
            height: auto;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="col-6 col-m-9">
        <h1>The City</h1>
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts,
            the old town and the modern city.</p>
        
        <video width="500" controls>
            <source src="https://demo.qianchia.com/media/video/demo/demo1.mp4" type="video/mp4">
            <source src="https://demo.qianchia.com/media/video/demo/demo2.ogg" type="video/ogg">
            Your browser does not support HTML5 video.
        </video>
    </div>

  • 效果


    Chania

    • The Flight
    • The City
    • The Island
    • The Food

    The City

    Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

    What?

    Chania is a city on the island of Crete.

    Where?

    Crete is a Greek island in the Mediterranean Sea.

    How?

    You can reach Chania airport from all over Europe.

    Resize the browser window to see how the content respond to the resizing.


6、框架

  • 响应式 Web 设计框架 Bootstrap。

  • Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <head>
        <meta charset="utf-8" />
        <title>Bootstrap</title>

        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    </head>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <body>
        <div class="container">
            <div class="jumbotron">
                <h1>My First Bootstrap Page</h1>
                <p>Resize this responsive page to see the effect!</p>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <h3>Column 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-4">
                    <h3>Column 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-4">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
            </div>
        </div>
    </body>

  • 效果

    点击查看

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:32


评论


文章目录
  1. 1. 前言
  2. 2. 1、Viewport
  3. 3. 2、网格视图
  4. 4. 3、媒体查询
    1. 4.1. 3.1 添加断点
    2. 4.2. 3.2 为移动端优先设计
    3. 4.3. 3.3 为平板设备设置断点
    4. 4.4. 3.4 横屏/竖屏
    5. 4.5. 3.5 完整实例
  5. 5. 4、图片
    1. 5.1. 4.1 使用 width 属性
    2. 5.2. 4.2 使用 max-width 属性
    3. 5.3. 4.3 网页中添加图片
    4. 5.4. 4.4 背景图片
      1. 5.4.1. 4.4.1 方法 1
      2. 5.4.2. 4.4.2 方法 2
      3. 5.4.3. 4.4.3 方法 3
    5. 5.5. 4.5 不同设备显示不同图片
    6. 5.6. 4.6 HTML5 < picture > 元素
  6. 6. 5、视频
    1. 6.1. 5.1 使用 width 属性
    2. 6.2. 5.2 使用 max-width 属性
    3. 6.3. 5.3 网页中添加视频
  7. 7. 6、框架
隐藏目录