我编写了一段 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%
}
}
这在 Firefox 30 中工作得很好，但是 Google Chrome 总是以 70% 宽度显示元素。
之前，我还在查询中使用过 max-width，在这种情况下 Chrome 会做相反的事情；无论我调整浏览器窗口大小多少，它总是以 90% 显示元素。
规则是使用SASS编译的。这里到底有什么问题呢？如何更改查询以在所有浏览器中工作？
可以在此链接找到受影响的网站。
将此行添加到
<head><meta name="viewport" content="width=device-width,initial-scale=1">
如果您在桌面上使用Chrome（或任何浏览器），则浏览器缩放应为100%。不多也不少。否则，响应式不起作用（在 Windows 中使用 Ctrl + 滚动，或在 Mac 中使用 Cmd +/- 进行调整）。
您可以根据您的需要进行调整
// 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">
我在使用 chrome 时遇到了一个问题，一旦我们穿过应该受到影响的像素，它就会加载 css，添加十进制值可以解决我的问题。
@media (max-width: 767.98px){...}
Bootstrap 4 CSS 中也遵循同样的做法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background:green;
}
@media only screen and (max-width: 500px) {
body{
background:yellow;
}
}
</style>
</head>
<body>
</body>
</html>
试试这个，和Hassan的回复类似，只需添加
minimum-scale=1<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
看看这种更常用的语法是否效果更好：
@media screen and (min-width: 112rem){ ... }
全部都是正确的，但是Chech this
@media only screen and (min-width : 320px) {...}
不
@媒体屏幕和（最小宽度：320px）{...}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
请用“;”结束您的代码试试这个
@media (min-width: 70rem){
#bg{
border-radius:4px !important;
border-radius:0.4rem !important;
width:90% !important;
}
正如其他人上面所说，在桌面上，您需要检查缩放是否设置为 100% 以及使用视口元标记
我的问题是我试图使用
@media (width > x)@media (min-width: x)还请指出。
如果你写一个这样的媒体查询 `
@media screen and(max-width:500px){
body {
color:green;
}
}
`
如果它不起作用，问题是没有像这样间隔单词和和括号
and (我有一个问题，我的代码媒体查询最初在 chrome 上工作得很好，但突然间它停止工作，显示扭曲，特别是当其中有 php 代码时，但如果它没有 php 代码，它显示正常，同样的代码显示在其他浏览器中，即使使用 php bt chrome 也不会接受它，请问我该怎么办？