pc端自适应屏幕

媒体查询

• 默认设置body为粉色；
• 当屏幕宽度在480px到580px之间，body为绿色；
• 当屏幕宽度大于580px时，body显示为黄色；

<style>
body {
    
    
  background-color: pink;
}

@media screen and (min-width: 480px) {
    
    
  body {
    
    
    background-color: lightgreen;
  }
}
@media screen and (min-width: 580px) {
    
    
  body {
    
    
    background-color: yellow;
  }
}
</style>

采用定宽的版心

电商类、内容为主的网站几乎采用这种方式

1. 网易考拉、京东（1190px）
2. 知乎（1000px),果壳（1000px),网易新闻（1200px)

媒体查询+定宽

• 最优先适配最常见的分辨率，比如1366,1920，1440
• 在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏
• 花瓣网

@media screen and (min-width: 1529px)版心为1500px
@media screen and (min-width: 1276px) and (max-width: 1528px)版心为1248px
@media screen and (max-width:1275px)版心为996px

• 天猫

@media screen and (min-width:1260px)版心为1230px
@media screen and (max-width: 1260px)版心为982px

elementUI的响应式布局

• 参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
  

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .el-col {
    
    
    border-radius: 4px;
  }
  .bg-purple-dark {
    
    
    background: #99a9bf;
  }
  .bg-purple {
    
    
    background: #d3dce6;
  }
  .bg-purple-light {
    
    
    background: #e5e9f2;
  }
  .grid-content {
    
    
    border-radius: 4px;
    min-height: 36px;
  }
</style>

图片高度自适应

问题：如果使用背景图设置定高，不同尺寸的电脑会变形
方法一：可以使用img标签，只设置宽度，高度自适应，内部内容使用定位的方式
方法二：使用背景图的方式，使用媒体查询设置不同尺寸的高度

antdesign vue栅格布局

{
    
    
  xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
}