/*media queries start here*/
/*this is for modern laptops*/
@media screen and (max-width: 1336px) {
.rectangle-box {
position: relative !important;
width: 10% !important;
height: 82% !important;
left: 10% !important;
top: -10% !important;
}
#p-cactions {
top: 461px;
left: 410px;
}
#button {
display: none !important;
position: relative !important;
top: -20% !important;
left: 10% !important;
z-index: 200 !important;
}
}
/*this is for tablets*/
@media screen and (max-width: 1040px) {
#border-search {
position: absolute !important;
top: 80px !important;
left: 130px !important;
z-index: 1 !important;
}
#searchform {
position: relative !important;
left: -90% !important;
top: 0% !important;
}
#p-cactions {
visibility: hidden;
position: absolute !important;
top: 461px !important;
left: 30px !important;
z-index: 0 !important;
}
#mw-searchButton {
position: relative !important;
left: 210px !important;
top: -460px !important;
}
#searchInput {
position: relative !important;
top: -476px !important;
left: -85px !important;
z-index: 2 !important;
}
li#n-mainpage-description {
visibility: visible;
position: relative;
color: #FF7F27;
top: 20px;
left: -20px;
z-index: 300;
}
li#n-recentchanges {
visibility: visible;
position: relative;
color: #FF7F27;
top: 20px;
left: -40px;
z-index: 300;
}
li#n-randompage {
visibility: visible;
position: relative;
color: #FF7F27;
top: 20px !important;
left: -30px !important;
z-index: 300;
}
li#n-help {
visibility: visible;
position: relative;
color: #FF7F27;
top: -65px !important;
left: 120px !important;
z-index: 300;
}
li#n-add-pix {
visibility: visible;
position: relative;
color: #FF7F27;
top: -85px !important;
left: 220px !important;
z-index: 300;
}
/*media query edit links that appear only when logged in*/
#ca-move {
font-weight: bold;
position: relative;
top: 40px !important;
left: 500px !important;
background: transparent;
}
#ca-delete {
font-weight: bold;
position: relative;
color: #FF7F27;
top: -15px !important;
left: 400px !important;
text-indent:0;
display:block;
background: transparent;
}
#ca-watch {
font-weight: bold;
position: relative;
color: #FF7F27;
background: transparent;
top: 35px !important;
left: 590px !important;
text-indent:0;
}
#ca-edit {
font-weight: bold;
position: relative;
top: 15px !important;
left: 510px !important;
}
#ca-protect {
font-weight: bold;
position: relative;
top: 20px !important;
left: 415px !important;
background: transparent;
}
#ca-unwatch {
font-weight: bold;
position: relative;
top: 40px !important;
left: 570px !important;
background: transparent;
}
/*media query edit links that appear when logged in and logged out*/
#ca-history {
font-weight: bold;
position: absolute;
top: -10px !important;
left: 590px !important;
}
#ca-talk {
font-weight: bold;
color: #FF7F27;
position: relative;
top: -10px !important;
left: 310px !important;
}
#ca-nstab-special {
font-weight: bold;
color: #FF7F27;
position: relative;
top: -10px !important;
left: 600px !important;
}
#ca-nstab-main {
font-weight: bold;
visibility: visible;
color: #FF7F27;
position: relative;
top: 20px !important;
left: 700px !important;
}
/*media query personal links*/
li#pt-mycontris {
visibility: visible;
position: relative;
top: 250px !important;
left: 140px !important;
z-index: 300;
}
li#pt-watchlist {
visibility: visible;
visibility: visible;
position: relative;
top: 250px !important;
left: 380px !important;
z-index: 300;
}
li#pt-preferences {
visibility: visible;
position: relative;
top: 220px !important;
left: 390px !important;
z-index: 300;
}
li#pt-mytalk {
visibility: visible;
position: relative;
top: 225px !important;
left: 600px !important;
z-index: 300;
}
li#pt-logout {
position: relative;
top: 280px !important;
left: 130px !important;
z-index: 1;
background: transparent;
}
}
/*this is for portrait smartphone mode. don't use the !important tag. it stops it from working*/
@media screen and (max-width: 350px) {
#border-search {
position: absolute;
top: 50% !important;
left: 25% !important;
display: none;
}
#searchform {
position: relative !important;
left: -70% !important;
top: 30% !important;
}
.rectangle-box {
position: relative !important;
width: 80% !important;
height: 12% !important;
left: 10% !important;
top: -10% !important;
}
.rectangle-box2 {
position: absolute !important;
width: 80% !important;
height: 50% !important;
left: 10% !important;
top: 12% !important;
}
#column-content {
position: relative !important;
display: block;
width: 90% !important;
margin: 1% !important;
left: -4% !important;
top: 30% !important;
}
#p-cactions {
z-index: 1;
display: none;
position: absolute;
top: 40%;
left: 410px;
}
#button {
display: block !important;
position: relative !important;
top: -20% !important;
left: 10% !important;
z-index: 200 !important;
}
#p-personal {
display: none;
position: relative;
top: 280px;
left: 130px;
z-index: 1;
background: transparent;
}
/*media query edit links that appear only when logged in*/
#ca-move {
font-weight: bold;
position: relative;
top: 40px !important;
left: 500px !important;
background: transparent;
}
#ca-delete {
font-weight: bold;
position: relative;
color: #FF7F27;
top: -15px !important;
left: 400px !important;
text-indent:0;
display:block;
background: transparent;
}
#ca-watch {
font-weight: bold;
position: relative;
color: #FF7F27;
background: transparent;
top: 35px !important;
left: 590px !important;
text-indent:0;
}
#ca-edit {
font-weight: bold;
position: relative;
top: 15px !important;
left: 510px !important;
}
#ca-protect {
font-weight: bold;
position: relative;
top: 20px !important;
left: 415px !important;
background: transparent;
}
#ca-unwatch {
font-weight: bold;
position: relative;
top: 40px !important;
left: 570px !important;
background: transparent;
}
/*media query edit links that appear when logged in and logged out*/
#ca-history {
font-weight: bold;
position: absolute;
top: -10px !important;
left: 590px !important;
}
#ca-talk {
font-weight: bold;
color: #FF7F27;
position: relative;
top: -10px !important;
left: 310px !important;
}
#ca-nstab-special {
font-weight: bold;
color: #FF7F27;
position: relative;
top: -10px !important;
left: 600px !important;
}
#ca-nstab-main {
font-weight: bold;
display: block;
color: #FF7F27;
position: relative !important;
top: 20px !important;
left: 100px;
}
/*media query personal links*/
li#pt-mycontris {
visibility: visible;
position: relative;
top: 250px !important;
left: 140px !important;
z-index: 300;
}
li#pt-watchlist {
visibility: visible;
visibility: visible;
position: relative;
top: 250px !important;
left: 380px !important;
z-index: 300;
}
li#pt-preferences {
visibility: visible;
position: relative;
top: 220px !important;
left: 390px !important;
z-index: 300;
}
li#pt-mytalk {
visibility: visible;
position: relative;
top: 225px !important;
left: 600px !important;
z-index: 300;
}
li#pt-logout {
position: relative;
top: 280px !important;
left: 130px !important;
z-index: 1;
background: transparent;
}
/*navigation links*/
#n-home {
position: absolute !important;
top: 10% !important;
left: 10% !important;
z-index: 1;
background: transparent;
}
#n-sign-up {
position: absolute !important;
top: 18% !important;
left: 10% !important;
z-index: 1;
background: transparent;
}
}
/*smartphone 4 to 4.5*/
@media screen and (min-width: 400px) {
#border-search {
position: absolute;
top: 50% !important;
left: 25% !important;
display: none;
}
#searchform {
position: relative !important;
left: -70% !important;
top: 30% !important;
}
.rectangle-box {
position: relative !important;
width: 80% !important;
height: 12% !important;
left: 10% !important;
top: -10% !important;
}
.rectangle-box2 {
position: absolute !important;
width: 80% !important;
height: 50% !important;
left: 10% !important;
top: 12% !important;
}
#column-content {
position: relative !important;
display: block;
width: 90% !important;
margin: 1% !important;
left: -4% !important;
top: 30% !important;
}
#p-cactions {
z-index: 1;
display: none;
position: absolute;
top: 40%;
left: 410px;
}
#button {
display: block !important;
position: relative !important;
top: -20% !important;
left: 10% !important;
z-index: 200 !important;
}
#p-personal {
display: none;
position: relative;
top: 280px;
left: 130px;
z-index: 1;
background: transparent;
}
/*media query edit links that appear only when logged in*/
#ca-move {
font-weight: bold;
position: relative;
top: 40px !important;
left: 500px !important;
background: transparent;
}
#ca-delete {
font-weight: bold;
position: relative;
color: #FF7F27;
top: -15px !important;
left: 400px !important;
text-indent:0;
display:block;
background: transparent;
}
#ca-watch {
font-weight: bold;
position: relative;
color: #FF7F27;
background: transparent;
top: 35px !important;
left: 590px !important;
text-indent:0;
}
#ca-edit {
font-weight: bold;
position: relative;
top: 15px !important;
left: 510px !important;
}
#ca-protect {
font-weight: bold;
position: relative;
top: 20px !important;
left: 415px !important;
background: transparent;
}
#ca-unwatch {
font-weight: bold;
position: relative;
top: 40px !important;
left: 570px !important;
background: transparent;
}
/*media query edit links that appear when logged in and logged out*/
#ca-history {
font-weight: bold;
position: absolute;
top: -10px !important;
left: 590px !important;
}
#ca-talk {
font-weight: bold;
color: #FF7F27;
position: relative;
top: -10px !important;
left: 310px !important;
}
#ca-nstab-special {
font-weight: bold;
color: #FF7F27;
position: relative;
top: -10px !important;
left: 600px !important;
}
#ca-nstab-main {
font-weight: bold;
display: block;
color: #FF7F27;
position: relative !important;
top: 20px !important;
left: 100px;
}
/*media query personal links*/
li#pt-mycontris {
visibility: visible;
position: relative;
top: 250px !important;
left: 140px !important;
z-index: 300;
}
li#pt-watchlist {
visibility: visible;
position: relative;
top: 250px !important;
left: 380px !important;
z-index: 300;
}
li#pt-preferences {
visibility: visible;
position: relative;
top: 220px !important;
left: 390px !important;
z-index: 300;
}
li#pt-mytalk {
visibility: visible;
position: relative;
top: 225px !important;
left: 600px !important;
z-index: 300;
}
li#pt-logout {
position: relative;
top: 280px !important;
left: 130px !important;
z-index: 1;
background: transparent;
}
/*navigation links*/
#n-home {
position: absolute !important;
top: 10% !important;
left: 10% !important;
z-index: 1;
background: transparent;
}
#n-sign-up {
position: absolute !important;
top: 18% !important;
left: 10% !important;
z-index: 1;
background: transparent;
}
/*smartphone landscape mode*/
}
/*media queries end here*/
我的媒体查询为每个查询显示相同的布局。应该改变。我之前测试过他们现在正在工作他们停止了工作。这是我的媒体查询的所有代码。我在移动设备上测试了它们，这是我的镭拓，布局看起来完全一样。为什么会这样？