Question

我在制作自适应网页时遇到问题。（请注意，在实际页面中，我使用％表示字体大小，但是对于视觉辅助的剥离测试版本，使用了pt大小。）

我包含了viewport meta并尝试了几个版本，包括：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-  
scalable=no">

和此：

<meta name="viewport" content="width=device-width, user-scalable=no">

我已经尝试过＆＃34; @media only screen＆＃34;在下面也是。

以下是剥离版本的CSS ...我尝试了很多很多变种：

*.div-top-nav {
    width: 773px;
    float: right;
    text-align: right;
    margin-top: 2px;
    margin-right: 0px;
    background-color: #6f881d;
   -moz-border-radius: 8px;
       -webkit-border-radius: 8px;
       -khtml-border-radius: 8px;
       border-radius: 8px;
   -moz-box-shadow: inset 0 0 10px 1px #FFFFFF;
   -webkit-box-shadow: inset 0 0 10px 1px #FFFFFF;
   box-shadow: inset 0 0 10px 1px #FFFFFF;  
   font-size: 40pt;
}


@media screen and (device-width: 768px) and (orientation: landscape) { 
    *.div-top-nav {
    width: auto !important;
    max-width: 748px !important;
    float: none  !important;    
    text-align: center;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 20pt;
    }
}

@media screen and (min-device-width: 320px) and (max-device-width: 480px) { 
    *.div-top-nav {
    width: auto !important;
    max-width: 440px !important;
    float: none  !important;
    text-align: center;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 20pt;
    }
}

更新：问题

我希望div的比例和字体大小随着屏幕大小的变化而变化，但它不会那样。

Answer 1

请勿将device-width用于桌面。您的媒体查询应该适用于实际设备，但不能在您调整浏览器大小时使用。

device-width指的是显示的宽度，而width是窗口本身的宽度。所以在你的情况下你应该使用：

@media screen and (min-width: 320px) and (max-width: 480px) {
    .... etc

响应式设计。 Div不缩放，字体大小不变

1 个答案: