十五、less语法、移动端浏览器及内核分析、viewport、移动端适配方案、移动端重置样式、移动端特殊处理、移动端其他适配方案设备像素、独立像素和css像素、

一、less语法

1、注释

less共有两种注释风格。

标准的CSS注释，多行注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在less源文件中，编译后被省略。

// 单行注释，这种只会在less文件中存在，不会编译到css里面去
/* 注释内容，可以被编译到css文件中去的 */

2、导入

@import "导入文件的地址";

.css 后缀名不能省略，引入 .less 文件可以省略扩展名

3、变量

• 定义

@变量名:值;

• 使用

​ 变量以@开头,变量名与变量值之间用【冒号】分隔

 ```less

width: @变量名;
```

​ 如果变量需要镶嵌在字符串之中，就必须需要写在@{}之中

// 定义变量
@w:1000px;
@dir:top;
.box {
    width: @w;
    height: @w;
    background-color: aqua;
    border-@{dir}:1px solid red;
}
.box1 {
    width: @w;
    height: @w;
    background-color: aqua;
}

4、混合

（1）将一个定义好的class A引入到另一个class B中

.box1 {
    width: @w;
    height: @w;
    background-color: aqua;
}
// 在classA中引入classB
.box2 {
    .box1;
}

（2）混入参数但未设置默认值

// 定义类的时候混入了参数，但是没有设置默认值，那么在使用时就必须传入参数
.box3(@wi) {
    width: @wi;
}

.box4 {
    .box3(300px);
}

（3）混入参数并且设置了默认值

// 定义类的时候混入了参数，并且设置默认值
.box5(@wi:500px) {
    width: @wi;
}

.box6 {
    // 使用时如果没有传递参数的值，那么会直接使用默认值
    .box5;
}

.box7 {
    // 使用时如果传递了参数的值，那么会直接使用我们自己传递的值
    .box5(800px);
}

（4）使用@arguments来引用所有传入的变量

.box-shadow(@h:5px,@v:10px,@b:20px,@c:red) {
    box-shadow: @arguments;
}

.box8 {
    // 调用时不传递参数使用的是默认值
    // .box-shadow;
    
    // 调用时如果依次传递了参数，会进行一个一个的替换
    // .box-shadow(10px,20px,30px,rgba(0,0,0,0.5));
    // .box-shadow(10px,20px);
    
    // 如果只修改其中一个参数的值，那么使用@变量名：值的形式进行修改
    .box-shadow(@c:rgba(0,0,0,0.5));
}

5、嵌套

（1）选择器嵌套

.wrap {
    height: 60px;
    background-color: pink;
    .left {
        float: left;
        a {
            float: left;
            color: aqua;
            font-size: 12px;

        }
        span {
            float: left;
            width: 1px;
            height: 15px;
            background-color: red;
        }
    }
    .right {
        float: right;
        
    }
}
.inner {
    width: 1200px;
    margin: 0 auto;
}

（2）在嵌套的代码块内，使用&引用父元素

a {
    float: left;
    color: aqua;
    font-size: 12px;
    &:hover {
        color: yellow;
    }

}

6、继承

样式的继承通过extend伪类来实现。

混合可以将一个定义好的class A引入到另一个class B中，从而实现class B继承class A中的所有属性。这样编译原理是把代码copy一份过来，编译后的CSS中依然会存留大量的冗余CSS代码，为了避免这一点，我们可以使用extend伪类来实现样式的继承使用。

.box9 {
    // 继承，这里编译后的css中box1和box9是以群组选择器的形式来写的，节省代码量
    &:extend(.box1);
}

7、运算

任何数字、颜色或者变量都可以参与运算；在运算中以()进行优先级计算

.box10 {
    width: 200px + 10px * 2;
    height: calc(200px + 100px);
    // less运算中只认识从左到右第一次出现的单位，其他的进行数字运算
    width: 100% - 20px * 3;   //40%!!!!!!!       

}

###二、移动端浏览器及内核分析

手机浏览器是运行在手机上的浏览器，目前手机浏览器需要 Java 或智能手机的系统（如苹果的 IOS 系统以及Android 平台等）支持。

手机浏览器种类：
UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，2345浏览器等。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，都是基于开源内核Webkit 进行二次开发的。

二、viewport

1、什么是viewport?

指的是移动设备浏览器中放置页面的一个虚拟的窗口即用来显示网页的那一部分区域，相当于PC端浏览器可视区

2、viewport的作用

在移动端开发中，常将视口抽象划分为布局视口、视觉视口和理想视口。
布局视口，移动设备默认的viewport即布局视口，宽度介于768px ~1024px之间，不进行缩放的话，比浏览器窗口要大。

视觉视口：视觉视口是用户正在看到的网页的区域，即屏幕宽度。

理想视口：布局视口对用户不友好，没有考虑到手机尺寸，所以苹果公司引入理想视口概念，那些基于理想视口而设计的网站，不需要用户手动缩放，也不会出现横向滚动条，网站的所有内容都可以正常的呈现给用户。

3、viewport的设置

<meta name="viewport" content="initial-scale=1.0,
width=device-width, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no