不针对 iPhone 的 CSS 媒体查询

Question

我的 css 文件有问题。这些样式并未应用于 iPhone，而是将 iPad 查询应用于 iPhone 和 iPad。我已经检查并检查了错别字，但找不到任何错别字。这是我用于 iPad 和 iPhone 查询的 css 文件：

css

/*MEDIA-QUERIES-iPAD////////////////////////////////////////////////////////////////////////////////*/

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

        body,
        html {
          position: fixed;}

        #menu {display: none;}


        #presentacion {
            padding: 0;
            position: fixed;
            display: inline-block;
            text-align: center;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .buttons {

            opacity: 1;

        }

        #previous {


            background-position: 70px 45%;
            -webkit-tap-highlight-color: transparent;
            left: -90px;
            width: 25%;
            height: 100%;
            z-index: 4;
            position: absolute;
        }

        #next {


            background-position: 110px 45%;
            -webkit-tap-highlight-color: transparent;
            right: -90px;
            width: 25%;
            height: 100%;
            z-index: 4;
            position: absolute;
        }

        #info {

            font-size: 2em;

        }

        h1 {
                line-height: 8vh;
                font-size: 2.1em;
        }


        ul {
            margin-right: 2em;
        }

        #front {
            height: 750px;
        }

        #imagewrap {

            top: 10%;
            display: block;
            margin: 0 auto;
            width: 80%;
            height: 80%;
        }

        #front {
            background-color: red;
        }

        #header {
            height: 8vh;
        }

        .sections {
            width: 900px;
            height: 500px;
            margin: 0 auto;
            overflow-y: hidden;
            top: 5%;
            padding: none;
         }

            .sections p {
            font-family: Galliard;
            display: block;
            font-size: 1.1em;
            line-height: 2em;
            margin-bottom: 2em;
            padding-right: 100px; /*important*/
            padding-left: 100px; /*important*/
            color: #666;
            text-align: left;
        }

        #about.sections  {
            height: 650px;
        }

        #about.sections p {
            padding-left: 125px;
            padding-right: 125px;
        }

        .littleImages {
            height: 125px;
            width: 125px;
            margin: 15px;
            box-shadow: 0px 0px 15px 5px #dcdcdc;
        }


    }

    /*MEDIA-QUERIES-iPHONE////////////////////////////////////////////////////////////////////////////////*/

    @media screen and (min-width: 375px) and (max-width: 767px) {


        #front {
            z-index: 6;
            margin: 50% auto 0;
            height: 85%;}

        #container {
            position: relative;
            height: 100vh;
            width: 100vw;
            background-color: green;
            overflow-y: scroll;
            text-align: center;
        }


        #imagewrap {
            margin-top: 400px;
        }

        #header {
            height: 20vh;
            background-color: red;
        }

        .sections {
            width: 900px;
            height: 650px;
            margin: 0 auto;
            overflow-y: hidden;
            top: 15%;
            padding: 50px 50px 50px 50px;
         }

            .sections p {
            font-family: Galliard;
            display: block;
            font-size: 1.1em;
            line-height: 2em;
            margin-bottom: 2em;
            padding-right: 100px; /*important*/
            padding-left: 100px; /*important*/
            color: #666;
            text-align: left;
        }

        .buttons {

            opacity: 1;

        }


        #info {

            font-size: 2em;

        }

        #about.sections  {
            height: 650px;
        }

        #about.sections p {
            padding-left: 125px;
            padding-right: 125px;
        }

        .littleImages {
            height: 125px;
            width: 125px;
            margin: 15px;
            box-shadow: 0px 0px 15px 5px #dcdcdc;
        }

            #previous {

                background-position: 70px 45%;
                -webkit-tap-highlight-color: transparent;
                left: -90px;
                width: 25%;
                height: 100%;
                z-index: 4;
                position: absolute;
            }

            #next {


                background-position: 110px 45%;
                -webkit-tap-highlight-color: transparent;
                right: -90px;
                width: 25%;
                height: 100%;
                z-index: 4;
                position: absolute;
            }

    }

我没有看到任何会阻止代码运行的明显拼写错误或错误。为什么媒体查询不起作用？任何帮助表示赞赏。谢谢。

Answer 1

这可能是因为没有设置视口：https://www.w3schools.com/css/css_rwd_viewport.asp 至少我在您的代码中没有看到任何视口。

还有；我总是学会为每种屏幕类型设置单独的样式表。它更易于维护，移动用户不必拉入不必要的 iPad css。

为此，我将媒体查询与视口一起放在 head 标签之间。每个媒体查询都链接到一个单独的 .css 文件

这是一个使用两种样式的 HTML 文件的示例。我相信您可以通过使用“and”来扩展媒体查询，这将允许您使用特定样式表来实现最小和最大之间的屏幕尺寸。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <link rel="stylesheet" href="reset.css" type="text/css">    <!-- My CSS reset -->
        <link rel="stylesheet" href="style.css" type="text/css">    <!-- My main style, also for PC... -->
        <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" />    <!-- Mediaquery that detects mobile screens and serves them the other stylesheet-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    <!-- viewport -->
    </head>
    <body>
        <p>Responsive text goes here.</p>
    </body>
</html>