Question

我尝试按照此tutorial为我的网页创建自适应导航栏。

调整浏览器大小后，我得到正确的视图，但当我使用手机显示我的页面时，一切都很小，如下图所示：

这是教程中的css，只是稍作修改：

MSH_DATA = FOREACH data GENERATE ($0 == 'OBR' ? CONCAT('OBR',ToString(CurrentTime(), 'yyyy-MM-dd\'T\'HH:mm:ssz'),(chararray)$1) : CONCAT('OBX',ToString(CurrentTime(), 'yyyy-MM-dd\'T\'HH:mm:ssz'),(chararray)$1)) AS Uid, $1 AS id, $5 AS result, $3 AS resultname;

HTML：

body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #373a3c!important;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media (orientation: portrait) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media (orientation: portrait) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

有人能告诉我如何才能在电话右侧看到外观吗？

Answer 1

您需要在<head>

中添加此内容

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

这将确保您的宽度相对于屏幕尺寸。

此处提供更多信息：https://css-tricks.com/snippets/html/responsive-meta-tag/

Answer 2

对我来说，比例老虎钳看起来是正确的，我只会将所有元素的font-size乘以1.25的乘数（因此15px将变为18px）

Answer 3

我会在CSS中添加以下内容：

@media screen and (max-width: 480px) {
    ul.topnav li a {
        font-size: calc(17px * 1.5);
    }
}

基本上，这会覆盖CSS中已有的ul.topnav li a类，以便在移动设备中使用更大的字体。

您还可以执行以下操作来更改所有字体大小：

@media screen and (max-width: 480px) {
    body {
        font-size: calc(17px * 1.5);
    }
}

使用响应式Navbar扩展问题

3 个答案: