Question

一些背景知识：我是一名学生，他自愿重新设计一个由我的课外机器人团队使用的网站。这是我第一次创建和使用Bootstrap和响应式设计，在我看来，一切都进展顺利，直到我将网站上传到测试域并在移动设备上查看。

我面临的问题涉及导航栏的宽度和网站上的内容，具体取决于设备的方向。当设备处于纵向模式（垂直）时，导航栏和内容在文本中没有足够的空间，因此，使页面非常长并占用大量空间。另一方面，当设备是横向的（在它的一边），网站，至少我认为，完全没问题：

http://imgur.com/gallery/toZYt（专辑因为我现在不能发布超过两个链接，以更大（可视）的细节显示问题的图片）

我已经尝试了网页的视口/初始比例，虽然确实改变了导航栏和内容宽度，导航栏文本/徽标会被压缩，看起来质量也相对较低。更改媒体的最小/最大宽度似乎没有任何作用。我不知道如何解决这个问题，以及它是否是@media问题，或者是否与我的CSS菜单/内容有关。我的CSS主CSS中的内容有125px的余量，主要是桌面网站看起来不错，所以这可能与某些东西有关吗？

我之前在其他帖子和其他网站上尝试过研究这个问题，但我找不到任何与我的问题有关的内容，而且任何建议都没有真正修复/影响网站的主要方式。我希望有一些方法可以解决这个问题，而不会影响网站的其他形式（风景/桌面），以及文本/内容的边缘。

我发现问题仍存在于其他手机上（在OnePlus X，iPod 5th Generation和iPhone 6上测试过），但无法在平板电脑上进行测试。如果有人对我有任何建议，将在网站上解决这个问题，将不胜感激。谢谢你的阅读！

Answer 1

您需要查看CSS媒体查询。您应该修复一些事项，包括125px的保证金。

例如，对于移动设备而言，这个余量太大了，所以你应该做的是：

.element {
  margin: 0 15px; /* Default margin */
}

@media only screen and (min-width: 1024px) {
  .element {
    margin: 0 125px; /* Margin for displays > 1024px */
  }
}

您可以设置影响同一元素的多个媒体查询。要构建上面的示例，您还可以再查询一次@ 1280px：

/* ... */
@media only screen and (min-width: 1024px) {
  .element {
    margin: 0 125px; /* Margin for displays > 1024px */
  }
}

@media only screen and (min-width: 1280px) {
  .element {
    margin: 0 200px; /* Margin for displays > 1280px */
  }
}

以较低分辨率调试布局的一种好方法是使用浏览器的内置响应视图。您现在可以在所有主流浏览器中执行此操作，例如在Chrome中，您需要打开开发工具（Ctrl + Shift + I或Cmd + Opt + I）并单击左上角的手机+平板电脑图标。

在我仔细查看了您的网站后，我发现了一些可以应用的修补程序，以便在较小的视口上看起来更好：

1 :(首先删除.navbar-brand＆gt; img内联样式（max-width和margin-top）

.navbar-brand img {  
  max-width: 200px;
  margin-top: 14px;
}

@media only screen and (min-width: 440px) {
  .navbar-brand img {  
    max-width: 350px;
    margin-top: 7px;
  }
}

2：调整较小屏幕的边框控制填充

.border-control {
  padding-left: 15px;
  padding-right: 15px;
}

@media only screen and (min-width: 768px) {
  .border-control {
    padding-left: 125px;
    padding-right: 125px;
  }
}

如果这仍然没有多大意义，我建议你阅读media queries here并弄清楚它们是如何运作的。

移动网站版本取决于设备屏幕的方向

1 个答案: