我目前正在构建一个全屏的单页响应式网站。桌面版本应该是水平滚动，当屏幕尺寸更改为800px以下时，它应该变为垂直布局。
即
Size > 800 --> Page1 | Page2 | Page3
Size < 800 --> Page1
Page2
Page3
我尝试构建移动优先方式，并使用media query和display: inline block white-space: nowrap将布局从垂直更改为水平。
它可以工作，但是当我使用Google F12功能切换设备模式进行测试并更改为宽尺寸时，我注意到我可以在水平布局上向下滚动，就像在y轴上有溢出的东西一样。 （它应该以这个大小溢出x轴，而不是y）。
将body / html设置为溢出隐藏可防止任何滚动（水平/垂直），这不是我想要的......
任何人都可以帮助我吗？我是建立响应式网站的新手，尤其是这种布局。所以非常欢迎链接到一个很好的教程，建议，或者更好的回答我的问题：）
（PS：我在本地工作，所以我真的不知道将代码放在codepen中是否会重新创建我遇到的问题）
一些codepen测试：http://codepen.io/ayakashi/pen/rVzpvG
更新：它似乎在真实设备中运行良好，所以也许它只是在使用浏览器检查时应该是怎样的。设备模式功能....