Question

我正在使用Gridset来创建动态网站。到目前为止，事情进展顺利。当我点击我的断点时，它会优雅地过渡到它的移动对手。但是，我注意到，当我在手机上测试时，该网站比手机的查看区域大，即使它使用的是正确的移动网格。

以下是从桌面上查看的两种表单布局的两个屏幕截图

但是，当我在手机上查看时，您必须水平滚动才能查看整个内容。我尝试使用

来解决这个问题

<meta name="viewport" content="width=device-width, initial-scale=1">

这也是我想要的。我以为我解决了我的问题。直到我在水平模式下在手机上查看它。它切断了最后一个导航选项＆＃39; contact＆＃39;

以下是我手机的截图

phone Screenshot

在任何方向的任何平板电脑上看起来都很好。手机在横向模式下工作。

所以最终我的问题是，在水平模式下在手机上查看时，如何防止我的ul导航被切断。

如果您想查看来源

，这是指向该网站的链接

link

编辑*

因为我想将登录中心并查询图标，我必须删除浮动。这可以防止他们在同一条线上。

/*center icons on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
    #headerIcons img{
        display:block;
        float:none;
        margin-left:auto;
        margin-right:auto;

    }
}

有更好的方法吗？或者是否有不同的方法来确保图像保持在同一条线上？

Answer 1

从height: 60px ...

中删除#navigation

......而且它已修复。里面的LI元素是浮动的，所以当没有足够的宽度来显示所有的元素时，它们会下降到另一行。问题是固定高度：容器（#navigation）在下拉时无法扩展以包含它们。

修改

如果您希望导航项目全部适合一行，则需要使用媒体查询来调整布局。例如，将其添加到样式表中：

@media screen and (max-width: 320px) { /* increase this width until you see the desired results */ #navigationPages li { font-size: 1em; } #navigationPages li a { padding: 0.75em 0.6em; } }

此媒体查询减少了320px或更小宽度的窗口的字体大小和链接填充。您可以根据需要调整宽度。如果您不熟悉媒体查询，那么谷歌关于它们是个好主意。它们有助于移动响应式网站开发。

如何针对移动设备优化我的ul导航

1 个答案: