IPhone 中的响应式设计和横向设备中的隐藏滑块

Question

我在我的网站中使用 Bootstrap 框架 我的网站在 IPhone 和 Ipad 设备上没有响应 我使用 JQuery 创建滑块 我想在移动设备中显示滑块，隐藏在横向桌面中

Answer 1

您需要将 Media Queries 与您的 bootstrap 一起使用，以使其对移动设备、平板电脑、台式机等的响应更快。您的网站将响应横向桌面，IPhone， IPad 等。您还可以为移动设备和桌面创建滑块，只需将显示设置为 none。

/* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
            .slider {
               display:none;
             }

    }

以下是几乎所有设备都可以使用的其他媒体查询。

/*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }