本节用到的工具 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;
}
网友评论