越野车响应 CSS 网站

Question

人像模式开启 Iphone 7

https://i.imgur.com/gVjwYM7.png

横向模式：

http://i.imgur.com/M1IwCM2.png

旋转回纵向模式：

http://i.imgur.com/pbkBVZB.png

问：为什么会出现这种情况？我能做些什么来修复这个错误响应 CSS？后台使用WRAPPER标签，表单使用materialize css。或者我应该像这样为移动视图制作它吗？ :

http://i.imgur.com/Y2RXUFi.png

JSFIDDLE LINK 根据要求： https://jsfiddle.net/9y0r0p2q/10/

Answer 1

横向屏幕截图中的问题似乎是它已通过更改方向放大，然后您滚动了页面。

wrapper 元素当前仅设置为 body/html 元素的高度。也就是window的高度，不是文档。这就是为什么当您滚动到超过 window.

的高度时背景就会被剪裁的原因

此演示可能会使正在发生的事情更加清晰。 https://jsfiddle.net/20n6ag61/

要解决此问题，您可以尝试将背景放在 body 上，然后调整 html 和 body 元素的高度，就像这样。

html {
    height: 100%;
}
body {
    min-height:100%;
    background-image: linear-gradient(to right, #054f7d, #00a7cf, #efe348, #861a54, #054f7d);
    background-size: 600%;
    background-position: 0 0;
    box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5);

    /* Animation */
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-name: gradients;
}

https://jsfiddle.net/9y0r0p2q/11/

我还注意到您正在使用媒体查询，您可能需要考虑将此元标记添加到 html

的头部

<meta name="viewport" content="width=device-width, initial-scale=1">

越野车响应 CSS 网站

Buggy Responsive CSS website

html

css

materialize