让每一像素都完美呈现：全面掌握页面自适应布局和分辨率调整！

作者：盐析白兔 | 2024-03-22 13:58:48

踩

流式布局

保证布局内每一级必须设置相对于父级百分比宽度，但设计稿一般都是按照固定宽度设计，内部图片都是固定大小，拉伸或者缩放时都会导致变形，虽然都够实现布局宽度上的自适应，但分辨率过高或者过低时都无法达到一个良好的显示效果，需要设置min-width和max-width来保证页面最基本的视觉效果

<!DOCTYPE html>
<html>
<head>
	<title>Flow Layout Example</title>
	<style>
	    .container {
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: space-between;
	    }

	    .item {
	        width: 30%;
	        margin-bottom: 20px;
	        background-color: #f2f2f2;
	        border: 1px solid #ccc;
	        padding: 10px;
	        box-sizing: border-box;
	    }
	</style>
</head>
<body>
	<div class="container">
		<div class="item">Item 1</div>
		<div class="item">Item 2</div>
		<div class="item">Item 3</div>

	</div>
</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

响应式布局

媒体加载

通过CSS3的媒体查询，根据不同的屏幕尺寸区间设置不同的样式效果，和不同尺寸的图片，来保证页面图片显示不失真，布局元素错乱。当分辨率过低元素数量众多时可控制子元素的显示和隐藏，以及其他效果组件的展示，比方横向tab展示变更为下拉选择 vscode

<!DOCTYPE html>
<html>
<head>

	<style>
	    .container {
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: space-between;
	    }

	    .my-image {
	        width: 30%;
	        margin-bottom: 20px;
	        background-color: #f2f2f2;
	        border: 1px solid #ccc;
	        padding: 10px;
	        box-sizing: border-box;
                background-image: url('image-large.jpg');
	    }
            /* 当分辨率在320px到768px之间时，将item元素的背景设置为image-small.jpg */
            @media screen and (min-width: 320px) and (max-width: 768px) {
             .item {
                background-image: url('image-small.jpg');
                font-size:12px


              }
            }

            /* 当分辨率大于768px时，将item元素的背景设置为image-large.jpg */
            @media screen and (min-width: 769px) {
              .item {
                background-image: url('image-big.jpg');
                 font-size:14px

              }
            }

            </style>
            </head>
            <body>
                    <div class="container">
                            <div class="item">hc 1</div>
                            <div class="item">hc 2</div>
                            <div class="item">hc 3</div>

                    </div>
            </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

栅格布局

栅格布局是一种网格化的页面布局方式，它由行和列组成，可以使开发者更容易地创建多种不同大小和位置的元素，并通过调整这些元素的行和列来实现响应式设计。栅格布局适用于各种设备尺寸，使得页面在各种屏幕上都能够正常显示。在栅格布局中，开发者可以定义一个网格容器，然后在容器中定义行和列，用来划分网格。每个网格可以放置一个或多个元素。通过调整每个元素所占据的行和列，以及它们之间的距离，可以实现各种页面布局效果。

iview 栅格布局

        <template>
          <div>
            <iv-row :gutter="16">
              <iv-col :span="8">
                <!-- 左边 -->
              </iv-col>
              <iv-col :span="8" :offset="4">
                <!-- 中间内容 -->
              </iv-col>
              <iv-col :span="4">
                <!-- 右侧内容 -->
              </iv-col>
            </iv-row>
          </div>
        </template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

flex原生栅格布局

Flex布局也可以用来实现栅格布局，它提供了一些灵活的属性来定义网格元素的排列和位置。相比于传统的栅格布局，Flex布局更加灵活，并且在响应式设计上具有更好的适应性。以下是Flex布局常用的一些属性

display：定义flex容器，默认值为flex。
flex-direction：定义主轴的方向，包括row、row-reverse、column、column-reverse四个值。
justify-content：定义主轴上网格元素的对齐方式，包括flex-start、flex-end、center、space-between、space-around五个值。
align-items：定义交叉轴上网格元素的对齐方式，包括flex-start、flex-end、center、baseline、stretch五个值。
flex-wrap：定义网格元素是否换行，默认情况下都不换行，可选nowrap、wrap、wrap-reverse三个值。
order：定义网格元素的显示顺序，默认为0，数值越小越靠前。
flex-grow：定义网格元素在剩余空间中所占的比例。
flex-shrink：定义弹性子元素的缩小比例。
flex-basis：定义弹性子元素的基准大小。
flex：是 flex-grow、flex-shrink 和 flex-basis 的简写形式。
align-self：定义单个网格元素在交叉轴上的对齐方式。

        <div class="container">
          <div class="item item-1">1</div>
          <div class="item item-2">2</div>
          <div class="item item-3">3</div>
        </div>

        <style>
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        /* flex-grow：1 子元素分配剩余空间*   0 有空间也不放大  2 大一倍/
        .item {
          flex-grow: 1;
          height: 100px;
          background-color: gray;
          margin: 10px;
          text-align: center;
          font-size: 30px;
          line-height: 100px;
        }

        .item-1 {
          flex-basis: 200px;
        }
        /* item-2 如何和他俩在一个主轴 始终会比他们大200px*/
        .item-2 {
          flex-basis: 400px;
        }

        .item-3 {
          flex-basis: 200px;
        }
        </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

