Question

我用Google搜索了我的问题，但无法找到合适的解决方案。实际上，我正在构建一个目前使用HTML和CSS的eBay列表模板 - 我正在使用SCSS生成样式表。我正在处理模板的菜单方面。

我设置了媒体查询，以便在宽度小于690像素的设备上（我没有使用标准查询，我使用断点来适应我的内容 - 它们也可能会发生变化），菜单按钮发生变化到一个块元素并显示在一列而不是一行（在桌面上）。

首先，这是我正在处理的媒体查询 - 它是一个名为_media.scss的SCSS部分文件中的mixin，我将其导入主style.scss。< / p>

    @mixin bp-large {
      @media only screen and (max-width: 690px){
        @content;
      }
    }

使用style.scss

将其导入我的@import 'media';文件

以下是我的菜单的HTML：

          <div class='header'>
            <section>
              <div class='logo'>
                <h2>Company Logo</h2>
              </div>
              <div class='top-menu'>
                <ul>
                  <li><a href='#'>Store Front</a></li>
                  <li><a href='#'>Latest Arrivals</a></li>
                  <li><a href='#'>Featured Picks</a></li>
                  <li><a href='#'>Feedback</a></li>
                  <li><a href='#'>Contact</a></li>
                </ul>
              </div>
            </section>
          </div>

以下是相关的SCSS：

    section {
      width: 85vw;
      margin: 0 auto;
      .header & {
        @include bp-large {
          width: 60vw;
        }
      }
    }

    .logo {
      @include bp-large {
        text-align: center;
      }
    }

    .top-menu {
      background-color: $primary;
      text-align: center;
      width: 100%;
    }

    .top-menu ul {
      list-style: none;
      display: flex;
      text-align: center;
      flex-direction: row;
      @include bp-large {
        flex-direction: column;
     }
    }

    .top-menu ul li {
      flex-grow: 1;
      display: flex;
      align-items: center;
      background-color: $button-color;
      padding: 15px;
      border-right: 3px solid $accent-color;
      &:last-child {
        border: none;
      }
      &:hover {
        background-color: $button-hover;
        cursor: pointer;
      }
      @include bp-large {
        display: block;
        border-bottom: 3px solid $accent-color;
        border-right: none;
        &:last-child {
          border: none;
        }
      }
    }

我为我的项目@ http://dannyxcii.github.io/lst-tmp设置了一个GitHub页面 - 目前菜单实际上确实做了它在智能手机上查看时应该做的事情（在添加以下HTML行之后）：

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

但是 - 菜单位于页面的左侧，并且最初不适合设备宽度 - 通常的双击以居中＆＃39;让它看起来应该如何。关于如何解决这个问题的任何想法？

Answer 1

事物是浏览器使用的像素与硬件像素不同。他们使用所谓的DIP（密度无关像素或设备无关像素）。新的移动设备配备屏幕全高清或更高的屏幕分辨率像素。示例三星galaxy s8的分辨率为2,960x1,440。由于它的宽度为14440px，因此（max-width：760px）或任何其他媒体查询等媒体查询不起作用，因为max-width为1440px。但是，为了保持一定程度的一致性，有DIP，DIP将CSS像素转换为最适合查看您网站的内容。对于手机，DIP的宽度为320px。 TL; DR：添加'meta viewport'标签后，您告诉浏览器使用dips而不是CSS pixel。它通过将更高分辨率设备中的2个或更多像素映射到1DIP，将每个移动设备视为320px设备。有一个非常简短的甜蜜课程，由Udacity自由提供，它通过元视口标记Link to the course。希望这会有所帮助：）

在浏览器调整大小的媒体查询，而不是在移动设备上

1 个答案: