我的@media查询不';我似乎没有覆盖我原来的CSS
我什么都试过了。我尝试过多次刷新页面,我尝试过上传各种方法来确保css文件得到更新。似乎什么都不管用。我的媒体查询似乎没有覆盖它们,但在Dreamweaver中,它们工作得很好 以下是CSS的代码:我的@media查询不';我似乎没有覆盖我原来的CSS,css,media,mobile,Css,Media,Mobile,我什么都试过了。我尝试过多次刷新页面,我尝试过上传各种方法来确保css文件得到更新。似乎什么都不管用。我的媒体查询似乎没有覆盖它们,但在Dreamweaver中,它们工作得很好 以下是CSS的代码: header { width: 100%; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; position: fixed; top: 10px; left: 0px;
header {
width: 100%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
position: fixed;
top: 10px;
left: 0px;
right: 0px;
height: 55px;
border-bottom: 4px solid #636466;
margin-bottom: 10px;
margin-top: 0px;
}
#logo {
float: left;
background-image: url(wordsbyperla_wordpress%20header_small.png);
background-repeat: no-repeat;
height: 50px;
width: 40%;
position: absolute;
margin-top: 24px;
max-width: 411px;
background-size: 100%;
min-width: 300px;
background-position: bottom;
margin-bottom: 10px;
}
nav {
top: 40px;
position: absolute;
right: 3%;
width: auto;
vertical-align: text-bottom;
height: auto;
padding: 0;
font-size: 12px;
}
nav li {
list-style: none;
display: inline-block;
vertical-align: bottom;
height: auto;
top: auto;
}
.menu-item {
text-decoration: none;
list-style: none;
font-family: "Courier";
background-color: transparent;
width: auto;
display: inline-block;
margin-right: 20px;
}
.menu-item a , .menu-item a:visited, .menu-item a:active{
color: #000;
text-decoration: none;
list-style: none;
}
.menu-item a:hover {
color: #EC2726;
}
#searchform {
font-family: "Courier";
border: 1px solid #000000;
margin-bottom: 1px;
background-color: #fff;
}
#s {
border: none;
font-family: "Courier";
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
background-color: transparent;
margin-left: 5px;
}
#searchsubmit {
border: none;
font-family: "Courier";
margin: 0;
background-color: transparent;
}
#contentWrap {
position: absolute;
top: 100px;
right: 0px;
width: 100%;
overflow: auto;
bottom: 50px;
margin-right: 0px;
margin-top: 10px;
margin-left: 0px;
}
.meta {
width: 25%;
position: relative;
font-family: "Courier";
font-size: 12px;
margin-top: 20px;
margin-right: 70%;
margin-left: 0px;
max-width: 200px;
min-width: 100px;
}
.meta div {
text-decoration: none;
text-align: right;
padding-right: 20px;
padding-top: 0px;
}
.meta div a {
text-decoration: none;
color: #000;
}
.meta div a:hover, .meta div a:active {
color: #EC2726;
}
.meta span {
color: #EC2726;
text-transform: lowercase;
}
#tags {
color: #000;
margin-right: 10px;
right: auto;
width: auto;
}
.meta .pagination {
position: fixed;
left: 2%;
font-size: 14px;
font-family: "Courier";
bottom: 35px;
text-decoration: none;
max-width: 200px;
vertical-align: middle;
text-align: right;
right: 70%;
width: 23%;
}
.meta .pagination ul {
padding-right: 25px;
}
.meta .pagination li {
display: inline-block;
list-style: none;
text-decoration: none;
font-family: "Courier";
color: #000;
}
.meta .pagination a , .meta .pagination a:visited{
text-decoration: none;
text-align: left;
margin: 0;
color: #000;
}
.meta .pagination a:hover , .meta .pagination a:active {
color: #EC2726;
}
.meta2 {
height: auto;
width: 75%;
margin-left: 21%;
position: relative;
padding-left: 15px;
min-width: 300px;
top: -50px;
}
.meta2 a , .meta2 a:visited {
font-family: "Helvetica Neue";
text-transform: lowercase;
font-style: normal;
font-weight: bolder;
text-decoration: none;
color: #000;
font-size: 18px;
margin-top: 10px;
}
a:hover, a:active, .meta2 a:hover{
color: #EC2726;
}
.entry p {
font-family: Helvetica;
font-size: 12px;
font-style: normal;
font-weight: 200;
margin-bottom: 50px;
margin-top: -15px;
}
footer {
margin-top: 10px;
position: fixed;
bottom: 10px;
width: 100%;
height: 30px;
/* [disabled]background-color: #f7f7f7; */
border-top: 3px inset #636466;
font-family: Courier;
font-size: 10px;
/* [disabled]display: inline; */
left: 0px;
}
footer ul {
float: right;
margin-right: 3%;
/* [disabled]margin-left: 5px; */
display: inline-block;
width: auto;
list-style: none;
}
以下是iphone6的@media查询代码:
/*iphone 6+*/
@media (device-width:414px) and (device-width:736px) and (-webkit-device-pixel-ratio: 3){
#contentWrap {
top: 85px;
}
#logo {
width: 90%;
}
.meta {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
width: 100%;
max-width: none;
top: auto;
padding: 0;
text-align: right;
}
.meta div {
margin: 0;
text-align: right;
padding: 0;
width: 100%;
}
.meta2 {
width: 96%;
max-width: none;
margin-top: 55px;
margin-right: 3%;
margin-left: 3%;
padding: 0;
margin-bottom: auto;
}
.entry p {
margin-top: -15px;
padding: 0;
width: 100%;
margin-left: 0px;
margin-right: 0px;
}
.meta .pagination {
width: 100%;
max-width: none;
text-align: center;
bottom: 25px;
height: 30px;
vertical-align: middle;
}
footer {
position: fixed;
height: 7px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
footer ul {
margin-bottom: auto;
margin-top: auto;
text-align: center;
margin-right: auto;
margin-left: auto;
padding: 0;
float: none;
}
footer li {
margin: auto;
text-align: center;
float: none;
}
nav {
padding-top: 0;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 0;
top: -10px;
text-align: center;
/* [disabled]margin-left: 3%; */
/* [disabled]margin-right: 8%; */
width: 100%;
}
.meta div {
margin: 0;
text-align: right;
padding: 0;
width: 100%;
}
}
从技术上讲,这似乎不是WordPress的问题,而是CSS的问题,在特定于CSS的论坛上提问可能会得到更好的结果。你需要发布一个示例。