Question

我之前已经开始使用bootstrap（仍在V.3.7中），我有一个案例，我正在使用facebook封面图片和个人资料图片之类的东西，我的笔记本电脑屏幕都很好但是当我缩小屏幕时，我注意到我的媒体查询不起作用，但之前的媒体查询没有问题。如果有任何问题，我会发布我的媒体查询我将会成为林间空地如果有人纠正他们：

/* Small devices */
@media screen and (max-width: 767px){
    .header .navbar-default{
        background-color: #fff !important;
        border-color: #e6e6e6;
    }
    .about-iphone img{
        width: 100%;
    }
    .signup .col-md-3{
        text-align: center;
        padding-top: 50px;
    }
    .modal-dialog {
        margin: 30px auto;
        width: 350px;
    }
    .modal-content {
        width: 350px;
    }
    #modal-img .modal-dialog {
        width: 350px;
        margin: 30px auto;
    }
    #modal-img .modal-content {
        width: 350px;
    }
    .cover img.ast-image-lg{
    height: 200px;
    }
}

/* Small devices and tablets */
@media screen and (max-width: 768px){
    .header-map{
        display: none;
    }
    .header-text , .header-btns{
        text-align: center;
    }
    .modal-dialog {
        margin: 30px auto;
        width: 350px;
    }
    .modal-content {
        width: 350px;
    }
    #modal-img .modal-dialog {
        margin: 30px auto;
        width: 350px;
    }
    #modal-img .modal-content {
        width: 350px;
    }
    .ast-profile-text>h2{
    font-weight: 700;
    font-size:16px;
    }

    .ast-image-profile
    {
        margin: -45px 10px 0px 25px;
    }
    .cover img.ast-image-lg{ 
        height: 200px;
    }
}

班级中图像的大小＆＃34; .cover img.ast-image-lg＆＃34;对于中型设备必须为350px，对于较小的设备应为200px ..上述类正在工作我还在标题中使用了肉标签：

<meta name="viewport" content="width=device-width" initial-scale=1.0" />

Answer 1

您的媒体查询指向的距离仅为1px：

@media screen and (max-width: 767px)
@media screen and (max-width: 768px)

从技术上讲，它们应该是这样的：

@media screen and (min-width: 768px) {
/* For Small devices (Tablets) */
}

@media screen and (max-width: 767px) {
/* For Extra Small devices (Phones) */    
}

请阅读文档以供参考： http://getbootstrap.com/docs/3.3/css/#grid

为什么媒体查询不能使用bootstrap中的某些类

1 个答案: