Question

我需要帮助。

我在个人网站上工作，我想让它响应（手机，平板电脑，桌面）。问题是，当我在一个特定分辨率（例如电话）上设置媒体查询时，它在手机和桌面上的显示方式不同。当我将窗口宽度调整为手机宽度时，它不显示任何问题，它显示我想要的。但是，当我使用手机访问我的页面时，桌面版本会加载（大版本，甚至不是中等版本的版本）。我究竟做错了什么？谢谢你的帮助！

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

<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">

我还想使用min（max）-width，而不是min（max）-device-width。我发现它更有用。

Here it is online

Answer 1

尝试在<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

CSS媒体查询在手机和桌面上的工作方式不同（宽度相同）

1 个答案: