pc端滚动条bug如何解决？

Question

pc端滚动条bug如何解决？

Gingbery

22153145

发布于
2017-07-19

在使用rem作为单位时，移动设备上浏览器滚动条不占内容宽度，所以box1和box2可以刚好处于一行，然而在pc端由于滚动条占用宽度，所以box1和box2无法处于同一行，请问该如何解决这个bug？在继续使用rem单位的前提下

正常的移动端页面：

有滚动条的pc页面：

<style media="screen">
      html, body, div{
        padding: 0;
        margin: 0;
      }
      html{
        font-size: calc(100vw/7.5)
      }
      .wrapper{
        font-size: 0;
      }
      .box1{
        display: inline-block;
        width: 3.75rem;
        height: 200px;
        background-color: red;
      }
      .box2{
        display: inline-block;
        width: 3.75rem;
        height: 200px;
        background-color: blue;
      }

      .overflow{
        height: 100vw;
        background-color: grey;
      }
    </style>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div class="wrapper">
      <div class="box1">

      </div>
      <div class="box2">

      </div>
      <div class="overflow">

      </div>
    </div>

  </body>

css javascript 前端

阅读 3.4k

1 个回答

得票最新

xiatianlong

2.2k42854

发布于
2017-07-19

✓ 已被采纳

首先，不是很理解你的思路。既然你box1,box2的宽度一样的，为什么不直接都设置 width:50% 呢？

如果你还是要用rem设置单位的话你就媒体查询咯，举个栗子：

还有就是既然你既要做移动端和PC端的适配，那就请尽量避免写固定的单位数值，非要写那就避免不了媒体查询。与其这样，为什么不直接选用成熟的类似bootstrap这样的响应式前端框架呢？

撰写回答