gpt4 book ai didi

html - 媒体查询设备宽度或分辨率

转载 作者:太空宇宙 更新时间:2023-11-03 18:15:36 25 4
gpt4 key购买 nike

我的媒体查询有问题。

我的目标是(开始时)一个样式表的最大设备宽度为 1024 像素,另一个样式表的最小设备宽度为 1025 像素,然后使用百分比使内容适应浏览器的大小调整。

但是,我的 20 英寸大屏幕使用与 11.6 英寸屏幕相同的样式表,我认为这是由于分辨率的原因,因为我的 15 英寸屏幕旧计算机使用其他较小的样式表?

因为我对我的主要内容区域使用百分比,所以这个区域在我的大屏幕上看起来很好,显然我不希望内容散布在我的 20 英寸屏幕上,但在我的 11.6 英寸小屏幕上它看起来很小。

我做错了什么?是否有针对设备的最佳实践以及使用百分比是否是一个可行的选择?我喜欢我的内容一点一点适应浏览器调整大小的方式。

我对媒体的工作原理有相当多的了解,但我很想有一种方法可以用于大多数网站,无论是使用设备宽度、宽度还是分辨率等,在我发现我需要的那一刻继续添加样式表。

提前致谢

最佳答案

您的 11.6 英寸屏幕很可能是高像素密度屏幕 (HiDPI)。这将使它的分辨率几乎等于您的 20 英寸屏幕。因此,他们将采用相同的样式(最大设备宽度/最小设备宽度)尝试根据 DPI 或像素比率来定位设备。有关更多信息,请参阅本指南 ( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)。

您可能还需要添加视口(viewport)来调整文本大小。为您的 <head> 推荐的声明标签是 ( http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972 ):

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

关于html - 媒体查询设备宽度或分辨率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22896041/

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