【问题标题】:CSS navigation mobile viewing [closed]CSS导航移动查看[关闭]
【发布时间】:2015-08-17 14:06:53
【问题描述】:

我的网站在移动浏览器中无法正常工作这里是link 导航面板没有 100% 伸展,没有覆盖关于我们的部分 在浏览器中查看时,请查看并提出解决方案,谢谢。

【问题讨论】:

标签: html css navigation navbar


【解决方案1】:

让我解释一下:

1) 您希望避免硬编码边距,因为您永远不知道用户的屏幕尺寸类型。而是将您的导航定位在中间并自动设置边距,如下所示:

nav {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    height: 50px;
    font-size: 18px;
    font-family: helvetica;
}

2) 您的导航现在尝试适应其父 div(导航栏),但导航栏没有设置宽度,因此宽度保持在 900 像素。但是您的#maincontain 再次具有 1280 像素的硬编码宽度。您的图片的宽度也大于 900 像素,这会将您的页面拉伸到最大尺寸,但导航仍然是 900 像素,因此不会拉伸。

3.1) 简单的解决方案:将导航栏设置为:宽度:1280px;

3.2) 正确的解决方案:从您的#maincontain、您的图像和其他任何拉伸屏幕的地方删除硬编码的宽度。

3.3) 从长远来看,您将很难做出这样的响应式网站,我建议使用 http://getbootstrap.com/ 作为模板,作为其响应式,或者学习如何使用媒体查询来使您的网站响应式。

如果这有帮助,请 UP 并将其标记为答案!谢谢

【讨论】:

  • 对不起,它没有工作任何更多的建议将不胜感激,谢谢。
  • 您能否澄清一下,您希望导航到底如何伸展?究竟是什么问题?
  • 这是我从移动浏览器浏览网站时得到的图像
  • @user287332 查看更新的评论,如果有任何帮助,请上传帖子。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-10-13
  • 2022-12-21
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多