less语法 + rem适配布局

一、less语法：

一、less语法之中的变量

less语法：是一门CSS扩展语言，也是CSS预处理器
它在CSS的语法基础上，引入了变量，Minxin（混入），运算以及函数等功能，大大简化了CSS编写
注：第一次使用的时候需要下载less，之后安装less插件-Easy LESS - 安装后，一保存less文件，自动生成一个css文件，直接导入css文件就好

// 1：less变量   @变量名：值    （不能数字开头，不能加特殊字符，区分大小写）
// 定义一个粉色的变量 
@color: pink;
@font14: 14px;
//2：less语法的引用
div {
    color: @color2;
    font-size: @font14;
}

二、less语法之中的嵌套

//3:嵌套
.header {
    width: 200px;
    height: 200px;
    background: yellow;

    // 子元素的样式直接写在父元素里面就好
    a {
        color: blue;

        // 注意：若是没有加&,则解析为父选择器的后代，加了&后，便是父元素自身或者父元素的伪类
        &:hover {
            color: pink;
        }
    }
}

三、less语法之中的运算

//4:运算 + - * /   
注意：两个数参与运算，最后以有单位的为主。两个数都有单位，以前面的单位为准
@border: 5px + 5; 

.box {
    width: 100px - 20;
    height: 100px /2;
    border: @border solid red;
}

二、媒体查询：

01：rem单位：一个相对单位，
    类似em，em是相对于父元素的字体大小 假如父元素的字体为12px 子元素设置的宽为10em = 120px。
    rem的话是相对于html的字体大小来计算的: 假如html的字体为12px 子元素设置的宽为10rem = 120px。:
02：rem的优点：可以通过修改html的字体大小，来改变页面中元素的大小可以整体控制
03：媒体查询：（Media Query)  可以根据瀑屏幕的大小来设置不同的尺寸
    语法：
    @media screen and (min-width: 320px) and (max-width: 374px) {
            html {
                font-size: 60px;
            }
        }
        
04：当我们屏幕大于等于640px以上，我们让div一行显示2个；
        当我们屏幕小于640px以上，我们让div一行显示1个；
        引入资源就是针对不同的屏幕尺寸调用不同的css文件 */
    <link rel="stylesheet" href="./css/stylecss.320.css" media=" screen and (min-width: 320px) ">
    <link rel="stylesheet" href="./css/style640.css" media=" screen and (min-width: 640px) ">

三、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;
}