什么是自适应布局如下：
自适应布局是一种根据不同的设备屏幕分辨率进行布局的方式，它为不同的屏幕分辨率定义了不同的布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。当屏幕分辨率发生变化时，页面中元素的位置会变化而大小不会变，从而保持在不同渲染设备下浏览效果的最优化，给用户一致的浏览体验。然而，自适应布局的劣势在于，为了适应不同的设备，同一个页面往往需要开发不同页面，会增加成本，尤其当页面需求发生变化时，会涉及多套代码的改动。
自适应布局的实现通常通过使用媒体查询(Media Queries)技术，根据屏幕宽度等条件应用不同的CSS样式规则。例如，可以通过设置不同的背景颜色来区分屏幕宽度，实现自适应布局的应用方式案例。此外，自适应布局的特点还包括使用百分比、auto等尺寸值，以便元素尺寸能够相对父对象或自动计算，从而实现与浏览器尺寸的关联，达到自适应的效果。
综上所述，自适应布局是一种根据设备屏幕分辨率调整页面布局的技术，通过定义多个静态布局来适应不同的屏幕分辨率范围，同时利用媒体查询和适当的尺寸值来实现布局的自适应性。
一、
自适应布局之高度自适应：
意思就是:高度自适应就是把每个模块设置为绝对定位，然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，然后中间模块的高度就自适应了
看代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.toubu {
width: 100%;
height: 120px;
position: absolute;
background-color: greenyellow;
}
.maini {
position: absolute;
width: 100%;
top: 120px;
bottom: 120px;
background-color: pink;
height: auto;
}
.footers {
position: absolute;
bottom: 0;
width: 100%;
height: 120px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="toubu">120px</div>
<div class="maini">自适应</div>
<div class="footers">120px</div>
</body>
</body>
</html>看一下效果：
第一个是缩小的高度：中间粉色是自适应
再看一下放大的高度效果：
自适应布局之宽度自适应：
宽度自适应有三种方法，分别是用绝对定位；利用margin，中间模块先渲染；自身浮动。
第一种：利用绝对定位来设置宽度自适应布局 ：
1.针对自适应模块使用绝对定位，在把left和right设置为左右两列的宽，其实原理和高度自适应一样，另外左右两列分别左右浮动
不多说看代码和效果：
<body>
<div class="left">200px</div>
<div class="main">自适应</div>
<div class="right">200px</div>
</body>html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.left,
.right {
width: 200px;
display: inline;
height: 100%;
background-color: greenyellow;
}
.left {
float: left;
}
.right {
float: right;
}
.main {
position: absolute;
left: 200px;
right: 200px;
height: 100%;
background-color: pink;
display: inline;
}效果如下：
2 利用margin，中间模块先渲染来设置宽度自适应布局:
中间一列优先渲染的自适应三列布局，优先渲染（加载）的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div，left和right模块都向左浮动，然后对自适应的div（就是父div里的子div）设置margin：0 200px，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px.
注意一下:自适应的div必须放在left和right前面且包含在一个父div里
<body>
<div class="main"> <!--看清楚，这里用一个父div包住-->
<div class="content">自适应</div>
</div>
<div class="left">200px</div>
<div class="right">200px</div>
</body>
html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.main {
width: 100%;
height: 100%;
float: left;
}
.main .content {
margin: 0 200px;
background-color: pink;
height: 100%;
}
.left,
.right {
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
}
.left {
margin-left: -100%; //important
}
.right {
margin-left: -200px; //important
}
3.利用自身浮动来设置宽度自适应布局
中间列设置margin属性，就是把左右列分别左右浮动。注意：使用这个方法布局自适应的话，必须把自适应的那一列在html中放在left和right后面
看代码：
<body>
<div class="left">200px</div>
<div class="right">200px</div>
<div class="main">自适应</div>
</body>html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.main {
margin: 0 200px;
height: 100%;
background-color: pink;
}
.left,
.right {
width: 200px;
height: 100%;
background-color: greenyellow;
}
.left {
float: left;
}
.right {
float: right;
}
常见页面的布局方式有:
静态布局 （px布局，就是固定其高宽，不论页面怎样放大缩小，其占领的依旧是，使用px固定了的高宽）
流式布局（Liquid Layout） 主要的划分区域的尺寸使用百分数（100%）（搭配min-*、max-*属性使用）
自适应布局（Adaptive Layout-媒体查询布局） 即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围
响应式布局（Responsive Layout） 检测窗口大小利用bootstrap布局
弹性布局（rem/em布局）css3 rem
自适应布局：
@media screen and (min-width: 768px) {
.block{
width: 680px;
background-color: yellow;
}
}
@media screen and (min-width: 1024px) {
.block{
width: 768px;
background-color: blue;
}
}
@media screen and (min-width: 1580px) {
.block{
width: 1190px;
background-color: red;
}
}
响应式布局
响应式布局也会用到媒体查询，前面我们提到自适应布局是在不同的屏幕下看到的页面布局是一样，如果屏幕太小的话，即使对小屏幕进行适配，会发现页面还是过于拥挤，而响应式正式为了解决这个问题，它可以识别屏幕大小，还是根据屏幕大小调整页面的布局。
响应式布局的特点
- 屏幕大小变化，元素的大小和位置也会发生改变。
- 能同时适应pc和移动端，在不同屏幕大小都有一个良好的布局
响应式布局的原理
响应式布局的三个原则：移动优先，@media媒体查询，流式布局（也称为液体布局）。其中首要的就是移动优先，移动优先指的是优先设置移动端（也就是小屏的布局），然后针对不同屏幕使用渐进增强
添加元标签:
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
<meta name="viewport" content="width=device-width, initial-scale=1">
媒体加载：
通过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 的简写形式
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>第三方插件：适合vue3
安装依赖：npm install lib-flexible postcss-pxtorem --save
全局导入main.js：import 'lib-flexible';
在项目中创建postcss配置文件.postcssrc.js，并添加如下配置：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基础字体大小
propList: ['*'], // 要转换的属性列表，这里表示所有属性都要进行转换
selectorBlackList: [], // 不需要转换的选择器，可以是字符串、正则表达式或者数组
unitPrecision: 5 // 转换后的rem值保留小数位数
}
}
}在webpack.config.js中添加如下代码：
导入：
import postcssPxtorem from 'postcss-pxtorem';
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postcssPxtorem({
rootValue: 37.5, // 根字体大小，根据设计稿宽度的一部分设置
propList: ['*'], // 需要转换的属性列表，* 代表全部
mediaQuery: true, // 允许在媒体查询中转换px
minPixelValue: 2, // 小于这个值的px不会转换为rem
}),
],
},
},
});在inhtml文件里面meta标签里面：
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"在全局样式中添加以下CSS:
/* 基本样式 */
body {
font-size: 14px;
}
/* 移动端样式 */
@media (max-width: 767px) {
body {
font-size: 12px;
}
}
/* 平板样式 */
@media (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 14px;
}
}
/* PC 端样式 */
@media (min-width: 1025px) {
body {
font-size: 16px;
}
}第三方插件：适用vue2
安装postcss-pxtorem插件
npm install postcss-pxtorem -D如果运行项目后报错 PostCSS plugin postcss-pxtorem requires PostCSS 8.
需要降低 postcss-pxtorem 的版本
卸载默认安装的版本
npm uninstall postcss-pxtorem
安装指定版本
npm i postcss-pxtorem@5.1.1
npm i lib-flexible番外: 不推荐 postcss-px2rem插件. 据测试, 若同时安装了vant插件, main.js导入vant样式文件会报错, 暂不细究原因.
2. 插件的基本配置
2.1 方法一
(vue.config.js文件中添加配置)
const { defineConfig } = require('@vue/cli-service')
const pxToRem = require('postcss-pxtorem')
const postcss = pxToRem({
rootValue: 16, // 表示根元素字体大小或根据input参数返回根元素字体大小
propList: ['*'], // 可以从px更改为rem的属性, 通配符*表示启用所有属性
selectorBlackList: ['.norem'] // 过滤掉.norem开头的class，不进行rem转换
})
module.exports = defineConfig({
transpileDependencies: true,
css: {
// 使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps
sourceMap: false,
// css预设器配置项
loaderOptions: {
postcss: {
postcssOptions:{
plugins: [
postcss
]
},
}
}
},
})mian.js
import Vue from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'
import router from './router'
Vue.config.productionTip = false
import 'lib-flexible';
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
2.2 方法二(推荐)
(根目录下创建postcss.config.js文件)
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 19, // 表示根元素字体大小或根据input参数返回根元素字体大小
propList: ['*'], // 可以从px更改为rem的属性, 通配符*表示启用所有属性
selectorBlackList: ['.norem'] // 过滤掉.norem开头的class，不进行rem转换
}
}
}3. 自定义配置rem基数
3.1 新建rem.js
// 配置基本大小
let baseSize = 19;
// 设置 rem 函数
function setRem () {
//当前页面宽度相对于1920px屏幕宽的缩放比例，可根据自己需要修改。
let scale = document.documentElement.clientWidth / 1920;
//设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
setRem(); //初始化
// 适配 - 重置函数
function resetRem (num) {
if(num) baseSize = Number(num);
setRem();
}
window.resetRem = resetRem; // 全局可调用(其他方式也可)
// 改变窗口大小时重置 rem
window.onresize = function () {
setRem()
};3.2 引入rem.js
import './utils/rem.js'; //在main.js中引入rem.js注意项:
- 标签中直接定义的 width和height进行不了转换, 例如img标签.
- 标签中style属性的width和height是可以被转换的.
- px转换成rem
- rem根据屏幕大小重置基数改变大小
希望能帮到大家谢谢
扫一扫
2877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
