css - 使网站响应

Question

我正在这个网站上工作: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;
    }
}

Answer 1

在 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">

此元标记告诉移动设备不要缩放。这允许在脚本中加载移动设备的响应模板。