我的媒体查询在移动设备上不起作用，我已经添加了视口

Question

我的 css 中有一个媒体查询，但是当我在移动设备上尝试时，没有任何反应。请帮我解决一下这个。我的问题出在媒体查询中，.custombox 的边距不起作用。我需要将媒体查询与另一个 css 文件分开吗？是否可以让两个 css 覆盖 bootstrap？

这是我的 header 标签

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

这是我的 CSS 命名为 scrolling-nav。css

body {
    width: 100%;
    height: 100%;
    padding-top: 140px;
}
html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
        margin: 
    }
    .top-nav-collapse {
        padding: 0;
    }
    .div {
        text-align: justify;
        text-justify: inter-word;
    }
    .custom-box {
        margin-left: 0px !important;
        margin-right: 30px !important;
    }

}

@media (max-width: 480px) {
    .custom-box{
        margin-left: 0px !important;
        margin-right: 30px !important;
    }
}


.intro-section {
    height: 100%;
    padding-top: 50px;
    font-family: Impact;
    background: #fff;
    padding-bottom: 40px;
}

.re-section {
    height: 333%;
    padding-top: 10px;
    text-align: left;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 20px;
    text-align: left;
    background: #fff;
}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}
.thumbnail {
    background: #eee !important;
}
.thumbnail-img {
     height:auto;
     width:100%;
}
.custom-box{
    margin-left: 100px !important;

}
.cust-box {
    margin-left: 50px !important;
}
.img {
    border-radius: 50%;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -moz-: -moz-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.img:hover {
    -webkit-transform: rotate(360deg);
    -moz-: rotate(360deg);;
    transform: rotate(360deg);
}
#bgimage1 {
    color: #0c00ff;
     background: url(../images/solar2.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
#font-intro {
    font-size: 16px;
    font-family: arial;
    text-align: left;

}
#font-blue {
    color: #0c00ff;
    font-family: Impact;
    font-size: 25px;
}
#img1 {
    transition: all .2s ease-in-out;
}
#img1:hover {
    transform:scale(1.1);
}

Answer 1

一个重要的标志正在覆盖媒体查询中设置的内容。删除 !important 标志并在 .custom-box

的所有样式之后移动媒体查询

body {
    width: 100%;
    height: 100%;
    padding-top: 140px; 
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
    }
    .div {
        text-align: justify;
        text-justify: inter-word;
    }
    .custom-box{
        margin-left: 0px;
        margin-right: 30px;
    }  

}


.intro-section {
    height: 100%;
    padding-top: 50px;
    font-family: Impact;
    background: #fff;
    padding-bottom: 40px;

}

.re-section {
    height: 333%;
    padding-top: 10px;
    text-align: left;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 20px;
    text-align: left;
    background: #fff;

}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}
.thumbnail {
    background: #eee !important;
}
.thumbnail-img {
     height:auto;
     width:100%;
}
.custom-box{
    margin-left: 100px;

}
.cust-box {
    margin-left: 50px;
}
.img {
    border-radius: 50%;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -moz-: -moz-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.img:hover {
    -webkit-transform: rotate(360deg);
    -moz-: rotate(360deg);;
    transform: rotate(360deg);
}
#bgimage1 {
    color: #0c00ff;

     background: url(../images/solar2.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
#font-intro {
    font-size: 16px;
    font-family: arial;
    text-align: left;

}
#font-blue {
    color: #0c00ff;
    font-family: Impact;
    font-size: 25px;
}
#img1 {
    transition: all .2s ease-in-out;
}
#img1:hover {
    transform:scale(1.1);
}   

@media (max-width: 480px) {
    .custom-box{
        margin-left: 0px;
        margin-right: 30px;
    }
}

我的媒体查询在移动设备上不起作用，我已经添加了视口

My media query not working in mobile and i already added viewport

html

css

media-queries

twitter-bootstrap