Question

我想删除white space里面的html中不必要的media queries，并且我想知道当我的其他media queries没有出现时它是如何出现的有它。有人能告诉我如何使用最佳实践摆脱这种情况吗？

这里是图片：

这里是代码：

@media screen and (min-width: 768px) and (max-width: 991px){
          .logo {
    width: 220px;
}
.gear {
    position: absolute;
    left:23%;
    top:9px;
    width: 10px;
}
.lightning {
    position: absolute;
    top:30px;
    left:32%;
}
@-webkit-keyframes scale {
    0%{  -webkit-transform: scale(0,0);}
    100%{ -webkit-transform: scale(0.5,0.5 );}
}
@-moz-keyframes scale {
    0%{-ms-transform:scale(0,0);}
    100%{-ms-transform: scale(0.5,0.5);}
}

@-o-keyframes scale {
    0%{-o-transform:scale(0,0);}
    100%{-o-transform: scale(0.5,0.5);}
}

@-ms-keyframes scale {
    0%{-ms-transform:scale(0,0);}
    100%{-ms-transform: scale(0.5,0.5);}
}

@keyframes scale {
    0%{transform:scale(0,0);}
    100%{transform: scale(0.5,0.5);}
}
.con {
  margin-right: 0px;
}
.navbar-inverse .navbar-nav>li>a {
    color:  #949494;
    padding-top: 47px;
    padding-right: 0px;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: border-bottom-color 0.5s ease-in-out;
    -webkit-transition: border-bottom-color 0.5s ease-in-out;
    font-size: 10px;
}
}

Answer 1

首先它还取决于你编辑的缩进短键。第二个想法是在线缩进，谷歌为“在线css美化”，我从这个工具做你的代码缩进，有很多在线工具可用，我做了你的代码缩进从这个工具， http://www.cleancss.com/css-beautify/

@media screen and (min-width: 768px) and (max-width: 991px) {
    .logo {
        width: 220px;
    }
    .gear {
        position: absolute;
        left: 23%;
        top: 9px;
        width: 10px;
    }
    .lightning {
        position: absolute;
        top: 30px;
        left: 32%;
    }
    @-webkit-keyframes scale {
        0% {
            -webkit-transform: scale(0, 0);
        }
        100% {
            -webkit-transform: scale(0.5, 0.5);
        }
    }
    @-moz-keyframes scale {
        0% {
            -ms-transform: scale(0, 0);
        }
        100% {
            -ms-transform: scale(0.5, 0.5);
        }
    }
    @-o-keyframes scale {
        0% {
            -o-transform: scale(0, 0);
        }
        100% {
            -o-transform: scale(0.5, 0.5);
        }
    }
    @-ms-keyframes scale {
        0% {
            -ms-transform: scale(0, 0);
        }
        100% {
            -ms-transform: scale(0.5, 0.5);
        }
    }
    @keyframes scale {
        0% {
            transform: scale(0, 0);
        }
        100% {
            transform: scale(0.5, 0.5);
        }
    }
    .con {
        margin-right: 0px;
    }
    .navbar-inverse .navbar-nav>li>a {
        color: #949494;
        padding-top: 47px;
        padding-right: 0px;
        font-weight: bold;
        border-bottom: 3px solid transparent;
        transition: border-bottom-color 0.5s ease-in-out;
        -webkit-transition: border-bottom-color 0.5s ease-in-out;
        font-size: 10px;
    }
}

Answer 2

你试过在你的css文件中声明这个吗？ * {保证金：0;填充：0;}

删除html中不必要的空格

2 个答案: