IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

亚马逊运营

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

sass占位符、混合宏、继承优缺点是什么，适用哪些场景？

1

1

Sass

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@charset "UTF-8";
/*
 * @名称：base.css
 * @功能：1、重设浏览器默认样式
 *       2、设置通用原子类
*/
html {
  font-size: 62.5%;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0;
}

/* 去掉 table cell 的边距并让其边重合*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 去掉列表前的标识，li 会继承 */
ol, ul {
  list-style: none;
}

/* 让链接在 hover 状态下显示下划线 */
a {
  text-decoration: none;
  color: #000000;
}

该问题已被官方收录

页面二hover半透明层位置

2

1

hover 透明度

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="web-list-col">
                <div class="web-peo">
                    <img class="web-peo-p" src="img/peo.jpg">
                    <span class="web-peo-t">Web前端工程师</span>
                    <div class="web-peo-text">
                        Web前端开发工程师，主要职责是利用（X）HTML /CSS /JavaScript /flash等各种Web技术进行产品的开发。
                    </div>
                </div>
                <div class="web2">
                    <span class="threshold">
                        门槛
                    </span>
                    <span class="difficult">
                        难易程度
                    </span>
                </div>
                <div class="web2">
                    <span class="grew">
                        成长周期
                        <span class="grew-num">1-3
                             <span class="grew-text">年</span>
                        </span>
                    </span>
                    <span class="scar">
                        稀缺程度
                        <span class="scar-num">345
                            <span class="scar-text">家公司需要</span>
                        </span>
                    </span>
                </div>
                <div class="money">
                    <div class="money-t">
                        薪资待遇
                    </div>
                    <div class="money-l">
                        <div class="money-one">
                            <span class="money-onel">0-1年</span>
                            <span class="money-one2">5k-10k/月</span>
                        </div>
                        <div class="money-two">
                            <span class="money-twol">1-3年</span>
                            <span class="money-two2">10k-20k/月</span>
                        </div>
                        <div class="money-three">
                            <span class="money-threel">3-6年</span>
                            <span class="money-three2">20k-50k/月</span>
                        </div>
                    </div>
                </div>
                <div class="studying">
                    <span class="studying-h">有</span>
                    <span class="studying-num">286</span>
                    <span class="studying-text">人正在学</span>
                </div>
                <div class="tips">
                    提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XXX等语言基础
                </div>
                <div class="web-hover">
                    <div class="web-hover-t">iOS工程师</div>
                    <div class="web-hover-text">
                    iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属
                    于类Unix的商业操作系统。国内iOS开
                    发起步相对较晚，人才培养机制更是远
                    远跟不上市场发展速度。有限的iOS开
                    发人才成了国内企业必争的资源。国内  iOS开发起步相对较晚，人才培养机制
                    更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
                    </div>
                </div>
            </div>

