不太确定为什么我的媒体查询不起作用。非常初学者。试图让导航菜单响应类似基本媒体查询不起作用
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
普通媒体查询没有任何工作,我知道我没有topnav作为类设置为导航,就像他们在W3的例子做。我只是一直在使用导航。
/**********************************
GENERAL
***********************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
html, body {
height: 100%;
}
body{
margin:0;
padding:0;
background: rgba(226,226,226,1);
}
a{
text-decoration: none;
}
li{
list-style-type: none;
display: inline
}
#wrapper{
max-width: 100%;
max-height: 100%;
/*min-height: calc(100vh - 120px);*/
/* 80px header + 40px footer = 120px */
width: 85%;
margin: 0 auto;
overflow: visible;
position:relative;
background: rgba(147,206,222,1);
}
img{
max-width: 100%;
width: 200px;
margin-right: 15px;
float: left;
margin-bottom: 20px;
padding:1px;
border:1px solid #021a40;
}
h1{
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
font-family: Garamond;
}
/**********************************
HEADING
***********************************/
header{
color:blue;
text-align: left;
float: left;
margin: 0 0 30px 0;
padding: 20px 0 0 0;
width: 100%;
font-size: 32;
}
/**********************************
NAVIGATION
***********************************/
nav{
max-width: 100%;
max height: 100%;
padding: 3.5em;
margin: 0;
background-color: green;
text-align: right;
font-family: Garamond;
}
nav ul {
list-style: none;
margin: 0 10px 20px; /*pushes div down*/
padding: 0;
text-decoration: none;
/*background-color: purple;*/
max-width: 100%;
max-height: 200px;
}
nav menu:{
}
nav li {
display: inline-block;
}
nav a, a:link, a:visited {
font-weight: 800;
padding: 15px 10px;
/*border-style: double;*/
border-radius: 10px;
margin-bottom: 20px;
color:white;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
a:hover{
background-color: gray;
}
#back-to-hp{
text-align: left;
}
/**********************************
FOOTER
***********************************/
footer {
background: rgba(255,255,255,1);
/*max-height: 100%;
position:relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
overflow:hidden;
text-align: center;*/
width:100%;
height:100px;
position:relative;
bottom:0;
left:0;
padding-top: 10px;
margin-top: 15px;
}
}
/**********************************
PAGE: ADOPTION
***********************************/
#image-paragraph{
font-size: 20;
text-align: center;
float: right;
}
#content{
font-family: Garamond;
}
/**********************************
PAGE: ABOUT
***********************************/
/**********************************
PAGE: CONTACT
***********************************/
/**********************************
COLORS
***********************************/
/**********************************
MEDIA QUERIES
***********************************/
/*@media all (max-width: 960px) {
body{
background-color: royalblue;
}
p{
color:white;
}
}
@@media (min-width:481px) and (max-width: 700px) {
}*/
@media screen and (max-width:680px) {
ul.nav li:not(:first-child) {display: none;}
ul.nav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.nav.responsive {position: relative;}
ul.nav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
float: none;
display: inline;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
}
他们工作正常,请确保您的[浏览器支持css媒体查询](http://caniuse.com/#feat=css-mediaqueries)并且其视口宽度小于或等于'680px'。 – choz
我一直在使用铬,但没有任何显示。使用检查工具来检查,也许它的错误与我的HTML? – hirollin
你可以制作一个[小提琴](https://jsfiddle.net/)吗? – choz