Question

我曾尝试为移动设备和平板电脑创建媒体查询，当我使用普通浏览器（在我的桌面计算机上并将屏幕设置得更小）时，它们可以正常工作，但是当我在实际手机或平板电脑。我已经完成了CSS和HTML验证，所以我无法想象它会是那样。

我的网站已在我的大学服务器上运行，因此您可以从那里查看我的媒体查询：http://stc110.edu.csesalford.com/或http://stc110.edu.csesalford.com/general.css

这些是我的媒体查询：

/*Styles for screen 600px and lower*/
@media handheld, screen and (max-width: 600px) {
    #navigation { 
        height: auto;
    }
    #navigation ul {
        width: 100%;
        display: block;
        height: auto;
    }
    #navigation li {
        width: 50%;
        float: left;
        position: relative;
    }
    #navigation li a {
        border-bottom: 1px solid #ff9999;
        border-right: 1px solid #ff9999;
    }
    #navigation a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
    header {
        padding-top: 30px; 
    }
}

/*Styles for screen 480px and lower*/
@media handheld, screen and (max-width : 480px) {
    #navigation {
        border-bottom: 0;
    }
    #navigation ul {
        display: none;
        height: auto;
    }
    #navigation a#pull {
        display: block;
        background-color: #ff6666;
        width: 100%;
        position: relative;
    }
    #navigation a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media handheld {
    #navigation {
        border-bottom: 0;
    }
    #navigation ul {
        display: none;
        height: auto;
    }
    #navigation a#pull {
        display: block;
        background-color: #ff6666;
        width: 100%;
        position: relative;
    }
    #navigation a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

Answer 1

请将以下代码放在头部

中

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 2

@media handheld已被弃用。

相反，请使用：

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

和

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

为什么我的媒体查询不起作用？

2 个答案: