html - 如何确保我的标题图像对所有高度和宽度都有响应？

问题描述

目前我有这样的媒体查询设置：

@mixin respond($breakpoint) {
    @if $breakpoint == phone {
        @media only screen and (max-width: 37.5em) { @content };    //max 600px
    }
    @if $breakpoint == tab-port {
        @media only screen and (max-width: 56.25em) { @content };     // max 900px
    }
    @if $breakpoint == tab-land {
        @media only screen and (max-width: 75em) { @content };    // max 1200px
    }

    @if $breakpoint == medium-desktop {
        @media only screen and (max-width: 93.75em) { @content };    // max 1500px
    }

    @if $breakpoint == desktop {
        @media only screen and (max-width: 112.5em) { @content };    //max 1800px
    }

    @if $breakpoint == big-desktop {
        @media only screen and (min-width: 125em) { @content };    //min width 2000px
    }
}

我很难让图像作为我的标题图像响应不同高度的屏幕尺寸。虽然我为标题图像设置的这些媒体查询看起来像我想要的标题，但它在某些笔记本电脑上看起来仍然很糟糕，即使我调整了浏览器高度同时使我的标题图像响应。

这是我的标题图像的 HTML：

<header class="header">
      <div class="header__logo-box"></div>

      <nav class="navigation">
        <ul class="navigation__list">
          <li class="navigation__item"><a href="#" class="navigation__link navigation__link--highlighted js--scroll-to-services">Teenused</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link js--scroll-to-about">Meist</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link js--scroll-to-contact">Kontakt</a></li>
        </ul>
      </nav>

      <div class="header__image-box">
        &nbsp;
      </div>
    </header>

CSS：

.header {
  height: 29vh;
  box-shadow: 0 .7rem 4rem rgba(0,0,0,0.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;

  &__logo-box {
    position: absolute;
    background-image: url('./../img/logo.png');
    height: 35%;
    width: 22%;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 27%;
    left: 21%;

    @include respond (desktop) {
      width: 27%;
      left: 17%;
    }

    @include respond (medium-desktop) {
      width: 30%;
      left: 7%;
    }

    @include respond(tab-land) {
      height: 40%;
      width: 33%;
      left: 8%;
    }

    @include respond(tab-port) {
      height: 40%;
      width: 33%;
      left: 8%;
    }

    @include respond(phone) {
      height: 50%;
      width: 70%;
      left: 15%;

    }
  }

  &__image-box {
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: url('./../img/3lehte-3.png');
    background-repeat: no-repeat;
    left: 60%;
    background-size: 25%;

    @include respond (desktop) {
      background-size: 23%;
      left: 64%;
    }

    @include respond (medium-desktop) {
      background-size: 20%;
      left: 65%;
    }

    @include respond(tab-land) {
      background-size: 25%;
      left: 50%;
    }

    @include respond(tab-port) {
      background-size: 33%;
      left: 48%;
    }

    @include respond(phone) {
      // background-size: 45%;
      // left: 45%;
      display: none;
    }
  }
}

我知道在编写媒体查询时我也可以使用 max-height 属性，但是对于这么多媒体查询，它已经看起来有点矫枉过正了。我在做什么错 CSS 专家:)？

标签： htmlcssmedia-queries

html - 如何确保我的标题图像对所有高度和宽度都有响应？

问题描述

解决方案

推荐阅读