如何解决CSS媒体查询无法在iPhone 6、7、8的浏览器大小调整中使用
我正在尝试为所有手机屏幕尺寸制作一个CSS文件,但是在Google上,较小的手机屏幕无法识别媒体查询。它适用于像素2 xl,iphone 6、7和8 PLUS和iphoneX。我还试图将像素2,iphone 6、7和8和5作为目标,因此我将最小设备宽度添加为320 px。浏览器无法识别任何mobile.css代码。
这是我的头牌-
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SHEK LEUNG | MA</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
</head>
CSS
.nav-button-h {
position: relative;
display: flex;
justify-content: space-between;
height: 20vh;
width: 100vw;
top: 40%;
/* left: 0.5rem; */
z-index: 100;
font-family: Helvetica,sans-serif;
font-size: 1.5rem;
}
#logo-center {
display: none;
}
.mobile-logo {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-family: Helvetica,sans-serif;
font-weight: bold;
width: 1.5rem;
}
#projbtn {
align-self: center;
}
.nav-button-v {
font-size: 1.5rem;
}
.openPress {
-webkit-transform: translate3d(100vw,0);
transform: translate3d(100vw,0);
transition: transform 1s;
}
.openAbout {
-webkit-transform: translate3d(-100vw,0);
transform: translate3d(-100vw,0);
transition: transform 1s;
}
/* press page */
.press-container {
width: 100vw;
}
.img-grid {
margin-top: 6vh;
margin-left: -30vw;
padding: 1rem;
}
.press-info {
width: 70vw;
height: 47vh;
}
.fixed-wrapper {
left: 173vw;
height: 20vh;
}
.contact-wrapper {
height: 20vh;
}
.back_home {
display: block;
position: fixed;
z-index: 2;
font-family: Helvetica,sans-serif;
font-size: 1.5rem;
color: black;
background-color: white;
text-transform: uppercase;
font-weight: bold;
}
.press__mobile {
margin-left: 75vw;
margin-top: 90vh;
}
.fixed-wrapper {
top: 5vh;
}
.contactbtn {
float: left;
font-size: 1.4rem;
}
.contact-wrapper ul {
background-color: rgba(255,255,0.829);
color: black;
margin-top: 3vh;
width: 60vw;
height: 18vh;
margin-left: -45vw;
text-align: center;
justify-content: flex-start;
padding: 1rem;
pointer-events: none;
}
.contact-wrapper a {
color: white;
}
/* about page */
.about-container {
width: 100vw;
left: -100vw;
}
解决方法
为此,您需要将媒体查询添加到mobile.css文件中,而不是HTML链接声明上。
您需要使用媒体查询来包装mobile.css
文件的内容;如下所示:
@media only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2) {
//contents of your mobile.css file goes here
}
,
这行代码无效:
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
您应该将媒体查询添加到css文件中(可能在mobile.css
中)
@media only screen and (min-width: 320px) {
.class{
background-color: green;
}
}
,
您做CSS的方式是完全不正确的。
首先,您绝对没有媒体查询。您的媒体查询应仅针对最小宽度进行设置,而没有其他设置。没有最大宽度,什么也没有。这些需要在您的css文件中,而不是在link元素中。
响应式设计应该仅 ,而我的意思是仅使用最小宽度媒体查询以移动优先维度完成 。当宽度尺寸增加到超过特定点时,则添加下一个媒体查询以获得下一个最大宽度。
这是一个非常简单的概念,在过去的6到7年中,我已经看到数百人不了解。一段时间后,我曾在一家公司工作过一段时间,进入公司后,我不得不完全重新编写其整个CSS堆栈,以支持这些基本规则并最终解决他们遇到的大多数问题。
我建议看看Bootstrap是如何在大约4-5年前开始进行媒体查询的。我无法跟上该框架在当前版本中的工作,但是那时他们正朝着正确的方向发展。
通常,这完全是从内存中得出的,最小宽度的首选大小是:320px,480px,768px,1024px和1200px。这应该考虑所有移动和平板电脑设备的纵向和横向模式,并逐渐增加到桌面宽度。根据需要进行调整。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。