Question

嗨朋友们只是测试我网站的响应能力。

所以我制作了一个基本代码，希望页面中的标题能够针对不同的屏幕大小做出响应。

这是HTML代码，

<!-- Custom styles for this template -->

<link rel="stylesheet" type="text/css" href="style.css">
<title>Testing Responsive Screens</title>
</head>

<body>

<div class='divHeader'><!-- Contact Us title Start -->

    <div class="container"><!--container-->

        <div class="row"><!-- Contact Us title -->

            <!-- LARGE SCREEN TITLE -->

            <div class='LGS'>

                <div class='col-lg-4'></div>

                <div class='col-lg-4 divHeaderContent text-center'>
                    <h1><br>Contact Us</h1>
                </div>

                <div class='col-lg-4'></div>

            </div>

            <!-- MEDIUM SCREEN TITLE -->

            <div class='MDS'>

                <div class='col-md-4'></div>

                <div class='col-md-4 divHeaderContent text-center'>
                    <h2><br>Contact Us</h2>
                </div>

                <div class='col-md-4'></div>

            </div>

            <!-- SMALL SCREEN TITLE -->

            <div class='SMS'>

                <div class='col-sm-4'></div>

                <div class='col-sm-4 divHeaderContent text-center'>
                    <h3><br>Contact Us</h3>
                </div>

                <div class='col-sm-4'></div>

            </div>

            <!-- EXTRA SMALL 1 SCREEN TITLE -->

            <div class="XSS1">

                <div class='col-xs-4'></div>

                <div class='col-xs-4 divHeaderContent text-center'>
                    <h4><br>Contact Us</h4>
                </div>

                <div class='col-xs-4'></div>

            </div>

            <!-- EXTRA SMALL 2 SCREEN TITLE -->

            <div class="XSS2">

                <div class='col-xs-4'></div>

                <div class='col-xs-4 divHeaderContent text-center'>
                    <h6><br>Contact Us</h6>
                </div>

                <div class='col-xs-4'></div>

            </div>

        </div><!-- End of Contact Us title -->

    </div><!--End of container-->

</div>

</body>

</html>

＆安培;简单的CSS，

    @media (min-width: 1200px) {
    /* ================== GENERAL RULE ===================== */
    .MDS, .SMS, .XSS1, .XSS2{
        display: none;    
    }
}

     /* Landscape tablets and medium desktops */
      @media (min-width: 992px) and (max-width: 1199px) {
        /* ================== GENERAL RULE ===================== */
        .LGS, .SMS, .XSS1, .XSS2{
            display: none;    
        }
     }

     /* Portrait tablets and small desktops */
     @media (min-width: 768px) and (max-width: 991px) {
        /* ================== GENERAL RULE ===================== */
        .LGS, .MDS, .XSS1, .XSS2{
            display: none;    
        }
     }

     /* Landscape phones and portrait tablets */
     @media (max-width: 767px) {
        /* ================== GENERAL RULE ===================== */
        .LGS, .MDS, .SMS, .XSS2{
            display: none;    
        }
     }

     /* Portrait phones and smaller */
     @media (max-width: 480px) {
        /* ================== GENERAL RULE ===================== */
        .LGS, .MDS, .SMS, .XSS1{
            display: none;    
        }
     }

类专用于每种类型的屏幕大小。

屏幕尺寸最小时出现问题。标题根本没有出现。帮助我的人，让我知道我错了。

谢谢！

Answer 1

问题是您没有为Landscape phones and portrait tablets指定最小宽度。所以在767px和更少的XSS2被隐藏（甚至在肖像手机和更小的情况下）。有一个修复：

/* Landscape phones and portrait tablets */
@media (min-width: 481px) and (max-width: 767px) {
    /* ================== GENERAL RULE ===================== */
     .LGS, .MDS, .SMS, .XSS2{
        display: none;    
    }
}

Answer 2

看看这是否适合您：http://codepen.io/panchroma/pen/LZVyPQ，如果您隐藏所有自定义类，则可以更轻松地关注不同视口中发生的情况，然后指定对每个断点显示 y，而不是在每个断点处指定隐藏。

 .LGS, .MDS, .SMS,.XSS1, .XSS2{display:none;}

 @media (max-width: 480px) {
   .XSS2{
     display:block;
   }
}

 @media (min-width: 481px) and (max-width: 767px) {
   .XSS1{
     display:block;
   }
}

@media (min-width: 768px) and (max-width: 991px) {
   .SMS{
     display:block;
   }
}

@media (min-width: 992px) and (max-width: 1199px) {
   .MDS{
     display:block;
   }
}

@media (min-width: 1200px) {
   .LGS{
     display:block;
   }
}

如果你不知道，Bootstrap确实有原生的响应工具，可以实现你正在寻找的一些东西：http://getbootstrap.com/css/#responsive-utilities

如果您的文档头部中包含viewport meta tag，则您的代码中也不清楚，如果不是，则需要

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

祝你好运！

测试目标屏幕| Twitter Bootstrap

2 个答案: