Question

我是编码的初学者，目前正在制作一个单一作业的应用程序。我目前只使用html和css，直到我做对，然后我将添加JavaScript。我遇到的问题是我的代码对我需要的设备设备响应Chrome，但是当我在任何其他浏览器和Mac上预览时，@ media规则似乎不起作用。

这是我目前的css

body {
background-color:#F4BAAE;
background-image:url("Images/Pattern Landscape.png");
background-size:cover;      

        }

    #logo {
        background-image: url("Images/Logo.png");
        background-repeat:no-repeat;
        background-size 400px 400px;
        width:100vw;
        height:100vh;
        background-position:top;
        position:fixed;
        margin:-10px;
    }   

    #start {
        background-image:url("Images/Start.png");
        background-repeat:no-repeat;
        position:fixed;
        border-radius:15px;
        background-position:bottom;
        width:600px;
        height:300px;

    }




    /* ----------- Webpages ----------- */  

    @media only screen and (min-device-width:1024px) {
        #start {
            background-size: 600px 300px;       
            top: 80%;
            left: 50%;
            transform: translate(-50%, -20%);

        }

        #logo {
            background-size:500px;
            top:80px;
        }
    } 

    /* ----------- Iphone 6 ----------- */  

    /* Portrait and Landscape */
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 
        #start {
            background-size:180px 80px;
            width:180px;
            height:80px;
        }

        body {
            background-size:667px auto;
        }
    }

    /* Portrait */
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) { 
        #start {
            top: 90%;
            left: 50%;
            transform: translate(-50%, -80%);
        }

        #logo {
            background-size: 150px;
            top:54px;
        }
    }


    /* Landscape */
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) { 
        #start {
            top: 90%;
            left: 50%;
            transform: translate(-50%, -80%);
        }

        #logo {
            background-size:130px;
            top:40px
        }
    }




    /* ----------- Ipad ----------- */  

    /* Portrait and Landscape */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
        body {
            background-size:1024px auto;
        }
    }


    /* Portrait */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
        #start {
            background-size: 400px 180px;               
            top: 90%;
            left: 50%;
            transform: translate(-50%, -80%);
        }

        #logo {
            background-size:300px;
            top:50px
        }
    }


    /* Landscape */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
        #start {
            top: 90%;
            left: 50%;
            transform: translate(-50%, -90%);
            background-size: 340px 130px;

        }

        #logo {
            background-size:320px;
            top:50px;
        }

    }





    /* ----------- Galaxy S4 ----------- */

    /* Portrait and Landscape */
    @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
        #start {
            background-size:180px 80px;
            width:180px;
            height:80px;
            }

        body {
            background-size:640px auto;
           }

        }


    /* Portrait */
    @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
        #start {
            top: 90%;
            left: 50%;
            transform: translate(-50%, -90%);
        }

        #logo {
            background-size:150px;
            top:54px;
            left:10px;
        }




    /* Landscape */
    @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
        #start {
            top: 90%;
            left: 50%;
            transform: translate(-50%, -90%);
        }

        #logo {
            background-size:130px;
            top:40px;
        }                   
    }

Answer 1

丢失'设备'@media (min-width: 600px) { ... }

另一方面......我赞赏你的努力工作，但你的事情变得过于复杂。

body {
  background: red;
}

@media (min-width: 400px) {
  background: blue;
}

@media (min-width: 700px) {
  background: green;
}

小屏幕优先......没有设备特定的定位...当事情变得丑陋时创造一个休息时间...重复......

（你可以使用'只有屏幕和'如果你研究它并认为它很重要）（我会放弃用于造型的ID ......使用类）

Answer 2

媒体查询中有-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio等。 -webkit-*是浏览器前缀，仅适用于safari / chrome。除非您只想为基于webkit的浏览器触发媒体查询，否则您可能希望使用这些浏览器的非前缀版本。与device-pixel-ratio，min-device-pixel-ratio等

相同

@media不在不同的浏览器中工作

2 个答案: