Less语言与rem单位结合的灵活布局方案：第三部分 - rem适应性布局方法

（1）：技术方案1 less+媒体查询+rem

（01）：媒体查询的示例

01：设计稿的尺寸宽度：大部分为 640px  750px  1080px
        /* 因为设计稿为750px，然后我们划分为15等份 就是750px/15=50px  */
        /* 因为要自适应640px，也是我们划分为15等份 就是640px/15=42.66px  */
        @media screen and (min-width: 640px) {
            html {
                font-size: 42.66px;
            }
        }

        @media screen and (min-width: 750px) {

            /* 一个100px*100px的页面元素，在750屏幕下，转化为rem就是100px/50px = 2rem */
            html {
                font-size: 50px;
            }
        }

        div {
            width: 2rem;
            height: 2rem;
            background: pink;
        }

        /* 
        1：首先我们选择一套标准 一般以750px为准(屏幕尺寸有640px 750px等)
        2：我们用屏幕的尺寸 除以 我们划分的份数，（一般是15，20，10） 得到html里面的文字大小 
        但是我们知道不同的屏幕的尺寸是不一样的
        比如： 750px / 15 = 50px ;  640px / 15 = 42.66px
        所以以750px屏幕尺寸为准，它的html文字大小为50px，用于计算页面元素的rem值
        
        3：页面元素的rem值 = 页面元素在 750像素下px值 / html 里面的文字大小
        页面元素为84px 以750px屏幕尺寸为标准 划分15等份
        页面元素的rem值 = 84px / 50px = 1.68rem
         */

（02）：common.less的准备

01：// 设置常见的屏幕尺寸，修改里面的html文字大小
// 里面有320px，360px,375px,384px,400px,414px,424px,480px,540px,720px,750px
// 我们划分为15份
// 因为我们在PC端也可以打开苏宁移动端首页，我们默认html为50px，注意这一句话下载最前面
// 定义一个份数的变量
@num: 15;

html {
    font-size: 50px;
}

//320px屏幕的
@media screen and (min-width:320px) {
    html {
        font-size: 320px / @num;
    }
}

//360px屏幕的
@media screen and (min-width:360px) {
    html {
        font-size: 360px / @num;
    }
}

// 375px iphone 678
@media screen and (min-width:375px) {
    html {
        font-size: 375px / @num;
    }
}
以下省略，待补上


02：
// 引入comomn.less 文件
//@import 导入的意思， 可以样式到另一个样式文件之中
//link 是把一个样式导入html页面之中
@import "common";

（03）：页面的书写

01：先对body进行定义样式：
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
    background: #ccc;
    min-height: 1000px;
}

.w {
    width: 93.33%;
    margin: 0 3.33%;
}

img {
    /* 去除图片底下的空隙 */
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: #666;
    /* 点击高亮我们在需要清除清除 设置为transparent 透明 */
    -webkit-tap-highlight-color: transparent;
}

input {
    /* 在移动端浏览器默认的外观在ios上加这个属性才能给按钮和输入自定义样式 */
    -webkit-appearance: none;
}

img,
a {
    /* 禁止长按页面的时候，弹出菜单 */
    -webkit-touch-callout: none;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

（2）：技术方案2:fiexble.js + rem（推荐使用）

01：首先引入lib-flexible-2.0里面的index.min.js；:
02：然后利用VScode px转化为rem插件 ---cssrem；
操作：设置-打开设置（右边的第一个设置）--   "cssrem.rootFontSize": 75
因为是草稿是750px（屏幕），然后插件划分为10等份，所以设置为75px
03：设置body的样式
body {
    background-color: #f7f7f7;
    padding-bottom: 2rem;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    /* 因为是划分为10等份  750px / 10 = 75(html字体大小） */
    width: 10rem;
    line-height: 1.5;
    font-family: Arial, Helvetica, STHeiTi, sans-serif;
    background: #f2f2f2;
}:
04：/* 如果屏幕超过了750px，那么我们就按照750px设计稿来走，不会让我能页面超过750px */
@media screen and (min-width:750px) {
    html {
        font-size: 75px !important;
    }
}
05：搜索模块的居中
/* 搜索 */
.search-contont {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    height: 1.173333rem;
    width: 10rem;
    background: #FFC001;
}
06：背景图片的注意点：应该考虑一个图片的话就和盒子一样大，要是精灵图就需要考虑缩放
.login {
    width: .48rem;
    height: .8rem;
    margin: .14rem .333rem .1333rem;
    background: url('../images/02.png') no-repeat;
    background-size: .48rem .8rem;
}