实现自适应的方法

自适应

首先常见的两种布局是响应式布局（随着屏幕的大小可以进行不同的排版）与自适应布局（随着屏幕大小的改变只会进行相应的放大或缩小）

自适应的分类

1、响应式布局
描述：即根据固定像素大小，显示内容根据显示器分辨率决定，进行不同的排版。
适应性：适应大部分要求。

2、自适应布局
描述：随着不同大小及分辨率的屏幕只会进行相应的放大或缩小，只要宽高比例相同，其展示的内容就一致。
适应性：比较适合多数展示，移动端和后台管理也可以用，但没必要。

一、使用rem

rem的值是动态计算的，具体可以获取当前显示器的屏幕宽高，与一个标准值进行对比，其对比的值，就是rem的值。

值	描述
window.innerWidth	当前窗口的宽度
window.innerHeight	当前窗口的宽度

二、创建一个可使用的全局比例变量

可以在main.js文件中创建，方便直接使用

使用flex

对齐方式可以使用flex，包括左对齐，右对齐，水平居中，垂直居中，两端分布布局等。
flex常见样式

值	描述
justify-content: center	纵轴居中对齐（垂直对齐）
justify-content: flex-start	纵轴左对齐
justify-content: flex-end	纵轴右对齐
align-items: center	水平居中
align-items: baseline	水平基线对齐
flex-direction: column	置换横纵轴方向（修改为从上往下排列）
flex-wrap: wrap	允许换行（内容过多时，可以自动换行）
justify-content: space-between	两端均匀分布，左右不留空
justify-content: space-around	两端均匀分布，左右留空

三、使用媒体查询@media screen

@media 是CSS中的一种语法，用于在不同的媒体设备（如桌面计算机、平板电脑、手机）上应用不同的样式。@media 规则包含在CSS样式表中，通过添加不同的媒体属性来确定哪个设备上应该应用哪个样式。最常见的媒体查询语法是 @media screen。

@media screen and (max-width: 1828px) {
  /* 当屏幕小于或等于 1828px 时应用样式 */
  body {
    background-color: red;
  }
}
 
@media screen and (min-width: 1828px) {
  /* 当屏幕大于 1828px 时应用样式 */
  body {
    background-color: blue;
  }
}

上述代码表示，当屏幕的宽度小于或等于 1828px 时，背景颜色为 red；当屏幕宽度大于 1828px时，背景颜色变为 blue。
除了 @media screen，@media 还可以应用于其他媒体类型。下面是 @media 常见的媒体类型：

• @media screen：应用于显示器、平板电脑、智能手机等屏幕设备；
• @media print：应用于打印机、打印预览等设备；
• @media speech：应用于屏幕阅读器。

四、使用滚动

在设计图稿时就应该考虑到小屏幕的展示问题，但如果UI经验不足没有兼顾到，或者内容过多时，可以考虑使用滚动条，上下或者左右滚动。

五、避免宽高写死

尽量不要把宽高写死，防止用户放大比例或者在小屏幕上样式错乱。
可以按比例、百分比、或者flex去设置宽高，同事借助margin,padding去实现。