本节用到的工具 less

使用文档地址： http://www.bootcss.com/p/lesscss/

ps 快捷键

ctrl+n 新加文件

ctrl+c
ctrl+v
ctrl+x

ctrl + '+' 发大
ctrl + '-' 缩小

空格选择

ctrl + r 显示隐藏标尺

移动端

视口

可视区的尺寸
默认的移动端980px（css像素）

px 像素

css像素物理像素像素比

<meta name="viewport" content="width">

width

number | device-width

像素比

window.devicePixelRatio

1px(css像素) 占n个物理像素 , n就是像素比

一般的电脑像素比是1, 一个css像素对应一个物理像素

适配

移动端分辨率很多，你不可以每个分辨率都出一张设计图，需要适配

百分比适配

rem适配

rem是长度单位，动态的长度单位，根据html的font-size的来决定的，如果你html的font-size是10px; 1rem=10px;

r代表是root，就是html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script>
    (function(){
        var html = document.documentElement;
        var htmlW = html.clientWidth;
        html.style.fontSize = htmlW/16 + 'px';//相当于将html分成16分, 1分就是1rem
    })();
    </script>
<style>

html{
    height: 100%;
}
body{
    margin: 0;
    height: 100%;
}
div{
    /*高度百分比必须要html, body都设置100%*/
    width: 4rem;

    height: 100px;
    float: left;
}
div:nth-child(1){
    background: #111;
}
div:nth-child(2){
    background: #222;
}
div:nth-child(3){
    background: #333;
}
div:nth-child(4){
    background: #444;
}
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

less 可以计算尺寸，然后生成css文件

@r:20.75rem; //定义变量
.top-header{
    height: 48/@r;//使用变量
    background: #ef3239;
    position: relative;

}
.tasks{
    position: absolute;
    left: 0;
    top:0;
    width:58/@r;
    text-align: center;
    display: block;
    line-height: 44/@r;
}
.tasks i{
    height: 14/@r;
    color: #fff;
}
.refresh{
    position: absolute;
    right: 0;
    top:0;
    width:58/@r;
    text-align: center;
    display: block;
    line-height: 44/@r;
}
.refresh{
    color: #fff;
}
.title{
    display: block;
    text-align: center;
    font-size: 17/@r;
    line-height: 44/@r;
    color: #fff;

}
.title i{
    margin-right: 12/@r;
    font-size: 10/@r;
    color: #fff;
}

1.9移动端