[英]Mediawiki media query wont take effect on browser resize when using firefox and IE
<meta name="viewport" content="width=min-width, initial-scale=1.0">
@media (max-width: 455px) and (orientation: portrait) {
#border-search {
display: none;
}
#n-recentchanges {
visibility: hidden;
}
#n-randompage {
display: none;
}
/*sidebar appearance*/
#column-one {
background: none repeat scroll 0 0 #5B5B5B;
float: left;
text-align: center;
margin: 0 0 0 1%;
min-height: 149px;
padding: 10px 20px;
position: absolute;
font-size: 90%;
top: 5px;
height: 1px;
left: 6%;
width: 15%;
}
#n-home {
position: relative;
top: 0px;
left: -8px;
}
#n-sign-up {
position: relative;
top: 5px;
left: 0px;
}
#n-help {
position: relative;
top: 13px;
left: -4px;
}
#n-add-pix {
position: relative;
top: 19px;
left: 0px;
}
#column-content {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
margin: 0 1%;
padding: 10px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
#button .hidetext {
background: none repeat scroll 0 0 #5B5B5B;
display: block;
color: #99D9EA;
margin: 0 1%;
position: relative;
float: right;
border: 0px;
top: 95px;
left: 53%;
}
#ca-edit {
position: relative
}
/*edit page nav*/
.top_header {
background: none repeat scroll 0 0 #5B5B5B;
display: none;
float: right;
margin: 0 1% 40px;
padding: 30px 10px;
width: 60%;
height: 60px;
position: relative;
top: -370px;
left: -10%;
}
#p-cactions {
float: left;
display: none;
}
#p-cactions li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 35px 0 0;
text-align: left;
position: relative;
left: 10%;
}
#p-personal {
float: left;
display: none;
}
.top_header ul {
margin: 0;
padding: 0;
}
#p-cactions {
float: left;
}
#p-personal li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 15px 0 0;
}
#column-content #bodyContent {
color: #7b377b;
float: left;
font-size: 115%;
margin: 15px 0 15px 50px;
width: 94%;
}
#column-one h3 {
display: none;
}
#column-one ul {
margin: 0;
}
.mw-ui-vform-field {
width: 70%;
}
/*control font size*/
#column-one li {
font-size: 18px;
list-style: outside none none;
margin: 1px 0;
text-align: center;
}
/*control special page layout*/
.mw-ui-input {
width:80%;
}
#wpLoginAttempt {
width: 70%;
}
.mw-submit {
width:70%;
}
/*control search input text color and font*/
#searchInput {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 4px solid #000000;
box-shadow: none;
position: relative;
top: -60px;
text-align: center;
left: 400%;
float: right;
color: #99D9EA;
padding: 8px;
width: 92px;
z-index: 3;
}
.rectangle-box {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: block;
margin: 0 1% 40px;
position: relative;
width: 60%;
height: 130px;
left: 0%;
top: 35px;
}
.rectangle-box2 {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: none;
margin: 0 1% 0 40px;
height: 400px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
}
我仅使用的媒体查询似乎已被Chrome和Opera识别。 我正在尝试使用此媒体查询来调整我的网站的大小,但是当我将浏览器窗口更改为该大小时,该查询不会生效。 我该怎么做才能解决此问题? 我的代码有问题吗? 什么会导致这种情况仅在某些浏览器中发生?
变更viewport
<meta name="viewport" content="width=device-width">
就我使用媒体查询而言,我从未使用和 。 而且我确定问题是由它引起的。 删除它,并使它像这样:
@media (min-width: 368px) {...}
and
将不在 @media
和(min-width: 368px)
,但将在两个()之间,即:
@media (min-width: 368px) and (orientation: landscape) {...}
编辑:
我目前正在移动设备上,很抱歉无法测试代码。 但是我认为正确的查询是max-width
,而不是min-width
。 因此,只需将min-width替换为max-width。
Mustaghees是正确的。 删除第一个“和”。
这是当浏览器大小达到min-width:368px
时,如果您对背景颜色进行了任意更改,它将是什么样子:
通过更改媒体查询的顺序解决了该问题。 在我的编码面板中,它们之前已被淘汰。 通过以不同的顺序剪切和粘贴查询,此操作就消失了。 现在,查询可在所有浏览器中使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.