gpt4 book ai didi

html - CSS 媒体查询不能在同一个样式表中工作?

转载 作者:太空宇宙 更新时间:2023-11-04 04:05:33 26 4
gpt4 key购买 nike

我熟悉响应式设计 + CSS。

但由于某些奇怪的原因,唯一不起作用的媒体查询是移动维度样式。

我正在使用 chrome 来监视正在应用的样式,它只加载最小设备宽度样式。

有人知道为什么会这样吗?

我的索引文件中也有以下内容。已更新

<link href="styles.css" rel="stylesheet" type="text/css">

@media (max-device-width: 480px){
/* Styles */
#profilebody_avatar
{
width: 10em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}
@media (min-device-width: 1024px){
#profilebody_avatar
{
width: 20em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}

最佳答案

“您的规则说的是 max-device-width 而不是 max-width,这意味着,只要您的显示器宽度超过 480px ,您不会看到任何不同之处。要么在小屏幕上检查,要么将其更新为响应式设计的 max-width 而不是自适应设计。”

您可以使用 Chrome 假装更改“设备宽度”,方法是拉起检查器(右键单击并检查元素),然后单击右上角的“显示控制台”按钮(看起来像 > 旁边有三条水平线it) 单击 Emulation 选项卡,然后选择要模拟的设备(选择 iPhone 4,它的最大宽度为 320 [嗯,640,但字体比例因子为 2,即 320。])然后点击 Emulate它将更新“设备宽度”。

即:

您的max-device-width 是您的显示器 的宽度,而不是浏览器窗口的宽度。所以,我的是 1920px。除非我更改显示器的分辨率,否则它不会改变。

您的 max-width 是浏览器窗口的宽度。与上述不同的是,在调整大小时确实发生了变化。

关于html - CSS 媒体查询不能在同一个样式表中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21450459/

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