gpt4 book ai didi

html - CSS 媒体查询在手机和桌面(宽度相同)上的工作方式不同

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

我需要帮助。

我在个人网站上工作,我想让它响应(手机、平板电脑、台式机)。问题是,当我在一种特定分辨率(例如手机)上设置媒体查询时,它在手机和桌面上的显示方式不同。当我将窗口宽度调整为手机宽度时,它没有显示任何问题,并且显示如我所愿。但是当我用手机访问我的页面时,会加载桌面版本(大的,甚至不是中型平板电脑的)。我究竟做错了什么?感谢您的帮助!

这是我第一次使用媒体查询,所以如果您有任何建议,请写下来。谢谢!

<link rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width: 480px)" href="css/small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:481px) and (max-width: 1000px)" href="css/medium.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1001px)" href="css/large.css">

此外,我想使用最小(最大)宽度,而不是最小(最大)设备宽度。我发现这样更有用。

Here it is online

最佳答案

尝试在 <head></head> 中设置宽度:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

或者像这样使用媒体查询:min-device-width : 481px而不是 device-width : 481px

关于html - CSS 媒体查询在手机和桌面(宽度相同)上的工作方式不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23461640/

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