<html> 元素不适合屏幕答案

【问题标题】：The <html> element not fit the screen<html> 元素不适合屏幕
【发布时间】：2017-11-07 06:12:23
【问题描述】：

我正在开发一个简单的响应式布局，但遇到了 html 元素大小异常的问题。当屏幕尺寸大于 1080px 时一切正常，但每次我调整屏幕大小或在移动设备上加载页面时，html 元素都会变得小于屏幕宽度。

Here you can see what I am talking about.

我尝试过的：（我正在使用thiscss 重置）

1) 将 html 和 body 的边距、内边距设置为 0，并将它们的宽度设置为 100%；

2) 设置 box-sizing 属性为border-box；

3) 添加：

html, body{width: 100%; padding: 0; margin: 0;}

4）我也试过写一些js代码来设置resize时body的宽度，但是我不擅长js所以没有帮助..

5) 字体大小更改也无济于事。

可能有一个简单的解决方案，但是我越是尝试修复它，我就越感到困惑，所以我希望有人能帮助我。

我是新来的，所以请多给我一点耐心:)。

这是正文 css：

body{
background-image: url(gwiazdy.png) !important;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-color: #000;
width: 100% !important;
font-size: 20px !important;
padding: 2% 0 !important;
margin: 0 !important;
font-family: 'Bellefair', serif !important;
color: #ccc !important;
min-width: 329px !important;}


@media screen and (max-width: 752px) {
.content{
    width: 100% !important;
}
body{
    padding: 0 !important;
    padding-bottom: 15 !important;
}
}

如果还不够，可以click here看我的布局，也可以看整个css和html。

【问题讨论】：

你有一个比身体大的元素
发布与此问题相关的 HTML
这是你的.about_text
哇，现在可以了。感谢您的快速回答:)
您的 html 标记不正确，您不能在 doctype 中包含 body

标签： html css

【解决方案1】：

.home {
  display: flex;
  flex-direction: column;
  }
  .title{ 
  text-align: center
  }
  
  .about {
  display: flex;
  flex-direction: row;
  }
  
  .about > div {
  flex: 1;
  padding: 0 10px 0 10px;
  }
  
  .about img {
width: 100%;
  }

<div class="home">
  <div class="title">
    <h2>
      About
     </h2>
   </div>
   
  <div>
    Masz dużo na głowie i nigdy nie masz czasu na szukanie swoich przepisów? Zarejestruj się i trzymaj wszystkie swoje przepisy w jednym miejscu!
  </div>
  <div class="about">
    <div>
      <img src="//www.placehold.it/300x300?text=About">
    </div>
    <div>
      <img src="//www.placehold.it/300x300?text=About">
    </div>
    <div>
      <img src="//www.placehold.it/300x300?text=About">
    </div>
  </div>
  
</div>

此问题是由 .about_text 元素引起的。您对该部分的编码方式不正确。你有一个display: flex 设置为你的 .home div，默认情况下 flex 有属性flex-direction: row。但是，您试图通过向元素添加width: 100% 来将 .home div 下的元素显示为一列。改用 flex-direction: column 并添加一个新的 div 并将所有 .about_text 元素放入该 div 并将flex-direction: row 的属性添加到该 div。

【讨论】：

好的，它有效，但现在我又遇到了主要问题。可能一个元素比父元素大。还有一次我不知道是哪一个..
从以下代码中删除 display: inline-block。 .material-icons { font-family: '材质图标';字体粗细：正常；字体样式：正常；字体大小：24px；行高：1；字母间距：正常；文本转换：无；显示：内联块；空白：nowrap；自动换行：正常；方向：ltr； -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing：抗锯齿； }