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

时间:2014-05-02 16:40:04

标签: html css

我在制作自适应网页时遇到问题。 (请注意,在实际页面中,我使用%表示字体大小,但是对于视觉辅助的剥离测试版本,使用了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的比例和字体大小随着屏幕大小的变化而变化,但它不会那样。

1 个答案:

答案 0 :(得分:1)

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

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

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