2017-08-03 46 views
0

因此,这里是css代码,当我转到开发人员工具(Mozila)时,代码不会按照应答模式执行。 余裕:自动;下划线,因为你可以看到我上传的图片。 我是新来的响应式设计。如果你想看到整个项目(页面)请点击here,请帮忙。媒体查询 - 为什么应该执行的css代码无法执行

Developer tools image

@media screen and (max-width: 750px) { 
    img { 
     margin-left: auto; 
    } 
} 
body { 
    margin: 0; 
    overflow: auto; 
    background-color: #a6a6a6; 
} 
img { 
    margin-left: 40%; 
} 
p { 
    text-align: center; 
    font-size: 1.2em; 
} 
ul { 
    font-size: 1.3em; 
    margin-left: 15%; 
    margin-right: 15%; 
} 
small { 
    text-align: center; 
    margin-left: 45%; 
} 
hr { 
    display: block; 
    height: 1em; 
    border: 0; 
    border-top: 0.1em solid #4d4d4d; 
    margin-right: 10%; 
    margin-left: 10%; 
    padding: 0; 
} 
#title { 
    float: left; 
    text-align: center; 
    background-color: #cccccc; 
    width: 100%; 
    top: 0; 
    position: fixed; 
    margin-left: 0; 
    font-size: 1.25em; 
} 
#content { 
    background-color: #e6e6e6; 
    margin-left: 5%; 
    margin-top: 10%; 
    margin-right: 5%; 
    margin-bottom: 6%; 
} 
#e { 
    font-size: 2em; 
} 
#timeline { 
    font-size: 1.5em; 
} 
#sources { 
    font-size: 1.8em; 
} 
#Author { 
    font-size: 1.6em; 
} 
a { 
    cursor: pointer; 
    text-decoration: none; 
} 
a:visited { 
    cursor: pointer; 
    text-decoration: none; 
    color: blue; 
} 
a:hover { 
    cursor: pointer; 
    text-decoration: none; 
} 

回答

1

秩序的CSS问题的声明。移动媒体查询以下img { margin-left:40%; }它应该工作。

0

您在样式表中看到的媒体查询往往会更好地放在底部。将

@media screen and (max-width:750px){ 
img{ 
    margin-left:auto; 
    } 
} 

最后CSS声明下方