平板电脑视图无法正确显示媒体查询

Question

我有一个网页并为此添加了媒体查询。它适用于所有响应式但不适用于平板电脑（宽度：768px）。我正在分享下面的图片。

[Image][1]

我的html

<div class="container-fluid service">
    <div class="col-md-12 col-lg-12 col-xs-12 margin" style="padding-top: 20px;margin-left: 45px;">
        <div class="row s1">
            <div class="col-md-8 col-xs-12 col-sm-12">
                <h4 class="text-right design" style="padding-top: 20px; font-size: 24px; font-family: Titillium Web Semibold;color: #002A7B;line-height: 1">Emerging Markets<br>Strategy</h4>
                <p class="cnt1 text-right">Market penetration or New Product Introduction services to accelerate success in emerging markets</p>
                <input type="button" class="button" href="Product-Realization-Services.php" target="_blank" value="View More" style="float: right">
            </div>
            <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
                <img src="images/emerging market strategy.jpg" alt="Product Realization" style="height: 200px;padding-top: 12px;padding-bottom: 10%">   
            </div>
        </div>
    </div>
</div>

text.css

@media only screen and (max-width: 425px) {

    .iconlist li {
        font-family: 'open sans'; 
        font-style: normal;
        font-size: 12px!important;
        line-height: 1.2!important
    }

    .core {

        padding-top: 10px;
    }

    .image {

        width: 100%;
        height: 150px!important;
    }

    .top h1{
        font-size: 24px!important;
        top: 15%!important;
        width: 100%;
    }
    .top span h1{
        font-size: 18px!important;
    } 
    .s1 img {
        height: 150px!important;
        padding-top: 50%!important;
        display: none;
    }
    .s1 {
        height: 170px!important;
    }

    .design{
        padding-top: 20px;
        font-size: 18px!important;
        font-family: Titillium Web Semibold;
        color: #002A7B;
        line-height: 1;
        text-align: justify-all!important;
    }
    .cnt {
        font-size: 13px!important;
        text-align: justify-all;
        color: #686868;
        line-height: 1.2!important;
    }

    .button {
        height: 30px!important;
        width: auto;
        float: left!important;
        font-size: 10px!important;
    }
    .design {
        font-size: 15px!important;
        float: left!important;
        text-align: left!important;
    }
    .cnt1 {
        font-size: 12px!important;
        text-align: justify-all!important;
        float: left!important;
        text-align: left!important;
    }
    .para {

        font-size: 16px!important;
        color: #002A7B;
        font-family: 'Titillium Web Semibold';
    }
    .services {
        padding-top: 0!important;
        margin-left: 0!important;
    }
    .margin {
        margin-left: 0!important;   
    }

    .one {
        font-family: 'open sans';
        font-style: normal;
        font-size: 13px!important;
        color: black;
        font-weight: none;
        text-align: justify;
    }
    .two {

        font-family: 'Titillium Web Semibold';
        font-size: 13px!important;
        color: #061835;
    }

     .s1 img {
        float: right!important;
        position: inherit!important;
    }
}

我无法理解为什么它在平板电脑模式下无法正常工作。对于平板电脑替代文字和图像是正确的 提前谢谢你！

Answer 1

请检查一下，希望对您有所帮助

<div class="container-fluid">
    <div class="col-md-12 col-lg-12 col-xs-12 margin" style="padding-top: 20px;margin-left: 45px;">
        <div class="row s1">
            <div class="col-md-8 col-xs-12 col-sm-12">
                <h4 class="text-right design" style="padding-top: 20px; font-size: 24px; font-family: Titillium Web Semibold;color: #002A7B;line-height: 1">Emerging Markets<br>Strategy</h4>
                <p class="cnt1 text-right">Market penetration or New Product Introduction services to accelerate success in emerging markets</p>
                <input type="button" class="button" href="Product-Realization-Services.php" target="_blank" value="View More" style="float: right">
            </div>
            <div class="col-md-4 col-lg-4 col-xs-12 col-sm-4">
                <img src="https://v4-alpha.getbootstrap.com/assets/img/bs-themes.png" alt="Product Realization">
            </div>
        </div>
    </div>
</div>

@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) {
    .margin {
        padding: 0;
        margin: 0;
    }
    .iconlist li {
        font-family: 'open sans';
        font-style: normal;
        font-size: 12px!important;
        line-height: 1.2!important
    }
    .core {
        padding-top: 10px;
    }
    .image {
        width: 100%;
        height: 150px!important;
    }
    .top h1 {
        font-size: 24px!important;
        top: 15%!important;
        width: 100%;
    }
    .top span h1 {
        font-size: 18px!important;
    }
    .s1 img {
        height: 100%;
        width: 100%;
    }
    .s1 {
        height: 170px!important;
    }
    .design {
        padding-top: 20px;
        font-size: 18px!important;
        font-family: Titillium Web Semibold;
        color: #002A7B;
        line-height: 1;
        text-align: justify-all!important;
    }
    .cnt {
        font-size: 13px!important;
        text-align: justify-all;
        color: #686868;
        line-height: 1.2!important;
    }
    .button {
        height: 30px!important;
        width: auto;
        float: left!important;
        font-size: 10px!important;
    }
    .design {
        font-size: 15px!important;
        float: left!important;
        text-align: left!important;
        width: 100%;
    }
    .cnt1 {
        font-size: 12px!important;
        text-align: justify-all!important;
        float: left!important;
        text-align: left!important;
        width: 100%;
    }
    .para {
        font-size: 16px!important;
        color: #002A7B;
        font-family: 'Titillium Web Semibold';
    }
    .services {
        padding-top: 0!important;
        margin-left: 0!important;
    }
    .margin {
        margin-left: 0!important;
    }
    .one {
        font-family: 'open sans';
        font-style: normal;
        font-size: 13px!important;
        color: black;
        font-weight: none;
        text-align: justify;
    }
    .two {
        font-family: 'Titillium Web Semibold';
        font-size: 13px!important;
        color: #061835;
    }
    .s1 img {
        float: right!important;
        position: inherit!important;
    }
}

Answer 2

您是否考虑过使用与Bootstrap 相同的媒体中断。

无论如何，阅读并大致了解它是如何完成的都是有帮助的。

基本上，如果您的视图小于您将中断设置为“小于”某个宽度。之后，每个断点应该“大于或等于”某个指定宽度，否则会出现断点重叠。