//职业块
    .web-list-col {
      height: 4.48rem;
      width: 30%;
      margin-bottom: 0.2rem;
      background-color: #ffffff;
      border: #d3d4d6 solid 0.01rem;
      //头像
      .web-peo {
        border-bottom: #d3d4d6 solid 0.01rem;
        padding-left: 0.1rem;
        height: 1.74rem;
        .web-peo-p {
          height: 1.2rem;
          width: 1.2rem;
          margin-top: 0.2rem;
        }
        .web-peo-t {
          position: relative;
          bottom: 1.1rem;
          font-size: 0.14rem;
          font-weight: bold;
        }
        .web-peo-text {
          font-size: 0.12rem;
          width: 45%;
          position: relative;
          left: 1.25rem;
          bottom: 1rem;
        }
      }
      //门槛、成长周期等信息
      .web2 {
        @extend %between;
        color: #999999;
        font-size: 0.12rem;
        border-bottom: #d3d4d6 solid .01rem;
        .threshold,.difficult,.grew,.scar {
          display: inline-block;
          height: 0.42rem;
          line-height: 0.42rem;
        }
        .threshold {
          width: 35%;
          padding-left: 5%;
          background: url("../img/icon.png") no-repeat -4.3rem -5.87rem;
        }
        .difficult {
          width: 55%;
          background: url("../img/icon.png") no-repeat -4.3rem -4.87rem;
        }
        .grew {
          width: 35%;
          padding-left: 5%;
          .grew-num {
            color: red;
            .grew-text {
              color: black;
            }
          }
        }
        .scar {
          width: 55%;
          .scar-num {
            color: red;
            .scar-text {
              color: black;
            }
          }
        }
      }
      //薪资
      .money {
        @extend %between;
        height: 1.06rem;
        font-size: 0.14rem;
        color: #999999;
        .money-t {
          width: 40%;
          border: #d3d4d6 solid 0.01rem;
          border-left: 0;
          border-top: 0;
          text-align: center;
          line-height: 1.1rem;
        }
        .money-l {
          width: 60%;
          color: #000000;
          padding: 0;
          line-height: 0.36rem;
          .money-one,.money-two,.money-three {
            border-bottom: #d3d4d6 solid 0.01rem;
            height: .343rem;
            line-height: .343rem;
            .money-onel,.money-twol,.money-threel {
              padding-left: 0.2rem;
            }
            .money-one2,.money-two2,.money-three2 {
              padding-right: 0.3rem;
              float: right;
            }
          }
        }
      }
      //在学人数
      .studying {
        border-bottom: #d3d4d6 solid 0.01rem;
        height: 0.38rem;
        line-height: 0.38rem;
        font-size: 0.15rem;
        font-weight: bold;
        .studying-h {
          padding-left: 0.2rem;
        }
        .studying-num {
          color: red;
        }
      }
      //提示
      .tips {
        padding-left: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: #c6c6c6;
      }
      //ios介绍
      .web-hover {
        @extend %mid-center;
        flex-direction: column;
        height: 4.48rem;
        position: relative;
        top: -4.26rem;
        background-color:transparent;
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        &:hover {
          background-color:rgba(0,0,0,0.6);
        }
        &:hover .web-hover-t {
          display: block;
        }
        &:hover .web-hover-text {
          display: block;
        }
        .web-hover-t {
          height: .5rem;
          margin-top: -.8rem;
          display: none;
        }
        .web-hover-text {
          width: 80%;
          display: none   ;
        }
      }
    }

该问题已被官方收录

侧边导航栏出来时，原始页面不会只显示一半，会把原始的页面在50%的宽度上显示

1

1

侧边栏

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

sass代码
@import "style";
//颜色变量
$c-blue: #29BDE0;
$c-lightblue: #69D1E9;
$c-white: #ffffff;
$c-lightgray: #C9C9C9;
$c-darkgray: #787878;
$c-gray: #9A9A9A;
$c-lime: #F0F0F0;
$c-orange: #FBB435;
//字体变量
$fz-38: .38rem;
$fz-35: .35rem;
$fz-32: .32rem;
$fz-25: .25rem;
//混合器部分
//flex混合器
@mixin flex-c($h:center, $v:center) {
    display: flex;
    justify-content: $h;
    align-items: $v;
}
//占位符
%a-style{
    >a {
        display: inline-block;
        width: 80%;
        line-height: 1.34rem;
        font-size: $fz-32;
        color: $c-white;
        background: $c-lightblue;
    }
    .trilateral::after {
        content: "";
        position: absolute;
        top: 50%;
        right: .1rem;
        margin: -.2rem -.2rem -3rem 0;
        border: solid .3rem;
        border-color: transparent transparent transparent $c-orange;
    }
}


/*全局*/

