我的 css 文件有问题。这些样式未应用于 iPhone,而是我得到了适用于 iPhone 和 iPad 的 iPad 查询。我检查并检查了拼写错误,但找不到任何错误。这是我的 iPad 和 iPhone 查询的 css 文件:
CSS
/*MEDIA-QUERIES-iPAD////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
body,
html {
position: fixed;}
#menu {display: none;}
#presentacion {
padding: 0;
position: fixed;
display: inline-block;
text-align: center;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.buttons {
opacity: 1;
}
#previous {
background-position: 70px 45%;
-webkit-tap-highlight-color: transparent;
left: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#next {
background-position: 110px 45%;
-webkit-tap-highlight-color: transparent;
right: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#info {
font-size: 2em;
}
h1 {
line-height: 8vh;
font-size: 2.1em;
}
ul {
margin-right: 2em;
}
#front {
height: 750px;
}
#imagewrap {
top: 10%;
display: block;
margin: 0 auto;
width: 80%;
height: 80%;
}
#front {
background-color: red;
}
#header {
height: 8vh;
}
.sections {
width: 900px;
height: 500px;
margin: 0 auto;
overflow-y: hidden;
top: 5%;
padding: none;
}
.sections p {
font-family: Galliard;
display: block;
font-size: 1.1em;
line-height: 2em;
margin-bottom: 2em;
padding-right: 100px; /*important*/
padding-left: 100px; /*important*/
color: #666;
text-align: left;
}
#about.sections {
height: 650px;
}
#about.sections p {
padding-left: 125px;
padding-right: 125px;
}
.littleImages {
height: 125px;
width: 125px;
margin: 15px;
box-shadow: 0px 0px 15px 5px #dcdcdc;
}
}
/*MEDIA-QUERIES-iPHONE////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 375px) and (max-width: 767px) {
#front {
z-index: 6;
margin: 50% auto 0;
height: 85%;}
#container {
position: relative;
height: 100vh;
width: 100vw;
background-color: green;
overflow-y: scroll;
text-align: center;
}
#imagewrap {
margin-top: 400px;
}
#header {
height: 20vh;
background-color: red;
}
.sections {
width: 900px;
height: 650px;
margin: 0 auto;
overflow-y: hidden;
top: 15%;
padding: 50px 50px 50px 50px;
}
.sections p {
font-family: Galliard;
display: block;
font-size: 1.1em;
line-height: 2em;
margin-bottom: 2em;
padding-right: 100px; /*important*/
padding-left: 100px; /*important*/
color: #666;
text-align: left;
}
.buttons {
opacity: 1;
}
#info {
font-size: 2em;
}
#about.sections {
height: 650px;
}
#about.sections p {
padding-left: 125px;
padding-right: 125px;
}
.littleImages {
height: 125px;
width: 125px;
margin: 15px;
box-shadow: 0px 0px 15px 5px #dcdcdc;
}
#previous {
background-position: 70px 45%;
-webkit-tap-highlight-color: transparent;
left: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#next {
background-position: 110px 45%;
-webkit-tap-highlight-color: transparent;
right: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
}
我没有看到任何会阻止代码运行的明显拼写错误或错误。为什么媒体查询不起作用?任何帮助表示赞赏。谢谢。
最佳答案
这可能是因为没有设置视口(viewport):https://www.w3schools.com/css/css_rwd_viewport.asp至少我在您的代码中没有看到任何视口(viewport)。
还有;我总是学会为每个屏幕类型设置单独的样式表;它更容易维护,移动用户不必引入不必要的 iPad css。
为此,我将我的媒体查询与视口(viewport)一起放在 head 标签之间。每个媒体查询都链接到一个单独的 .css 文件
这是一个使用两种样式的 HTML 文件示例。我相信您可以通过使用“and”来扩展媒体查询,这将允许您将特定样式表用于最小和最大之间的屏幕尺寸。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css" type="text/css"> <!-- My CSS reset -->
<link rel="stylesheet" href="style.css" type="text/css"> <!-- My main style, also for PC... -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" /> <!-- Mediaquery that detects mobile screens and serves them the other stylesheet-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- viewport -->
</head>
<body>
<p>Responsive text goes here.</p>
</body>
</html>
关于html - 不针对 iPhone 的 css 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45535990/