Question

我正在尝试编写媒体查询，以使网站在iPad中看起来正常。

我将所有设备css文件都作为mobile.css。在mobile.css下，这是我如何进行一些更改。

以下是CSS代码段。

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


 .tobeaddedtobutton {
    background-color: transparent;
    width: 100%;
    height: 35px;
    border-radius: 0px;
    background-image: url("../assets/tablet/btn-border-yellow.png");
    background-repeat: no-repeat;
    text-align: left;
    font-family: Signika;
    color: white;
    border: none;
    font-size: 13px;
     }

     .tobeaddedtobutton-1 {
     background-color: transparent;
     width: 100%;
     height: 35px;
     border-radius: 0px;
     background-image: url("../assets/tablet/btn-border-orange.png");
     background-repeat: no-repeat;
     text-align: left;
     font-family: Signika;
     color: white;
     border: none;
     font-size: 13px;
     }
    }

当设备是iPad时，我只是想在按钮上添加不同的边框图像。但是当我在这个媒体查询下改变路径时，浏览器正在为所有设备读取此代码，这是不正确的。

我做得对吗？

请建议。

Answer 1

这些是我使用的媒体查询。我使用Google Chrome Tools在移动设备屏幕尺寸之间切换。

我注意到即使Google Chrome浏览器的工具看起来很糟糕，但很多时候我还要破解媒体查询，以便在实际设备上正常运行。不幸的是，你永远都不知道，直到你可以在实际的设备上进行测试。

为了给你提供很多不同的工作媒体查询示例，我将我的风格从我以前工作过的网站中删除。

如果您需要我澄清任何事情，请告诉我们。

/* Iphone 4 */
@media screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
{ 
    .newsletterDownload a  { 
        padding-left: 25px;
    }
}

/* Iphone 5 */
@media screen 
and (min-device-width: 320px) 
and (max-device-width: 568px) 
{ 
    .newsletterDownload a  { 
        padding-left: 25px;
    }
}

/* Iphone 6 */
@media screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) { 
    .newsletterDownload a  { 
        padding-left: 50px;
    }
}

/* Iphone 6 plus */
@media screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
{ 
    .newsletterDownload a  { 
        padding-left: 80px;
    }
}

/* I Pad Portrait */
@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
{  
.newsletterDownload a  { 
    padding-left: 20px;
}
.hours  { 
    padding-left: 0px;
}
}

/* I Pad Landscape */
@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
{ 
.newsletterDownload a  { 
    padding-left: 80px;
}
}

/* Blackberry Play Book*/
@media screen 
and (min-device-width : 600px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
{ 
.newsletterDownload a  { 
    padding-left: 50px;
}
.hours {
    padding-left: 16px;
}
}

/* Blackberry Z30 */
@media screen 
and (min-device-width: 360px) 
and (max-device-width: 640px) 
{ 
    .newsletterDownload a  { 
        padding-left: 47px;
    }
}

/* Nexus 6 */
@media screen 
and (min-device-width: 412px) 
and (max-device-width: 732px) 
{ 
    .newsletterDownload a  { 
        padding-left: 78px;
    }
}

/* Nexus 7 */
@media screen 
and (min-device-width: 600px) 
and (max-device-width: 960px) 
and (orientation : portrait) 
{ 
    .newsletterDownload a  { 
        padding-left: 37px;
        font-size: 1em;
    }
}

/* Nexus 7 */
@media screen 
and (min-device-width: 600px) 
and (max-device-width: 960px) 
and (orientation : landscape) 
{ 
    .newsletterDownload a  { 
        padding-left:85px;
        font-size: 1em;
    }
}

这是带背景图片的iphone。请记住，您必须确保为每个尺寸的屏幕以及横向视图和纵向视图获取所有Iphone查询。

   /* Iphone 6 plus */
    @media screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    { 
        .MyClass  { 
            background-image: url('filePathTo/image.png') repeat-x;
        }
    }

Answer 2

我认为有一个特定的媒体查询屏幕像素比（dpi），所以你可以检测视网膜设备（如iPhone或平板电脑），你可以添加一个简单的最小宽度，你去...平板电脑查询

示例：



    @media only screen and (min-width: 320px) {

      /* Small screen, non-retina */

    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
    only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
    only screen and (                min-resolution: 192dpi) and (min-width: 320px),
    only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

      /* Small screen, retina, stuff to override above media query */

    }

    @media only screen and (min-width: 700px) {

      /* Medium screen, non-retina */

    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
    only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
    only screen and (                min-resolution: 192dpi) and (min-width: 700px),
    only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

      /* Medium screen, retina, stuff to override above media query */

    }

    @media only screen and (min-width: 1300px) {

      /* Large screen, non-retina */

    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
    only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
    only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
    only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

      /* Large screen, retina, stuff to override above media query */

    }

iPad和其他平板电脑设备的媒体查询

2 个答案: