流式布局
保证布局内每一级必须设置相对于父级百分比宽度，但设计稿一般都是按照固定宽度设计，内部图片都是固定大小，拉伸或者缩放时都会导致变形，虽然都够实现布局宽度上的自适应，但分辨率过高或者过低时都无法达到一个良好的显示效果，需要设置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>
响应式布局
媒体加载
通过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>
栅格布局
栅格布局是一种网格化的页面布局方式，它由行和列组成，可以使开发者更容易地创建多种不同大小和位置的元素，并通过调整这些元素的行和列来实现响应式设计。栅格布局适用于各种设备尺寸，使得页面在各种屏幕上都能够正常显示。 在栅格布局中，开发者可以定义一个网格容器，然后在容器中定义行和列，用来划分网格。每个网格可以放置一个或多个元素。通过调整每个元素所占据的行和列，以及它们之间的距离，可以实现各种页面布局效果。
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>
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>
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>
postcss-pxtorem
- 安装依赖
npm install postcss-pxtorem postcss-loader --save-dev
- 在项目中创建postcss配置文件.postcssrc.js，并添加如下配置：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基础字体大小
propList: ['*'], // 要转换的属性列表，这里表示所有属性都要进行转换
selectorBlackList: [], // 不需要转换的选择器，可以是字符串、正则表达式或者数组
unitPrecision: 5 // 转换后的rem值保留小数位数
}
}
}
- 在webpack.config.js中的module.rules中添加如下代码：
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: './path/to/postcss-config.js'
}
}
}
]
}
- 在CSS中使用像素单位（px），例如：
.container {
width: 320px;
font-size: 14px;
}
这样，在编译时，postcss-pxtorem会自动将像素单位转换为rem单位。对于上述样式代码，转换后的结果如下：
.container {
width: 20rem; /* 320 / 16 = 20 */
font-size: 0.875rem; /* 14 / 16 = 0.875 */
}
通过使用postcss-pxtorem插件，可以简化自适应布局的实现，并且不需要手动计算每个元素的rem值。
学习资料：点此下载