我需要帮助。
我在个人网站上工作，我想让它响应(手机、平板电脑、台式机)。问题是，当我在一种特定分辨率(例如手机)上设置媒体查询时，它在手机和桌面上的显示方式不同。当我将窗口宽度调整为手机宽度时，它没有显示任何问题，并且显示如我所愿。但是当我用手机访问我的页面时，会加载桌面版本(大的，甚至不是中型平板电脑的)。我究竟做错了什么？感谢您的帮助!
这是我第一次使用媒体查询，所以如果您有任何建议，请写下来。谢谢!
<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">
此外，我想使用最小(最大)宽度，而不是最小(最大)设备宽度。我发现这样更有用。
最佳答案
尝试在 <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/