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

视口元标记通过修改＆＃34;虚拟视口来改变移动浏览器的行为。该设备。虚拟视口是移动设备屏幕的视图，而不是默认视图;因此被视为＆＃34;虚拟＆＃34;。这允许设备上的屏幕具有指定的缩放行为。

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

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

使网站响应

1 个答案: