Css 移动和平板电脑中的导航突破

我使用的是固定布局，但是当我在中看到我的布局时 安卓平板电脑和手机的布局正在打破一些 原因

请访问

请注意顶部导航“开户、客户支持和选择语言”

在桌面上看起来不错，但在移动浏览器中，顶部导航中断

我怀疑这是他们之间的差距

#main_links_list_1,#main_links_list_2,#main_links_list_3
{

 margin-right: 65px;
 position: relative;
}

---

在CSS中使用媒体查询可以更好地控制移动设备-

@media screen and (max-width: 767px) {
    #main_links_list_1,#main_links_list_2,#main_links_list_3
    {
    margin-right: 15px; // reduced amount for mobile devices and tablets
    position: relative;
    }
} 

---

确保这低于当前CSS，否则它将被覆盖

几乎所有的东西都被破坏了，因为你有一半的布局是“固定的”，另一半是“流动的”。 例如：

div.section {
margin-left: auto;
margin-right: auto;
width: 960px;          /*fixed*/
position: relative;
}

#main_links_container {
    float: left;
    width: 80%;       /*fluid*/
}

还请注意，如果没有为元素设置宽度，则默认值为“自动”

在桌面上打开您的站点，尝试调整浏览器窗口的大小，您可能会看到与手机和平板电脑相同的问题

如果您确实想避免使用媒体选择器，可以尝试更改此选项-

html, body, #page {
height: 100%;
}

像这样的事情-

html, body, #page {
width: 1200px;
margin: 0 auto;
}

---

你的网站在手机/平板电脑上关闭的原因有很多

1==>为非桌面创建流畅的布局
2==>确保元视口正确（包括视网膜显示和Android dpi）
3==>为手机优化图像
4==>注意位置：固定在较旧的iOs和Android设备上。没有按预期工作

---

你能稍微解释一下什么是断裂吗？

你想错了。您需要响应式布局，而不是固定布局！

---

我建议你看看Zurb基金会V4。 尽管像zurb这样的响应性布局是可取的，但快速修复方法在于应用

---

最小宽度：

到您的页面包装元素

您的问题可能是在

专业解决方案

部分引起的。最后一个链接很长，会破坏布局

在css文件中尝试以下操作：

#professional_solutions_list {
  max-width: 180px;
  width: 100%;
}

查看以下屏幕以了解我的意思（红线是菜单应该到达的位置，蓝线是它实际所在的位置）：

更新 以下状态为默认状态，问题发生在平板电脑中，请注意应用的规则：

在添加了

最大宽度：180px

后，问题得到了解决：

我使用

编辑： 根据您的评论，我已再次查看该网站，请删除：

宽度：94%

---

从id为的div:

次要链接

但是平板电脑和手机中有许多屏幕大小，因此我需要考虑每个屏幕大小。我假设如果我使用固定布局，我不需要担心这个问题。请查看网站www.iamvishal.com/pureecn这似乎并不能解决问题，当浏览器窗口重新调整大小时，布局仍然损坏。谢谢@apaul34208的评论，你在投票前试过了吗？请参见我的编辑，建议的解决方案仅在使用FF inspect时有效，在一定程度上有效，但如果继续缩小窗口，则会出现相同的问题。至少在FF中。是的，这是平板电脑的一个补丁，因为它们有足够大的屏幕，你不需要调整firefox窗口的大小使其太小，但是如果我们需要100%的支持，整个设计需要进行审查，或者使用分离的CSS文件，或者使其完全动态无固定部分。

#professional_solutions_list

最为突出，但这肯定不是唯一的问题。