-2

在我的单页网站上，导航看起来很糟糕，因为它在移动设备上需要 2 行。

截屏

这是代码

#navigation {
font-family: 'Open Sans', sans-serif;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: gray;
}
4

3 回答 3

0

这里的问题是，在移动设备上navbar，[now large] 文本的宽度变小以适合navbar. 为了适应文本，navbar您需要在小屏幕设备运行您的网站时缩小字体大小（并且正如其他人所说的填充），或者您需要更改navbar. 为了检测屏幕大小，您需要在 CSS 中添加如下内容。

@media only screen and (max-width: 999px) {
    /* rules that only apply for canvases narrower than 1000px */
}
@media only screen and (device-width: 768px) and (orientation: landscape) {
    /* rules for iPad in landscape orientation **/
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* iPhone, Android rules here */
    #navigation a{
        font-size: 8px;
        padding: 0 0 0 0;
    }
}
于 2013-08-14T18:16:23.563 回答
0

由于 padding-left 和 padding-right，每个锚点 (a) 需要 30 px。您需要使用一些脚本来检测移动浏览器，并将填充更改为较低的值。

PS：您的问题可能有更常见的解决方案。

于 2013-08-14T18:08:40.657 回答
0

第一个原因::左右两边有很多填充.. 总共 30px .. 每个 15..

导航一个{字体大小：14px；填充左：15px；padding-right: 15px;

减少它...

第二：： 看来您是在调整浏览器大小后拍的那张照片……css对浏览器调整大小没有影响……我认为jsp有……

第三：： 减少填充（最好使用填充左或填充右）..它将临时解决问题..但正如我所说的css（或媒体查询）不适用于浏览器调整大小..如果你想要你将需要jsp ...但是您可以为具有不同宽度的不同屏幕声明不同的css，例如:: for<div class="abc"></div>

 .abc{/*...style for >1000px screen...*/};
  @media only screen and (max-width: 1000px) {
   .abc{
   /*.... style for <1000px screen....*/
   }
  }
于 2013-08-14T18:09:48.933 回答