1.9移动端

本节用到的工具 less

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

ps 快捷键

ctrl+n 新加文件

ctrl+c
ctrl+v
ctrl+x

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

空格 选择

ctrl + r 显示隐藏标尺

移动端

视口

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

px 像素

css像素 物理像素 像素比

• 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

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