CSS: pc和电话上的媒体查询
CSS: pc和电话上的媒体查询
提问于 2020-01-27 00:47:09
在学习Emacs的同时，我创建了一个网页(Prince)。列数由以下指令管理：
body {
font-family: var(--s-font-family);
font-size: var(--normal-font-size);
column-count: 3;
column-gap: 10px;
}
@media screen and (min-width: 800px) {
body {
column-count: 3;
column-gap: 10px;
}
}
@media screen and (min-width: 600px) and (max-width: 799px) {
body {
column-count: 2;
column-gap: 8px;
}
}
@media screen and (max-width: 599px) {
body {
column-count: 1;
column-gap: 0;
}
}正如您在CSS stylesheet中看到的那样。
现在，如果我在我的台式pc (使用Firefox70)上测试上面的代码，修改浏览器窗口的宽度，一切都会正常工作。但当我用我的智能手机(据webfx报道，它的大小是774x412像素)打开页面时，我总是看到三列，好像浏览器会完全忽略媒体查询一样。
问题出在哪里？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-27 01:54:55
您只需在html页面的head标记中添加以下meta标记
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">Stack Overflow用户
发布于 2020-01-27 01:52:10
尝试添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">到你页面的页首
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59920502
复制相关文章
相似问题
腾讯云开发者