body {
    position: relative;
    input {
        display: none;
    }
    #side:checked ~.content {
        margin-left: 50%;
    }
    /*sidenav部分*/
    .sidenav {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        background: $c-white;
        li {
            @include flex-c(space-between, center);
            position: relative;
            height: 1rem;
            border-bottom: 1px solid $c-lightgray;
            a {
                margin-left: .2rem;
                font-size: $fz-38;
                color: $c-lightblue;
            }
            &::after {
                content: "";
                position: absolute;
                right: .2rem;
                top: .42rem;
                border-top: 2px solid $c-lightblue;
                border-right: 2px solid $c-lightblue;
                width: .16rem;
                height: .16rem;
                transform: rotate(45deg);
            }
            &:hover {
                background: $c-lime;
            }
        }
    }
    /*content部分*/
    .content {
        background-color: $c-white;
        position: relative;
        overflow: hidden;
        transition: margin-left 1s;
        /*header部分*/
        header {
            @include flex-c(flex-start, center);
            height: .9rem;
            background-color: $c-blue;
            label {
                margin-left: .22rem;
                padding-top: .07rem;
                padding-bottom: .07rem;
                border-top: .04rem solid currentColor;
                border-bottom: .04rem solid currentColor;
                width: .34rem;
                height: .04rem;
                color: $c-white;
                background-color: currentColor;
                background-clip: content-box;
            }
        }
        /*main部分*/
        main {
            padding: .27rem .37rem 0 .35rem;
            h3 {
                line-height: 1.16rem;
                text-align: center;
                border: .01rem solid $c-lightgray;
                font-size: $fz-35;
                font-weight: normal;
                color: $c-gray;
                background: $c-white;
                &::after {
                    content: "";
                    position: absolute;
                    right: .5rem;
                    margin-top: .5rem;
                    border-top: 2px solid;
                    border-right: 2px solid;
                    width: .15rem;
                    height: .15rem;
                    transform: rotate(45deg);
                }
            }
            ul {
                position: relative;
                margin-top: .27rem;
                text-align: center;
                border: solid .01rem $c-lightgray;
                background-color: $c-white;
                li {
                    margin-top: .27rem;
                    &:nth-child(1) {
                        margin-top: 0;
                        line-height: .9rem;
                        font-size: $fz-38;
                        color: $c-orange;
                        border-bottom: .01rem solid $c-orange;
                    }
                    &:nth-child(2),
                    &:nth-child(4),
                    &:nth-child(6) {
                        @extend %a-style;
                    }
                    &:nth-child(3),
                    &:nth-child(5),
                    &:nth-child(7) {
                        font-size: $fz-25;
                        color: $c-darkgray;
                    }
                    &:nth-child(8) {
                        @include flex-c(space-between, center);
                        width: 1rem;
                        margin: .14rem auto;
                        span {
                            border-radius: 50%;
                            width: .17rem;
                            height: .17rem;
                            &:nth-child(1) {
                                background: $c-lightblue;
                            }
                            &:nth-child(2),
                            &:nth-child(3),
                            &:nth-child(4) {
                                background-color: $c-lime;
                            }
                        }
                    }
                }
            }
        }
    }
}
html代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="task13-1.css">
</head>

<body>
    <input type="checkbox" id="side">
    <ul class="sidenav">
        <li>
            <a href="">公告</a>
        </li>
        <li>
            <a href="">设置</a>
        </li>
        <li>
            <a href="">帮助</a>
        </li>
        <li>
            <a href="">关于</a>
        </li>
    </ul>
    <div class="content">
        <header>
            <label for="side"></label>
        </header>
        <main>
            <h3>上次游戏：捉鬼猜词版</h3>
            <ul>
                <li>捉鬼游戏</li>
                <li>
                    <a href="task13-2.html">简化版</a>
                </li>
                <li>有1133个用户正在玩此游戏</li>
                <li>
                    <a href="task13-2.html" class="trilateral">猜词版</a>
                </li>
                <li>有1133个用户正在玩此游戏</li>
                <li>
                    <a href="task13-2.html">白痴版</a>
                </li>
                <li>有1133个用户正在玩此游戏</li>
                <li>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </li>
            </ul>
        </main>
    </div>
</body>

</html>

该问题已被官方收录

rgba和opacity有什么区别

1

1

透明度

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 position: fixed;
    right: -25.5rem;
    opacity: 0;

height: 6.45rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1;
    background:rgba(153,223,240,.4);
    padding: 1.2rem 0.9rem 0.95rem 0rem;
    text-align: center;

该问题已被官方收录

bootstrap布局，内外边距出现问题，布局崩溃

0

1

bottstrap 边距

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>

该问题已被官方收录

导航栏四个按钮“首页、推荐。。。“当屏幕小于768px时折叠显示时顺序变了

1

1

