缩小 window 时如何水平滚动？

Question

缩小时如何水平滚动window？我在 body 中制作了 overflow-x，但是没有水平滚动和元素移动——我不需要移动。 Link 到 html 和 css 图像：https://drive.google.com/drive/folders/0ByQHLazSsLs-dF9TbzJUcWdSVms?usp=sharing

Answer 1

您可能需要将元素包装在 div 中，然后使用媒体查询。

CSS3 有@media 查询会改变您的 HTML 在特定屏幕尺寸下的行为方式。

body {
      width:95%;
      height500px;
      background-color: lightgreen;
}
div {
     width: 100px;
     background: lightblue;
  }

@media screen and (max-width: 768px) {
    body {
        background-color: lightgreen;
        
      
    }
  div {
     width: 800px;
     background: lightblue;
     overflow-x:scroll;
  }
}

<div>
  asdfas
  </div>

Answer 2

只需设置 body 标签的宽度并应用 overflow-x: scroll;

body{
    overflow-x: scroll;
    width: 1200px;
}

我希望这对你有用。

缩小 window 时如何水平滚动？

How to make a horizontal scroll when minifying window?

html

css

markup