gpt4 book ai didi

html - 调整浏览器大小时媒体查询在桌面上工作,但在移动设备上不工作

转载 作者:行者123 更新时间:2023-11-28 15:23:22 25 4
gpt4 key购买 nike

我已将我的元标记放在文档的头部,但是当我在我的 iPhone 或 iPad 上加载该网站时,它看起来仍然与桌面网站相同。您可以在 www.thairapyexeter.co.uk 查看我的网站

我的 HTML:

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Thairapy Hair, Beauty + Barbers</title>

<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/menu.css" media="screen" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content = "width=device-width, initial-scale=1">

</head>

这是我如何编写媒体查询的示例:

CSS:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 400px) {
/* Styles */
.menu nav ul li {
display: block;
float: left;
width: 50%!important;
position: relative;
height: 33%!important;
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
}
.offersmenu nav ul li {
display: block;
float: left;
width: 100%;
position: relative;
height: 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
}

.lightbox-prev, .lightbox-next {
position: absolute;
top: 0;
bottom: 0;
width: 60px;
background: center no-repeat red;
z-index: 1001;
cursor: pointer;
}
.arrow {
position: fixed;
width: 40px;
z-index: 1004;
}
.treatmentsmenu nav ul li {
width: 100%;
height: 50%;
}
.lightbox-prev {
background-image: url("../previous.png")!important;
}
.lightbox-next {
right: 0;
background-image: url("../next.png")!important;
}

最佳答案

在你的代码之间检查这段代码

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
/* please write one time in head section */
</head>

CSS 媒体查询:

/* small device code here */
@media (min-width: 480px){
/* media code here */
/* Mobile */
}
@media (min-width: 750px){
/* media code here */
/* Mobile or tab */
}
@media (min-width: 960px){
/* media code here */
/* desktop or Ipad */
}
@media (min-width: 1200px){
/* media code here */
/* desaktop */
}
@media (min-width: 1600px){
/* media code here */
/* desktop */
}
@media (min-width: 1920px){
/* media code here */
/* desktop */
}

关于html - 调整浏览器大小时媒体查询在桌面上工作,但在移动设备上不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30546900/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com