响应式

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<header>
        <!-- bootstrap折叠导航框架 -->
        <nav class="navbar navbar-default" style="background:#29b078; border-radius: 0;border-color: transparent;">
            <div class="container white-oval">
                <!--去除fluid以使得该行格式和首航一致， Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" style="color: white">技能树|修真院</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-1.html" style="color: white">关于</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-2.html" style="color: white">职业</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-3.html" style="color: white">推荐</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-1.html" style="color: white">首页</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

        <!-- bootstrap折叠导航框架 -->

    </header>

该问题已被官方收录

用浏览器模仿手机访问网页显示正常。用真实的手机访问页面，盒子的背景图片会发生偏移

1

1

chrome开发者工具

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.firstone,
.finallyone{
    width:12px;
    height:12px;
    padding:0;
    background-image:url("calendar2.png");
    background-repeat:no-repeat;
}
.firstone{
    background-position:0 -36px;
}
.finallyone{
    background-position:0 -60px;
}
p{
    margin:0;
    padding:0;
}
.first,
.finally p{
    line-height:14px;
    color:#999;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
.first{
    background-position:left -42px;
    margin-bottom:0.5rem;
    padding-left:0;
}
.second {
    font-size:1.6rem;
    margin-bottom:0.5rem;
}
.second p{
    padding-left:2rem;
    line-height:1.5rem;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
.finally{
    background-position:3px -74px;
}
.main {
    height:7rem;
    border-bottom:1px solid #ccc;
    padding:1rem;
}
.salary{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    height:5rem;
}
.salary p{
    color:#f00;
    padding-right:0.5rem;
    margin:0;
    font-size:1.8rem;
    white-space: nowrap;
}
.salary a{
    display:inline-block;
    width:1rem;
    height:1.5rem;
    background-image:url("矢量智能对象拷贝.png");
    background-repeat:no-repeat;
    background-size:0.8rem;
}

<div class="container-fluid headerr">
    <div class="row header">
        <div class="col-xs-offset-3 col-xs-6 button">
            <button  type="button" class="btn btn-default1">找雇主</button
            ><button type="button" class="btn btn-default2">找护工</button>
        </div>
        <div class="col-xs-3 map">
            <button type="button" class="btn btn-link"></button>
        </div>
    </div>
</div>

该问题已被官方收录

sass的default！真正作用，继承，混合，占位符如何选择

0

1

Sass

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

使用sass的时候是否可以一直用nth:child 嵌套，而不编写类名？

1

1

Sass

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 625%;
}

body {
    font-size: .14rem;
    margin: 0;
    padding: 0;
}

button {
    outline: none;
    border: none;
    color: none;
}

header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .1rem;
    background-color: #5FC0CD;
    @mixin button-style {
        width: .72rem;
        height: .35rem;
        font-size: .17rem;
        font-family: serif;
        border-radius: .05rem;
        font-weight: 300;
    }
    & :first-child {
        @include button-style;
        color: #fff;
        background-color: #55A8B3;
    } // 页眉左
    & :nth-child(2) {
        margin-left: -.05rem;
        @include button-style;
        color: #5FC0CD;
        background-color: #fff;
    } // 页眉中
    & :last-child::before {
        content: "";
        position: absolute;
        right: .35rem;
        top: .165rem;
        display: inline-block;
        background: url(../I/page2.png)no-repeat;
        width: 21px;
        height: 22px;
        background-position: 0 -33px;
    } // 页眉右
}

// 页眉
.nav-style {
    display: flex;
    justify-content: space-between;
    margin-top: .55rem;
    border-bottom: 1px solid #E1E5E7;
    &>:nth-child(2) {
        border-left: 1px solid #E1E5E7;
        border-right: 1px solid #E1E5E7;
    }
} // 包含整个菜单栏的样式
.navigation {
    @mixin navigation-style {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .03rem 0;
        padding: .1rem 0;
        color: #999;
    } // 菜单栏三栏通用样式
    @include navigation-style;
    position: relative;
    width: 100%;
    span {
        flex-basis: 80%;
        text-align: center;
    } // 导航栏样式
    &:hover>.menu {
        display: block;
    } // 隐藏内容显现
    & i::after {
        content: "";
        display: inline-block;
        border: .04rem solid transparent;
        border-top: .06rem solid #AFBAC0;
        width: 0;
        height: 0; // 下拉三角形
    }
    .menu {
        position: absolute;
        display: none;
        top: .42rem;
        width: 100%;
        background: #fff; // 隐藏内容
        span {
            display: block;
            box-shadow: 1px 1px 1px #E1E5E7;
            padding: .1rem 0; // 显示内容后的样式
            &:hover {
                background-color: #5FC0CD;
                color: #fff;
            }
        }
    }
}

