gpt4 book ai didi

css - 媒体查询不适用于移动设备

转载 作者:行者123 更新时间:2023-11-28 16:03:19 25 4
gpt4 key购买 nike

我有一个类,其媒体查询如下:

@media only screen and (max-width: 374px) {
width: 62px;
}

@media only screen and (max-height: 413px) and (min-width: 375px) {
width: 75px;
}

@media only screen and (min-width: 414px) {
width: 85px;
}

中间媒体查询似乎不起作用。注意:媒体查询是针对移动设备的

最佳答案

不用加max-height,只需要加max-width,手机有标准尺寸check this article here and how it work ,所以你需要添加的只是将你的类推送到查询中,例如:

@media only screen and (max-width: 374px) {
.class{
//style here will display on sizes from 0px to 374px
}
}

@media only screen and (min-width: 375px) {
.class{
//style here will display start display from 375px
}
}

@media only screen and (min-width: 414px) {
.class{
//style here will display start sizes from 414px
}
}

Check this还包含几乎所有的媒体查询大小

完整示例:

HTML:

<!doctype html>
<meta name="viewport" content="width=device-width"/>

<body>

<h1>Media Queries Examples</h1>
<p>Increase or decrease the size of your window to see the background color change</p>

</body>

CSS:

p{
font-family: arial,san-serif;
font-size: 13px;
font-color: black;
}

h1{
font-size:30px;
}

@media screen and (min-width:761px){
body{
background-color:white;
}
h1{
color:red;
}
}

@media screen and (max-width:760px){
body{ background-color: #333;
}
h1{
color:red;
}
p{
color: white;
}
}

@media screen and (max-width:480px){
body{ background-color: #807f83;
}
h1{
color:white;
}
p{
color: white;
}
}

@media screen and (max-width:360px){
body{ background-color: #0096d6;
}
h1{
color:white;
font-size:25px;
}
p{
color: white;
}
}

And this is fiddle

关于css - 媒体查询不适用于移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53612325/

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