更改分辨率时css不会响应

时间:2013-03-18 07:22:20

标签: wordpress responsive-design media-queries

我正在使用wordpress中的自定义主题,我想在移动设备上查看时添加某些格式(320px min - 400 max)

元标记:

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

的CSS:

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

.logo{margin-left:0px !important}
.content{width:100% !important; }
.mainmenu {background:rgba(0,0,0,0.6) !important; }
.mainmenu li{padding:0 5px !important;}
.mainmenu li a{font-size:18px !important; font-family:'impactregular' !important;     color:#000 !important;}   
}

@media only screen 
and (min-width : 1000px) {
    .logo{float:left;}
}

现在由于某种原因,它检测到1000px但不是更小..不确定我在这里做错了什么。

这是我要修复的网站的link。提前谢谢。

1 个答案:

答案 0 :(得分:0)

它会帮助你。 Media Queries for standard devices.

并将其用作元标记。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />