我写了一段CSS代码,根据用户的屏幕宽度流畅地切换我的网站布局的宽度.如果用户可用的屏幕空间较少,则布局的宽度会增加以填充更多的窗口并留下更少的空白,如果它们有更多空间,则布局会缩小以保持吸引人的外观.
我使用以下代码来实现此目的:
#bg{ background:-webkit-linear-gradient(90deg,#0f0f0f 0%,#222222 400px); background:-moz-linear-gradient(90deg,#222222 400px); background:-o-linear-gradient(90deg,#222222 400px); background:linear-gradient(90deg,#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% } }
这在Firefox 30中运行得很好,但Google Chrome总是以70%的宽度显示元素.
以前,我在查询中也使用了max-width,在这种情况下Chrome会做相反的事情;无论我调整浏览器窗口的大小,它总是会以90%显示元素.
规则使用SASS编译.究竟是什么问题?如何更改查询以在所有浏览器中工作?
受影响的网站可以找到at this link.
解决方法
原文地址:https://www.jb51.cc/css/214684.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。