grid 二维布局

容器属性

display：定义为网格容器。
grid-template-areas：指定网格模板中的区域名称。 -grid-template-columns：指定网格列的大小。 -grid-template-rows：指定网格行的大小。
grid-template：是 grid-template-areas、grid-template-columns 和 grid-template-rows 的简写形式。
grid-auto-columns：指定未显式指定宽度的列的大小。
grid-auto-rows：指定未显式指定高度的行的大小。
grid-auto-flow：指定如何安排未被显式布局的项。
grid-column-gap：设置网格行之间的间距。
grid-row-gap：设置网格列之间的间距。
grid-gap：是 grid-row-gap 和 grid-column-gap 的简写形式。

项目属性

grid-area：是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写形式。
grid-column-start：指定一个项目的列开始位置。 grid-column-end：指定一个项目的列结束位置。
grid-row-start：指定一个项目的行开始位置。
grid-row-end：指定一个项目的行结束位置。
grid-column：是 grid-column-start 和 grid-column-end 的简写形式。
grid-row：是 grid-row-start 和 grid-row-end 的简写形式。
grid-area：指定项目应该放置在哪个网格区域中。
justify-self：定义单个项目在其列中的对齐方式。
align-self：定义单个项目在其行中的对齐方式。
place-self：是 align-self 和 justify-self 的简写形式。

zoom 或者 transform :scale()

可以将一个元素及其子元素的所有尺寸都放大或缩小。默认的缩放值是1，表示不进行任何缩放。如果将缩放值设置为2，则元素及其子元素的所有尺寸都会变为原来的两倍；如果将缩放值设置为0.5，则元素及其子元素的所有尺寸都会变为原来的一半。 zoom在兼容性上存在一些问题，目前火狐浏览器是不支持，其他浏览器支持，存在一定的风险性

实现方式不同：transform: scale() 是通过 CSS3 的 transform 属性进行缩放，而 zoom 是通过浏览器提供的缩放功能实现的。
兼容性不同：transform: scale() 属性在大部分现代浏览器中得到支持，而 zoom 属性只在 IE 浏览器和 Edge 浏览器中得到支持。
对布局影响不同：使用 transform: scale() 属性进行缩放时，元素的尺寸、位置等属性会改变，但对周围元素的布局不会产生影响。而使用 zoom 属性进行缩放时，元素及其周围的元素都会被缩放，因此可能会影响整个页面的布局。

rem

rem是CSS3新增的一个相对单位，它是相对于根元素（html元素）的字体大小来计算的。rem的全称是"root em"，意为"根em"。

使用rem作为长度单位，可以实现页面的自适应布局。当用户调整浏览器窗口大小或者在移动设备上旋转屏幕时，页面中所有元素的大小都会根据当前根字体大小的比例进行缩放，从而适应不同的屏幕尺寸和设备类型。

使用rem作为单位有以下优点：

相对于像素单位（px）更具有可扩展性，可以适应各种不同分辨率的设备。
相对于百分比单位（%）更加直观，不需要手动计算每个元素的百分比值。
支持低版本浏览器，如果无法识别rem单位，也可以提供降级方案。

们将根元素字体大小设置为页面宽度的百分之一，即font-size: calc(100vw / 100)。然后，在样式表中使用rem作为单位对元素进行设置，例如.box { width: 20rem; height: 10rem; font-size: 1.6rem; }。这样，当浏览器窗口大小改变时，根元素字体大小也会随之改变，从而实现页面的自适应布局。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Rem布局示例</title>
  <style>
    /* 设置根元素字体大小 */
    html {
      font-size: calc(100vw / 100);
    }

    /* 使用rem设置元素属性 */
    .box {
      width: 20rem;
      height: 10rem;
      font-size: 1.6rem;
      border:1rem solid #00000
    }
  </style>
</head>
<body>
  <div class="box">这是一个自适应布局的示例</div>
</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

postcss-pxtorem

安装依赖

npm install postcss-pxtorem postcss-loader --save-dev
1

在项目中创建postcss配置文件.postcssrc.js，并添加如下配置：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 基础字体大小
      propList: ['*'], // 要转换的属性列表，这里表示所有属性都要进行转换
      selectorBlackList: [], // 不需要转换的选择器，可以是字符串、正则表达式或者数组
      unitPrecision: 5 // 转换后的rem值保留小数位数
    }
  }
}
1
2
3
4
5
6
7
8
9
10

在webpack.config.js中的module.rules中添加如下代码：

{
  test: /.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: './path/to/postcss-config.js'
        }
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在CSS中使用像素单位（px），例如：

.container {
  width: 320px;
  font-size: 14px;
}
1
2
3
4

这样，在编译时，postcss-pxtorem会自动将像素单位转换为rem单位。对于上述样式代码，转换后的结果如下：

.container {
  width: 20rem; /* 320 / 16 = 20 */
  font-size: 0.875rem; /* 14 / 16 = 0.875 */
}
1
2
3
4

通过使用postcss-pxtorem插件，可以简化自适应布局的实现，并且不需要手动计算每个元素的rem值。

学习资料：点此下载

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/288606