响应式布局经典范例——巨幅背景大标题

效果如下

电脑浏览器最大时的效果：
在这里插入图片描述

电脑浏览器窗口变窄的效果：
在这里插入图片描述
电脑浏览器窗口最窄的效果：

手机上的效果：

在这里插入图片描述

完整范例代码

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>巨幅标题效果演示title>
  head>
  <body>
    <header>
      <div class="header-text-container">
        <h1 class="header-article_title">你不知道的水杉h1>
        <time class="header-article_pub">2015年3月10日time>
      div>
    header>
    <article>
      水杉（学名：Metasequoia glyptostroboides Hu & W. C.
      Cheng）：裸子植物杉科。落叶乔木，小枝对生，下垂。叶线形，交互对生，假二列成羽状复叶状，长1-1.7厘米，下面两侧有4-8条气孔线。雌雄同株。球果下垂，近球形，微具4棱，长1.8-2.5厘米，有长柄；种鳞木质，盾形，每种鳞具5-9种子，种子扁平，周围具窄翅。
      水杉属在中生代白垩纪和新生代约有6-7种，过去认为早已绝灭，1941年中国植物学者在湖北利川谋道镇（当时四川万县磨刀溪）首次发现这一闻名中外古老珍稀孑遗树种。据近年调查，重庆万州、重庆石柱县、湖北利川和湖南龙山、桑植均发现300余年的巨树。
      水杉适应性强，喜湿润生长快，北京以南各地均有栽培。材质轻软，可供建筑、板料、造纸等用；树姿优美，为庭园观赏树。
    article>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      header {
        display: block;
        font-size: 1.125rem; /* 18px / 16px = 1.125 */
        font-weight: 700;

        height: 500px; /* 样式回滚 */
        height: 80vh; /* 如果浏览器不支持vh单位，则上面的500px可生效 */

        min-height: 500px;
        max-height: 1080px;

        background: url("./水杉林.jpeg");
        background-position: 50% 0;
        background-repeat: no-repeat;
        /* 设置容器background-size属性为cover，意为保持在图片长宽比的基础上缩放背景图像，使其尽可能完整地覆盖背景 */
        background-size: cover;
        /* 弹性布局实现标题在背景图片中垂直居中 */
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .header-text-container {
        text-align: center;
        color: white;
        /* 一定的文字阴影，使文字更加立体 */
        text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);
      }

      .header-article_title {
        font-size: 2em; /* 80px / 40px = 2 */
      }

      .header-article_pub {
        display: block;
        font-size: 1em; /* 40px / 40px = 1 */
      }

      @media all and (min-width: 480px) {
        header {
          font-size: 2.5rem; /* 40px / 16px = 2.5 */
        }
      }

      /*  
  移动优先：  

  默认在移动设备上，  
  内边距为20px。  
  字体大小，行高，最大宽度等可以继续在后面的样式中沿用  
 */
      article {
        font-size: 1rem;
        line-height: 1.625rem; /* 26px / 16px = 1.625  */
        max-width: 42.8125em; /* 685px / 16px = 42.8125em */
        margin: 0 auto;

        box-sizing: border-box;
        padding: 1.25em; /* 20px / 16px = 1.25 */
      }

      /*  
  当页面宽度在685px与600px之间时  
  调整内边距宽度为40px；  
 */
      @media all and (min-width: 600px) and (max-width: 685px) {
        article {
          padding: 2.5em; /* 40px / 16px = 2.5 */
        }
      }

      /*  
  当页面宽度大于或等于685px（符合最佳宽度条件）  
  将内边距设为0  
 */
      @media all and (min-width: 685px) {
        article {
          padding: 0;
          margin-top: 2.5em; /* 40px / 16px = 2.5 */
        }
      }
    style>
  body>
html>

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

相关阅读:
独立站SaaS系统站群模式怎么玩
 【教程】 iOS混淆加固原理篇
 代码随想录44——动态规划：完全背包理论基础、518零钱兑换II、377组合总和IV
unity -- UGUI插件 LoopScrollRect
为什么管理类硕士(MBA/MEM/MPA)报考会成为职场人的香饽饽？
Linux---使用nice、cpulimit 和 cgroups管理系统资源
 mysql buffer pool详解
 PMI-ACP（103：57- 103）
基于RNN和Transformer的词级语言建模代码分析 _generate_square_subsequent_mask
软件测试之项目实战，必须知道的事与测试面试项目测试流程......
原文地址：https://blog.csdn.net/weixin_41192489/article/details/126126966