我正在这个网站上工作:https://www.citysingle.it我正在努力让它响应。
主要问题是当任何设备看到时,页面仍然很宽, 我在 CSS
上添加了这段代码body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
/* font-size: 1em; */
line-height: 1.42857143;
color: #333333;
background-color: #ffffff;
/* mauro
min-width: 80em;*/
}
@media only screen and (min-width: 800px) {
body {
min-width: 0;
}
}
@media only screen and (min-width: 1024px) {
body {
min-width: 80em;
}
}
最佳答案
在 html 的头部添加这 3 个元标记
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
视口(viewport)元标记通过修改设备的“虚拟视口(viewport)”来改变移动浏览器的行为。虚拟视口(viewport)是移动设备屏幕的 View ,而不是默认 View ;因此被视为“虚拟”。这允许设备上的屏幕具有指定的缩放行为。
<meta name="viewport" content="width=device-width">
此元标记告诉移动设备不要缩放。这允许在脚本中加载移动设备的响应模板。
关于css - 使网站响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45054998/