Sass 语法 移动端布局

2017-11-15  本文已影响0人  AnnQi

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
上一篇 下一篇

猜你喜欢

热点阅读