使网站响应

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 Meta 标记通过修改设备的 "virtual viewport" 来改变移动浏览器的行为。虚拟视口是移动设备屏幕的视图，而不是默认视图；因此被视为 "virtual"。这允许设备上的屏幕具有指定的缩放行为。

<meta name="viewport" content="width=device-width">

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

使网站响应

making web site responsive

css

responsive