logo标签列表

CSS响应式设计：调整窗口大小与Chrome响应式设计比较

cssresponsive-design
3
这是我的问题。它有点基础，但真的很让我恼火。我制作了一个响应式网页，在手动调整窗口大小时看起来非常棒，但在使用嵌入在 Chrome 中的响应式工具时却不那么好看。所以，我决定按照在 Google Chrome 响应式工具上的样子进行设计，但现在当我手动调整窗口大小时，它看起来很糟糕。
我应该相信哪一个？如何知道在移动设备上将会是怎样的呢？
编辑：另外，我有这个基本规则。
@media only screen and (min-device-width: 900px) {

   body {
      width: 60%;
      margin: 0 auto;
   }

}

使用chrome响应式工具时，页面宽度会正确地调整大小，但在调整chrome窗口大小时则不会。如果我将其更改为min-width: 900px，则在调整chrome窗口大小时，页面将正确地调整大小，但使用chrome响应式工具时则不行！
编辑2：图片说明我的意思
左边是Chrome提供的响应式检查器工具，右边是使用@media only screen and (min-device-width: 900px)调整了宽度的chrome窗口（两者宽度相同）。媒体查询在检查器上不起作用，但在调整窗口大小时起作用。 enter image description here 同样的问题也出现在使用@media only screen and (min-width: 900px)时。检查器工具可以正确显示页面，但每当我调整Chrome窗口大小时，查询都不会被触发！ enter image description here
1
调整窗口大小后请刷新页面。 - Scott
@Jorel Amthor：我们可以通过在多个浏览器中查看来解决这个问题。 - Sayed Rafeeq
如果你这么说 @JorelAmthor，显然我的情况不同.. 但我不会再多说了。 - Scott
@Scott 我并不是这么说，事实就是如此。试着调整一下 http://webdesignerwall.com/tutorials/css3-media-queries 这个页面的大小，你会看到元素在不刷新页面的情况下移动... - Jorel Amthor
正如我所说，我不打算过多强调这个问题。祝你解决问题好运。 - Scott
显示剩余6条评论
2个回答
2

你应该针对窗口大小而不是设备宽度来设置网页的响应性。

将每个min-device-width和max-device-width更改为分别的min-width和max-width。这应该可以解决你的问题。我在使用响应式设计模式和调整窗口大小时也遇到了同样的问题。在CSS媒体查询中进行这个小改变后，问题得到了解决。

1
尝试将“only screen”更改为“all”，因为Chrome可以使用“手持设备”媒体进行iPhone仿真，并将“min-device-width”更改为“min-width”。
还是有同样的问题（请看屏幕截图）。 - Jorel Amthor
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接