当切换到移动设备时,HTML主体没有全宽度怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (94)

我有一个响应的网页,这是很好的工作在个人电脑的看法.问题是当我作为移动设备检查时,html只得到屏幕的3/4。我知道是哪个CSS类导致了问题,但我不知道为什么(特别是因为这个类只影响一个节),没有它,整个部分就会消失。有人知道为什么会发生或者怎么解决吗?

.rl-section:before {
    position: absolute;
    content:'';
}

代码如下:

<style type="text/css">
.rl-section {
    position: relative;
    
}
.rl-section:before {
    position: absolute;
    content:'';
}

.rl-diagonal {
    z-index: 1;
    padding: 3em;
}
.rl-diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: -3% 0;
    transform-origin: -3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
}
</style>


<style type="text/css">
    
.lr-section {
    position: relative;

}
.lr-diagonal {
    text-align: center;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.lr-content {
   -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.lr-section:before {
    position: absolute;
    content:'';
}


.lr-diagonal {
    z-index: 1;
    padding: 3em;
}
.lr-diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: -3% 0;
    transform-origin: -3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
} 

    
</style>
<section>
  <div class="first-section" style="padding: 5px 5px 15px; height: 500px;">
      <div class="row">
          <div class="col s6">
            <img src="#">
          </div>
          <div class="col s6">
            <p class="center-align">text</p>
          </div>
      </div>
        
    </div>
    <div class="lr-diagonal lr-section" style="background-color:blue">
      <div class="lr-content">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="rl-diagonal rl-section" style="background-color:black;">
    <div class="lr-content">
        <img src="#">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
</section>

提问于
用户回答回答于

overflow-x: hidden

body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
用户回答回答于

body取8 px的边距,这就是为什么它没有取全宽的原因

body{
    margin: 0px;
   }

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动