Question

我有一个奇怪的问题，我希望有人可以提供帮助。

我设计了这个响应式site并且它运行良好，但在手机上它确实很奇怪。在最后的网站上，因为它会在一个小屏幕上看到它加载几毫秒，网站全部搞砸了，侧边栏位于主要内容之上，但之后它加载了正确的布局。我并不担心这太多，但后来我意识到在iphone上你只能看到混乱的网站，而不是应该是正确的布局。

我的媒体查询是这样的：

<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:479px)"   href="css/screen-layout-small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:480px) and (max-width:767px)"  href="css/screen-layout-medium.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:959px)"  href="css/screen-layout-large.css">
<link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2">

希望有人可以提供帮助，因为我在这里有点想法。谢谢！

Answer 1

我现在检查了我的Android手机上的网站，我注意到你的媒体查询中没有正确格式化这个div（barritaloca）。它浮动到首页，从而导致网站异常加载。你应该纠正那个div并恢复。同时，在这里发布你的CSS以获得启发感谢

响应式设计：小型设备和Iphone上的奇怪布局显示

1 个答案: