我有一个客户网站,我正在研究他们希望它在960px +处显示一种方式,然后在959px及以下显示另一种方式的地方。
从本质上讲,不是所有人都习惯于平滑缩放,而是一旦它低于960px,它就会跳到iPhone上的样子,而不管您是745px还是320px。
所以我所做的是:
@media only screen and (min-width: 960px) and (max-width: 1366px){}
@media only screen and (min-width: 320px) and (max-width: 959px)
但是当我将
Window Resizer
用于chrome并转到960时,它看起来很好,而768,它看起来坏了。我最初有:@media only screen (max-width: 960px){}
@media only screen (max-width: 480px){}
480像素的像素看起来很完美,正是我想要的。但是,当我进行第一组媒体查询时,好像不在这里。当我在iPhone上尝试时,情况相同。好像它不存在。
我有什么想法可以说:在960+分辨率下,在959px及以下像素,您看起来像这样-本质上是在外观之间“跳跃”。
更新。
因此,考虑到人们发布的内容,我更新了问题以反映所做的更改。但问题仍然在于960,有点破,可能是我。但在768时,它完全崩溃了。
在480,它确实坏了,当我刷新时,屏幕跳到我想要的地方,然后回到它的坏状态。
最佳答案
也许我只是个高个子,但似乎因为某事而无法工作。具有最大宽度320px的不能具有最小宽度959px
所以只要改变
@media only screen and (min-width: 959px) and (max-width: 320px){}
至
@media only screen and (min-width: 320px) and (max-width: 959px){}
等等 ...
关于css - 两种不同尺寸之间的响应式设计,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27515696/