Question

所以我试图让这个小网站响应，但出于某种原因，每当我使用媒体查询来设置设备的最大和最小宽度时它似乎并不遵循它，我的意思是如果我为iphone 5设置一个响应式设计，那么它将暂时用于iphone 5，如果我然后尝试为Ipad做响应式设计，那么iphone 5将被忽略，现在它遵循Ipad的响应式设计，可以有人请帮忙？这是我的代码（语法......虽然它不是编程语言lol：P

源代码

/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {

    h1{
        font-size: 24px;
        text-align: center;
    }
    h2{
        transform: translateX(40%);
        margin-bottom: 15px;
    }
    h3{
        font-size: 18px;
        text-align: center;
        margin-bottom:15px;
    }
    input[type=submit] {
        width: 250px; 
        transform: translateX(10%);
    }
    .relocate{margin-top: -55px;}

    .form .email{
    width: 275px;
    transform: translateX(8%);
    }
    .form select{
        width: 275px;
        transform: translateX(8%);
    }
}



/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px){

    h1{
        font-size: 24px;
        text-align: center;
    }
    h2{
        transform: translateX(47%);
        margin-bottom: 15px;
    }
    h3{
        font-size: 24px;
        text-align: center;
        margin-bottom:15px;
    }
    input[type=submit] {
        width: 650px; 
        transform: translateX(10%);
    }
    .relocate{margin-top: -55px;}

    .form .email{
    width: 345px;
    transform: translateX(8%);
    }
    .form select{
        width: 325px;
        transform: translateX(8%);
    }
}
@media only screen and (max-device-width: 1024px){

    h1{
        font-size: 24px;
        text-align: center;
    }
    h2{
        transform: translateX(49%);
        margin-bottom: 15px;
    }
    h3{
        font-size: 24px;
        text-align: center;
        margin-bottom:15px;
    }
    input[type=submit] {
        width: 800px; 
        transform: translateX(10%);
    }
    .relocate{margin-top: -55px;}

    .form .email{
    width: 460px;
    transform: translateX(8%);
    }
    .form select{
        width: 450px;
        transform: translateX(8%);
    }


}



/* Desktops and laptops ----------- */
@media only screen 
and (min-device-width : 1025px)
and (max-device-width : 1140px){

    h1{
        font-size: 29px;
        text-align: center;
    }
    h2{
        transform: translateX(49%);
        margin-bottom: 15px;
    }
    h3{
        font-size: 24px;
        text-align: center;
        margin-bottom:15px;
    }
    input[type=submit] {
        width: 800px; 
        transform: translateX(10%);
    }
    .relocate{margin-top: -55px;}

    .form .email{
    width: 460px;
    transform: translateX(8%);
    }
    .form select{
        width: 450px;
        transform: translateX(8%);
    }
}



/* iPhone 5 (portrait &amp; landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}

/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

Answer 1

尝试添加

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

作为html网站的元标记。

如果没有此元标记，移动浏览器就不会知道网站负责并以兼容模式进入，这样网站就不会关注媒体查询。

Css查询是不是让事情响应？

1 个答案: