#mobile { display: inline;}
#desktop { display: none;}
header, main, nav, footer, figure, figcaption, aside, section, article {display: block;}
@media only screen and (max-width: 64em){
body {background-color: #ffffff;}
wraper {width: 0;
width: auto;
box-shadow: none;}
main {margin-left: 0;}
nav {float: none;
width: auto;
text-align: center;
padding: 0.5em;}
li {display: inline;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 0.75em;
padding-right: 0.75em;}
homehero, yurthero, trailhero {margin-left: 0;
height: 200px;}
footer {margin-left: 0;}
}
@media only screen and (max-width: 37.5em) {
header {padding-top: 1em;}
main {padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 1em;
padding-right: 1em;
font-size: 90%;}
h1 {font-size: 1.5em;}
nav {padding: 0;}
li {display: block;
margin: 0;
border-bottom: 2px #330000;}
a {display: block;}
homehero, yurthero, trailhero {background-image: none;
height: 0;}
mobile {display: inline;}
disktop {display: none;}
}<head>
<title>Pacific Trails Resort</title>
<meta charset="utf-8">
<link rel="stylesheet" href="pacific.css">
<link rel="stylesheet" media= "screen and (max-width: 37.5em)" href="pacific.css"/>
<link rel="stylesheet" media= "screen and (max-width: 64em)" href="pacific.css"/>
<meta name="viewport" content="width=device-width, initial-scale to 1.0" >
</head>我尝试使用媒体为手机和平板电脑配置样式 但这对我不起作用 什么是解决方案？
谢谢enter image description here
这是我需要的 但我明白了
最佳答案
代替
<meta name="viewport" content="width=device-width, initial-scale to 1.0" >
尝试一下
<meta name="viewport" content="width=device-width, initial-scale=1">
关于Html 和 CSS 媒体不适合我，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35658975/