Question

我正在尝试在我的网站上设置一个“关键功能”部分，其全宽背景跨越entire page浅灰色

它可以在桌面上正常工作 - 但在移动设备上，左侧是白色的，我的手机右侧略微“滑动”（即屏幕没有锁定） - 在iPhone 6上测试。

关于可能出错的任何想法？

谢谢！

HTML：

body { overflow-x: hidden; }

@media(max-width: 600px) {
  section {
    box-sizing: border-box; /* or not */
    margin: 0 auto;
    width: 100vw;
    background: white;
    padding: 30px;
    padding-bottom: 60px;
  }

  .full-width1000 {
    position: relative; /* child absolute */
    /* negative offset = section padding */
    margin: 10px -10px;
    /* add back section padding value */
    padding: 0rem 0px;
    background: rgb(242,242,242);
  }
  .full-width1000:before, .full-width1000:after{
    content: "";
    position: absolute;
    /* fill vertically */
    top: 0;
    bottom: 0;
    width: auto;
    right: auto;
    left: 100%;
    background: rgb(242,242,242);
  }
}


@media(min-width: 601px) {
  section {
    box-sizing: border-box; /* or not */
    margin: 0 auto;
    width: 100%;
    background: white;
    padding: 30px;
    padding-bottom: 60px;
  }

  .full-width1000 {
    position: relative; /* child absolute */
    /* negative offset = section padding */
    margin: 0 -5px;
    /* add back section padding value */
    padding: .25rem 5px;
    background: rgb(242,242,242);
  }
  .full-width1000:before, .full-width1000:after{
    content: "";
    position: absolute;
    /* fill vertically */
    top: 0;
    bottom: 0;
    width: 9600px;
    right: 100%;
    background: rgb(242,242,242);
  }
  .full-width1000:after { 
    width: 2020px;
    left: 100%;
    /* not browswer prefixed */
    background: rgb(242,242,242);
  }
}

<section class="full-width1000">
    <br>
    <h2>KEY FEATURES</h2>
    <ul>
        <li>Combined <strong>stand-alone CAN logger </strong>with SD card and <strong>wired USB CAN interface</strong></li>
        <li>Works for all <strong>high speed CAN </strong>networks (ISO 11898-2) with <strong>bit rates 5-1000 kbps</strong></li>
        <li><strong>Protocol independent</strong>: Easily log data across e.g. <a href="http://www.csselectronics.com/screen/page/simple-intro-j1939-explained">SAE J1939</a>, <a href="http://www.csselectronics.com/screen/page/simple-intro-obd2-explained">OBD2</a>, CANopen</li>
        <li>Supports both <strong>11-bit </strong>(CAN 2.0A) and <strong>29-bit </strong>(CAN 2.0B) identifiers</li>
        <li><strong>Plug & play </strong>with <strong>bit rate auto detection </strong>(pre-configuration not required)</li>
        <li><strong>Ultra-compact&nbsp;</strong>(6.7 x 4.3 x 2.4 cm),&nbsp;<strong>light-weight</strong>&nbsp;(45 G) and with&nbsp;<strong>3 external LEDs</strong></li>
        <li><strong>Efficiently powered via CAN bus</strong>&nbsp;(DB9, optional <a href="http://www.csselectronics.com/screen/product/can-bus-logger-obd-adaptor">OBD2</a> / <a href="http://www.csselectronics.com/screen/product/can-bus-logger-j1939-adaptor">J1939</a> adapter) or&nbsp;<strong>USB</strong></li>
        <li><strong>Massive 8+ GB SD memory </strong>capacity (store 250+ million CAN bus messages)</li>
        <li><strong>Advanced options</strong>: Silent mode, cyclical logging, message filters, <a href="http://www.csselectronics.com/screen/page/obd-ii-pid-examples">transmit</a>, &hellip;</li>
        <li><strong><a href="http://www.csselectronics.com/screen/page/can-bus-logger-tools">Free CANvas software</a></strong>: Configure via USB, stream CAN&nbsp;bus data, <a href="http://www.csselectronics.com/screen/page/can-bus-software-scale-merge-downsample">convert via *.DBC</a></li>
        <li><strong>Free Wireshark plugin</strong>: <a href="http://www.csselectronics.com/screen/page/dbc-database-can-bus-conversion-wireshark-j1939-example">Stream /&nbsp;plot human-readable data (*.DBC, OBD2)</a> or&nbsp;<a href="http://www.csselectronics.com/screen/page/reverse-engineering-can-bus-messages-with-wireshark">hack your CAN bus</a></li>
        <li><strong>Real-time </strong>(calendar) <strong>clock </strong>with battery backup (2000 & 3000) and <strong><a href="http://www.csselectronics.com/screen/page/wifi-can-bus-obd2-j1939-analyzer-canlogger3000">WiFi</a> </strong>(3000)</li>
        <li><strong>CE</strong>, <strong>FCC</strong>, <strong>IC</strong>, <strong>RoHS </strong>certified with <strong>2-year warranty</strong></li>
        <li><strong>Passionate Danish team </strong>with <a href="http://www.csselectronics.com/screen/page/can-bus-logger-contact">free world class support</a>, feature upgrades & <a href="http://www.csselectronics.com/screen/page/can-bus-articles-tools-cases">guides</a>!</li>
    </ul>
</section>

Answer 1

你在::before上使用::after和.full-width1000杀死它，只是做

.full-width1000 {
    margin: 0 calc(-1 * (100vw - 960px) /2);
    padding: 0.25rem calc((100vw - 960px) / 2);
}

其中960px指的是您的.container宽度，并相应地调整其他媒体查询。

CSS“全宽”部分在移动设备上无法正常工作

1 个答案: