在服务器上部署时，CSS响应能力无效
我只使用HTML和CSS进行了响应迅速的家庭设计。当我在本地部署它时，响应式零件正常工作，因此我将文件发送给页面的所有者，但他告诉我页面没有响应速度。他在本地和Filezila部署了它，但这就像没有媒体疑问。
这是我的HTML头标签。
<head>
<title>Alpha</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
这是我的CSS代码的一些示例，我什至不使用SASS，因为对于项目，我无法使用库（这是一个非常旧的页面）
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #c91111;
}
.navbar button{
margin-right: 25px;
}
.navbar img{
height: 4rem;
width: 19rem;
margin: 10px;
background-color: white;
}
，最后我有一些响应代码。
@media screen and (max-width: 270px) {
.navbar button{
width: 6rem;
font-size: 13px;
}
.menu_item{
justify-content: flex-start;
width: 11rem;
height: 15rem;
}
.menu_item_4{
height: 17rem;
}
.menu_item a{
padding: 1rem;
font-size: 16px;
}
.mobile-item{
padding: 0 !important;
}
}
这是现场示例 https://serviciosi.online/alline/alpha/alpha/alpha/testhome/ 现在，当我输入该链接时，即使文件没有更改，它也不会在计算机上响应。 我缺少什么吗？
I made a responsive home design with only html and css. When I deploy it locally the responsive part works perfectly, so I sended the files to the owner of the page, but he told me that the page wasn't responsive. He deployed it locally and in fileZila but it's like there's no media queries.
This are my html head tags.
<head>
<title>Alpha</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
And here is some example of my css code, I'm not even using sass because for the project I can't use libraries (it's a pretty old page)
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #c91111;
}
.navbar button{
margin-right: 25px;
}
.navbar img{
height: 4rem;
width: 19rem;
margin: 10px;
background-color: white;
}
And at the end I have some responsive code.
@media screen and (max-width: 270px) {
.navbar button{
width: 6rem;
font-size: 13px;
}
.menu_item{
justify-content: flex-start;
width: 11rem;
height: 15rem;
}
.menu_item_4{
height: 17rem;
}
.menu_item a{
padding: 1rem;
font-size: 16px;
}
.mobile-item{
padding: 0 !important;
}
}
Here is the live example https://serviciosi.online/alpha/testhome/
Now it isn't responsive on my computer when I enter that link, even though the files haven't been changed.
Is there something I'm missing?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可能应该检查文件权限和文件的所有者
ex：
You Should Probably Check the file permissions and owner of the file
EX:
由于我上次使用响应式CSS是一段时间以前，我不确定这是否会影响它，但是在您的
＆lt; meta＆gt;标记您的html代码中，您可以在使用semicolons之间切换和分开元素的逗号，这在编码中通常不建议。如果这不起作用，您是否考虑过使用基于百分比的利润来自动调整它？
As the last time I used responsive CSS was quite a while ago, I'm not sure if this would impact it, but in your
<meta>tag in your HTML code, you switch between using semicolons and commas to separate the elements, which is generally not advisable in coding.If this doesn't work, have you considered using percentage-based margins in order to have it automatically adjust?
最大宽度为270px，因此它无法在大于270px的分辨率上起作用
max width is 270px so it wont work on resolution greater than 270px