本節(jié)用到的工具 less
使用文檔地址： http://www.bootcss.com/p/lesscss/
ps 快捷鍵
ctrl+n 新加文件
ctrl+c
ctrl+v
ctrl+x
ctrl + '+' 發(fā)大
ctrl + '-' 縮小
空格 選擇
ctrl + r 顯示隱藏標(biāo)尺
移動端
視口
可視區(qū)的尺寸
默認(rèn)的移動端980px（css像素）
px 像素
css像素 物理像素 像素比
<meta name="viewport" content="width">
- width
number | device-width
像素比
window.devicePixelRatio
1px(css像素) 占n個物理像素 , n就是像素比
一般的電腦像素比是1, 一個css像素對應(yīng)一個物理像素
適配
移動端分辨率很多， 你不可以每個分辨率都出一張設(shè)計圖， 需要適配
百分比適配
rem適配
rem是長度單位， 動態(tài)的長度單位， 根據(jù)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';//相當(dāng)于將html分成16分, 1分就是1rem
})();
</script>
<style>
html{
height: 100%;
}
body{
margin: 0;
height: 100%;
}
div{
/*高度百分比必須要html, body都設(shè)置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;
}
