实现网页自适应

网页自适应

1. 应用场景：仅少量页面有自适应需求 可直接在.less里添加
2. 代码：

// 自适应适配1080-1920px
@media screen and (min-width: 1080px) and (max-width: 1920px){
  .title{
    font-size: 25px;
    line-height: 30px;
  }
  .time{
    right: 30px;
    top: -2px;
    font-size: 25px;
  }
  .typetext{
    left: 20px;
    font-size: 25px;
  }
  .content_title {
    margin: 20px 0;
  }
}

3. 理解：

• 自适应设置没有效果？
  搜索半天是因为min-width那里没有写‘px’这个单位！

  <!-- 一定记得写单位啊！ -->
  @media screen and (min-width: 1080px) and (max-width: 1920px)
  

• 自适应里的样式何时起作用，是否需要重复书写？
  在屏幕是1080px-1920px之间，@medai里的样式优先级更高，即与上面通用样式重复的优先展示media里的，其余的依然沿用通用样式。
• 自适应其他写法？
  如果项目整个需要做自适应，可以全局配置，不在使用px单位，可以使用em,rem