响应性媒体查询不适用于Google
响应性媒体查询不适用于Google
提问于 2014-06-21 19:20:03
我已经编写了一段CSS代码，可以根据用户的屏幕宽度流畅地切换我的站点布局的宽度。如果用户的可用屏幕空间较少，则布局的宽度会增加，以填充更多的窗口，并留下更少的空白；如果用户有更多的空间，布局就会缩小，以保持迷人的外观。
我使用以下代码来实现这一点：
#bg{
background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
margin-left:auto;
margin-right:auto;
margin-bottom:1.6rem;
border-width:0 0.1rem 0.1rem 0.1rem;
border-style:solid;
border-color:#303030 #101010 #000;
border-radius:0.8rem;
min-width:94.2rem
}
@media (min-width: 70rem){
#bg{
border-radius:4px;
border-radius:0.4rem;
width:90%
}
}
@media (min-width: 91rem){
#bg{
width:80%
}
}
@media (min-width: 112rem){
#bg{
width:70%
}
}这在火狐30中很好，但是Google Chrome 总是显示70%宽的元素。
以前，我在查询中也使用了最大宽度，在这种情况下，Chrome会做相反的事情；它总是以90%的速度显示元素，不管我如何调整浏览器窗口的大小。
这些规则是用SASS编译的。这里到底有什么问题？如何将查询更改为在所有浏览器中工作？
受影响的网站可以找到在这个链接上。
回答 12
Stack Overflow用户
回答已采纳
发布于 2017-01-18 16:36:13
在<head>中添加这一行
<meta name="viewport" content="width=device-width,initial-scale=1">Stack Overflow用户
发布于 2020-04-30 19:09:38
如果在桌面上使用Chrome (或任何浏览器)，浏览器的缩放应该是100%。不多也不少。否则，responsive不工作(在Windows中使用Ctrl +滚动，或者在Mac中使用Cmd +/-进行调整)。
Stack Overflow用户
发布于 2019-01-30 12:02:30
你可以根据你的需要调整这个
// css for mobile here
// ...
/* desktop */
@media (min-width: 900px) and (orientation: landscape)
{
// css for desktop here
// ...
}别忘了
<meta name="viewport" content="width=device-width, initial-scale=1">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24345046
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号