2

Добрый день!

У меня есть несколько блоков. Часть из них должна быть видна только на телефонах и лаптопах, часть - на планшетах и лаптопах. Как лучше всего это организовать?

Сейчас сделала вот так, но срабатывает через раз:

/* Smartphones (landscape) ----------- */

@media only screen and (min-width:321px) {
    .ad, .right-sidebars {
        display: none;
    }
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width:320px) {
    .ad, .right-sidebars {
        display: none;
    }
}

/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .ad, .right-sidebars {
        display: none;
    }
}

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .left-sidebar {
        display: none;
    }
    .ad,
    .right-sidebars {
        display: block;
    }
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
    .left-sidebar {
        display: none;
    }
    .ad,
    .right-sidebars {
        display: block;
    }
}


/* iPads (portrait) ----------- */

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
    .left-sidebar {
        display: none;
    }
    .ad,
    .right-sidebars {
        display: block;
    }
}


/* The New iPad (iPad 3) ----------- */

@media only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio: 2) {
    .left-sidebar {
        display: none;
    }
    .ad,
    .right-sidebars {
        display: block;
    }
}



/* Laptops ----------- */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px)  and (-webkit-min-device-pixel-ratio: 1) { 
    .left-sidebar,
    .ad,
    .right-sidebars, 
    .content {
        display: block;
    }
}
<div class="container">
        <!-- Example row of columns -->
        <table class="row">
            <tbody>
                <tr>
                    <td class="left-sidebar col-md-4 col-sm-16 col-xs-16">
                        <h2>Left Sidebar:</h2>
                        <p> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                            egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.</p>
                        <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
                    </td>
                    <td class="content col-md-6 col-sm-10 col-xs-16">
                        <h2>Content:</h2>
                        <p> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse
                            nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci
                            hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.</p>
                    </td>
                    <td class="ad col-md-2 col-sm-2 col-xs-16">
                        <a href="#" class="thumbnail">
                            <img style="height:100px; width: auto;" src="http://altaysm.azurewebsites.net/images/asm.png" alt="алтайстроймаш">
                        </a>
                        <a href="#" class="thumbnail">
                            <img style="height:100px; width: auto;" src="http://altaysm.azurewebsites.net/images/asm.png" alt="алтайстроймаш">
                        </a>
                        <a href="#" class="thumbnail">
                            <img style="height:100px; width: auto;" src="http://altaysm.azurewebsites.net/images/asm.png" alt="алтайстроймаш">
                        </a>
                        <a href="#" class="thumbnail">
                            <img style="height:100px; width: auto;" src="http://altaysm.azurewebsites.net/images/asm.png" alt="алтайстроймаш">
                        </a>
                    </td>
                    <td class="right-sidebars col-md-4  col-sm-4 col-xs-16">
                        <div class="right-sidebar">
                            <h2>Right Sidebar:</h2>
                            <p> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
                                turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.</p>
                            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
                        </div>
                        <div class="right-sidebar">
                            <h2>Right Sidebar:</h2>
                            <p> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
                                turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.</p>
                            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
                        </div>
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
    <!-- /container -->

На телефонах должен быть только левый сайдбар и контент. На планшетах - всё, кроме левого сайдбара. На лаптопах - всё.

1 ответ 1

5

Не надо придумывать велосипеды, в бутстрапе уже все это есть http://getbootstrap.com/css/#visible-on

1
  • Ну вот! Спасибо огромное, в следующий раз буду знать что делать! ;)
    – dariashka
    6 авг 2015 в 19:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.