1. sass 创建变量 、继承 、@mixin
1）变量
$sc:50; // 创建变量
p{
margin-bottom: 6/$sc+rem;
height: 15/$sc+rem;
line-height: 15/$sc+rem;
}
2）继承
html{
width: 100%;
height: 100%;
body{
@extend html; // 继承
}
}
3）@mixin
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
// mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
// 可以传递多个参数
@mixin wh($w:100px,$h:100px) {
width:$w;
height:$h;
}
div {
@include wh(200px,200px);
}
2.移动端布局（百分比）
<meta name="viewport" content="width=device-width, initial-scale=1"> // 移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> // 禁止缩放
bootstrap 链接教程
3. rem 布局
<script type="text/javascript">
document.documentElement.style.fontSize = innerWidth/15+"px";
</script>
p{
margin-bottom: 6/$sc+rem;
height: 15/$sc+rem;
line-height: 15/$sc+rem;
}
4.伸缩盒子 布局
伸缩盒子flex 链接教程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="myflex.css"/>
</head>
<body>
<div class="box">
<header>头部</header>
<nav>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</nav>
<div class="info">
<img src="2.large.jpg"/>
</div>
<section>
<ul>
<li>start</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>end</li>
</ul>
</section>
<footer>页脚</footer>
</div>
</body>
</html>
*{margin: 0;padding: 0;}
ul{
list-style: none;
}
html{
width: 100%;
height: 100%;
body{
height: 100%;
margin: 0;
.box{
@extend html;
display: flex;
flex-direction: column;
.info{
img{
max-width: 100%;
display: block;
}
}
nav{
ul{
display: flex;
li{
flex: 1;
text-align: center;
line-height: 30px;
height: 30px;
}
}
}
header{
height: 40px;
line-height: 40px;
background: palevioletred;
text-align: center;
color: white;
font-size: 14px;
}
section{
flex: 1;
background: pink;
overflow: auto;
}
footer{
@extend header;
}
}
}
}
效果图.png
网友评论