// 每栏菜单样式
.main-content-style {
    display: flex;
    justify-content: space-between;
    padding: .05rem .15rem;
    border-bottom: 1px solid #E1E5E7;
    span {
        display: block;
    }
    .sheet-left {
        overflow: hidden;
        span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        @mixin font-style {
            color: #999;
            font-size: .13rem;
            margin: .1rem 0;
        }
        span:nth-child(1) {
            @include font-style;
        } // 表格左第一行字体
        span:nth-child(1)::before {
            content: "";
            margin-right: .07rem;
            background: url(../I/page2.png)no-repeat;
            width: 12px;
            height: 12px;
            background-position: 0 -113px;
            display: inline-block;
        } // 表格左第一行图标
        span:nth-child(2) {
            margin-left: .19rem;
            font-size: .14rem;
            color: #333;
        } // 表格左 第二行
        span:nth-child(3) {
            @include font-style;
        } // 表格左第三行
        span:nth-child(3)::before {
            content: "";
            margin-right: .07rem;
            background: url(../I/page2.png)no-repeat;
            width: 10px;
            height: 12px;
            background-position: 0 0;
            display: inline-block;
        } // 表格左第三行图标
    } // 表格左
    .sheet-right {
        display: flex;
        align-items: center;
        white-space: nowrap;
        span {
            display: flex;
            align-items: center;
            color: #E63B0E;
            font-size: .15rem;
        } // 表格右字体
        span::after {
            content: "";
            margin-left: .1rem;
            background: url(../I/page2.png)no-repeat;
            width: 10px;
            height: 17px;
            background-position: 0 -96px;
            display: inline-block;
        } // 表格右图标
    }
}

.bottom-footer-gap {
    margin-bottom: .7rem;
}

// 最后一行表格和页脚的距离，页脚设置了fixed定位
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .06rem 0;
    background-color: #F8FAFB; // 页脚样式
    .footer-left {
        text-align: center;
        i:before {
            content: "";
            display: inline-block;
            background: url(../I/page2.png)no-repeat;
            width: 23px;
            height: 20px;
            background-position: 0 -55px;
        }
        span {
            a {
                color: #5FC0CD;
                text-decoration: none;
            }
        }
    } // 页脚左边文字和图标
    .footer-center {
        display: flex;
        justify-content: center;
        align-items: center;
        width: .57rem;
        height: .57rem;
        border-radius: 50%;
        background-color: #5FC0CD;
        i::before {
            content: '';
            display: inline-block;
            background: url(../I/page2.png)no-repeat;
            width: 20px;
            height: 21px;
            background-position: 0 -12px;
        }
    } // 页脚中间文字和图标
    .footer-end {
        text-align: center;
        i::before {
            content: "";
            display: inline-block;
            background: url(../I/page2.png) no-repeat;
            width: 21px;
            height: 21px;
            background-position: 0 -75px;
        }
    } // 页脚右边文字和图标
}

该问题已被官方收录

使用sass写组件化文件_bootstrap.scss时，媒体查询未完全生效

1

1

媒体查询

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//媒体查询的基本设置
//xl
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}
//lg
@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}
//md
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
//sm
@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}
//列的媒体查询
$list:(sm:576px, md:768px, lg:992px, xl:1200px);

@each $q,
$w in $list {
  @media (min-width: $w) {
    @for $var from 1 through 12 {
      .col-#{$q}-#{$var} {
        flex: 0 0 100%/12*$var;
        position: relative;
        width: 100%/12*$var;
        margin: 0 15px;
      }
    }
  }
}

  @for $var from 1 to 12 {
    .col-#{$var} {
      flex: 0 0 100%/12*$var;
      position: relative;
      width: 100%/12*$var;
      margin: 0 15px;
    }
}

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1