rem适配两种方案——实战篇

死记硬背

用屏幕总宽度/划分等份数=html字体大小
1rem=html字体大小
页面元素rem计算公式：页面元素的px / html字体大小

rem适配布局包括两种：

1. less+rem适配+媒体查询 屏幕划分等数为15 屏幕尺寸大小默认为750px
2. rem适配+flexible.js 屏幕划分等数为10 屏幕尺寸大小默认为750px

less+rem适配+媒体查询

原理

使用rem适配的原理，

1. 目的：为了实现屏幕大小的改变，里面的页面元素大小也随之发生改变，页面元素包括字体、宽高等。
2. 而使用rem适配就可以满足这一目标，利用rem本质上作为数值单位，我们知道就像长度单位也是一样，1m=100cm,他们的单位不同，但是表示的设置相同。也就是当我们见到m这个单位，我们立刻就意识到大小等于100cm。
3. 所以rem也是，我们看到rem就直接认定为html得的font-size大小即可。而为了实现html的font-size大小，所以利用屏幕尺寸 / 划分屏幕等份数，这里我们使用的划分屏幕等份数=15，这里公式不用多想，死记即可！

使用less原理

因为less最有别于css的好处是方便加减乘除的直接运算，我们知道在使用rem适配的时候rem的大小本质就是计算html的font-size，也就是屏幕尺寸 / 屏幕划分等数，这里用到了除法运算；并且还利用屏幕尺寸 / html的font-size来得到页面元素的各个值，如：width：100px;假如此时html的font-size为50px=1rem，那么得到的结果就为width：2rem；这里也用到了除法运算 也就用到了less！

媒体查询

使用媒体查询，里面可以放不同的屏幕放不同的font-size大小，那么也就实现了rem的不同大小，进而也就实现了随着不同的屏幕尺寸，页面元素大小也发生改变。屏幕总宽度/划分等份数=html字体大小。

@no:15;
@media screen and (min-width:320px){
    html{
        font-size: (320px / @no);
    }
}
@media screen and (min-width:360px){
    html{
        font-size: (360px / @no);
    }
}
@media screen and (min-width:375px){
    html{
        font-size: (375px / @no);
    }
}
@media screen and (min-width:384px){
    html{
        font-size: (384px / @no);
    }
}
@media screen and (min-width:400px){
    html{
        font-size: (400px / @no);
    }
}
@media screen and (min-width:414px){
    html{
        font-size: (414px / @no);
    }
}
@media screen and (min-width:424px){
    html{
        font-size: (424px / @no);
    }
}
@media screen and (min-width:480px){
    html{
        font-size: (480px / @no);
    }
}
@media screen and (min-width:540px){
    html{
        font-size: (540px / @no);
    }
}
@media screen and (min-width:720px){
    html{
        font-size: (720px / @no);
    }
}
@media screen and (min-width:750px){
    html{
        font-size: (750px / @no);
    }
}

@import
将样式文件引入到另一个样式文件中。本案例是将公共样式文件引入到另一个样式文件中，这里的文件都是less文件。

@import "common";

注意：固定定位必须设置宽度

这里有一个bug：less文件为什么编译出来的css文件不能进行除法运算结果，需要加小括号：

  height: (88rem / @baseFont);

搜索框布局思路：一个盒子，里面子元素左右两边固定，中间自适应，flex布局，两边固定的子元素使用margin

@baseFont:50;
.search-content {
  display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  height: (88rem / @baseFont);
  background-color: #ffc001;

  .classify{
  width: (44rem / @baseFont);
  height: (70rem / @baseFont);
  background: url(../images/classify.png) no-repeat;
  background-size:(44rem / @baseFont) (70rem / @baseFont);
  margin: (11rem / @baseFont) (25rem / @baseFont)  (7rem / @baseFont) (24rem / @baseFont);
}
.search{
  flex:1;
  input{
    box-sizing: border-box;
    outline: none;
    border: 0;
    width: 100%;
    height: (66rem / @baseFont);
    border-radius: (33rem / @baseFont);
    margin-top: (12rem / @baseFont);
    padding-left: (55rem / @baseFont);
    font-size: (25rem / @baseFont);
    color: #757575;
  } 
}
.login{
  width: (75rem / @baseFont);
  height: (70rem / @baseFont);
  line-height: (70rem / @baseFont);
  margin: (10rem / @baseFont);
  font-size: (25rem / @baseFont);
  color: white;
  text-align: center;
}
}

 <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="text" class="search" placeholder="厨卫保暖季">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>

banner部分 使用一个盒子，里面的图片设置宽度100%，高度100%

.banner{
  width: (750rem / @baseFont);
  height: (368rem / @baseFont);
  img{
    width: 100%;
    height: 100%;
  }
}

 <div class="banner">
        <img src="./upload/banner.gif" alt="">
    </div>

ad部分：父盒子使用flex布局，平分，给img设置宽度100%

.ad{
  display: flex;
  a{
    flex:1;
    img{
      width: 100%;
    }
  }
}

<div class="ad">
        <a href="#"><img src="./upload/ad1.gif" alt=""></a>
        <a href="#"><img src="./upload/ad2.gif" alt=""></a>
        <a href="#"><img src="./upload/ad3.gif" alt=""></a>
    </div>

先不要给大盒子添加margin 具体到里面的时候在进行细化 省的做重复工作
设置固定宽高 a标签实现 float布局

<nav>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
        <a href="#"><img src="./upload/nav1.png" alt=""><span>爆款手机</span></a>
    </nav>

nav{
  width: 750rem / @baseFont;
  a{
    float: left;
    width: (150rem / @baseFont);
    height: (150rem / @baseFont);
    text-align: center;
    img{
        display: block;
        width: (82rem / @baseFont);
        height: (82rem / @baseFont);
        margin: (10rem / @baseFont) auto 0;     
    }
    span{
      font-size: (25rem / @baseFont);
      color: #333;
    }
  }
}

flexible.js的优势就是不需要媒体查询了 自动监测当前屏幕就可以实现不同屏幕下的html字体大小
px转化为rem，不需要运算，使用cssrem插件即可，注意重启！
flexible.js计算的html的font-size是利用屏幕尺寸 / 10，也就是把屏幕尺寸分成了10等份。
注意：因为我们设置的默认展开的时候是使用750px的尺寸，但是flexible.js是通过自动检测当前屏幕来觉里面的元素属性大小，所以我们需要设置最大的html的font-size大小

使用cssrem 但是找不到设置html的font-size,rem的地方settings.json找不到。可直接从vscode的设置中查找cssrem来设置font-size为75，因为750px / 10
这样做的好处是html的font-size从75大小就开始发生变化

flexible是根据当前的屏幕来给你划分十等份 从js文件可知:

修改flexible默认的html字体大小 使用媒体查询 因为fleible.js默认根据当敲屏幕来设置font-size，所以我们要设置刚开始展开时候的情况，这里加上！important 提高权重，否则没用。

flex盒子不用担心外边距合并的问题
![](https://img-blog.csdnimg.cn/direct/5d5cdf9c723244b9b5307689e4641b7a.png