[开发工具]移动端布局

一:流式布局:

设置宽度为:100%;不固定像素

二:Flex布局

  display: flex;
  flex-direction: column;//主轴方向
  justify-content: center;//主轴居中
  flex-wrap: wrap;//是否换行
  align-content: center;//侧轴方向;多行
  align-items: center;//侧轴居中

三:rem布局

rem相对页面主体大小来决定(vsc插件:px to rem)

在vsc设置:vsCode 插件-cssrem 修改默认字体大小,设置=>cssrem

上面的基准值需要我们根据屏幕的大小去计算
比如我们拿到是1920分辨率屏幕的设计稿
那么基准值就等于1920/100=19.20px
也就是说1rem=19.20px

结合媒体查询:

  html {
    font-size: 10px;
  }
  @media screen and (min-width: 321px) and (max-width: 375px) {
    html {
      font-size: 11px;
    }
  }
  @media screen and (min-width: 376px) and (max-width: 414px) {
    html {
      font-size: 12px;
    }
  }
  @media screen and (min-width: 415px) and (max-width: 639px) {
    html {
      font-size: 15px;
    }
  }
  @media screen and (min-width: 640px) and (max-width: 719px) {
    html {
      font-size: 20px;
    }
  }
  @media screen and (min-width: 720px) and (max-width: 749px) {
    html {
      font-size: 22.5px;
    }
  }
  @media screen and (min-width: 750px) and (max-width: 799px) {
    html {
      font-size: 23.5px;
    }
  }
  @media screen and (min-width: 800px) {
    html {
      font-size: 25px;
    }
  }