移动端适配(二) - 案例分析1

项目中出现几处这样的头部需要处理：背景是一张图片，中间是两行文本，文本被背景图片中的框子包围起来，并且需要在PC和移动端适配。

主要需要解决的问题有两个：

1. 背景图片的缩放;
2. 文本的缩放。

解决方案一：直接把文本与背景切成一张图片

这是一种非常简单有效的做法。把整个切成一张图片后，整个只需要处理一张图片了，问题就简化成一张图片的适配。

• 第一种方式：背景图片

<div class="heading"></div>

@image-width: 660px;
@image-height: 256px;
/* 图片高宽比 */
@image-ratio: 256 / 660;
@horizontal-margin: 40px;
.heading {
    width: @image-width;
    height: @image-height;
    margin: 0 auto;
    background-image: url(./heading_bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

   @media screen and (max-width: @image-width + @horizontal-margin * 2) {
       width: calc(100vw - @horizontal-margin * 2);
       height: calc((100vw - @horizontal-margin * 2) * @image-ratio);
       margin: 0 @horizontal-margin;
    }
}

这种方案中使用了calc函数，需要屏幕较窄的情况下对宽度和高度进行计算。之所以需要用到calc函数，主要是由于在使用过程中，小于一定尺寸时，需要空出固定的外边距值。这种计算方式也可以支持外边距值不是固定像素值，与屏幕宽度成线性变化，比如外边距为10%或者10vw等等。

• 第二种方式：img标签
  采用img处理的方式会更简单一些。只是这种情况下，我们需要两个元素：一个容器元素div和一个图像元素img

<div class="heading">
<img alt="头部" src="./heading_bg.png" >
</div>

@image-width: 660px;
@image-height: 256px;
/* 图片高宽比 */
@image-ratio: 256 / 660;
@horizontal-margin: 40px;
.heading {
    width: 100%;
    height: auto;
    
    @media screen and (max-width: @image-width + @horizontal-margin * 2) {
       margin: 0 @horizontal-margin;
    }

    & > img {
         display: block;
         width: 100%;
         max-width: @image-width;
         height: auto;
         margin: 0 auto;
   }   
}

这两种方式，虽然简单，但是都存在一个非常大的问题，就是这样的图片需要很多个，修改图片中的文本需要把整个图片都换掉。又或者修改图片中文字的大小或调整背景图片的样子，那将需要替换掉很多张图片。

解决方案二：文本图片分离

图文分离之后，图片部分可以采用方案一中的两种方式的一种。这里我实现了在用第一种方式的实现。

@h-margin: 40px;
@base-ratio: 1 / 660;

.page-cmlgd-heading {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100vw - @h-margin * 2);
  max-width: 1600px;
  height: 257px;
  max-height: 257px;
  margin: 0 auto 180px;
  text-align: center;
  background-image: url(./heading_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  @media screen and (max-width: 661px + @h-margin * 2) {
    height: calc(257 * (100vw - @h-margin * 2) * @base-ratio);
    margin-right: @h-margin;
    margin-bottom: calc(180 * (100vw - @h-margin * 2) * @base-ratio);
    margin-left: @h-margin;
  }

  &:not(:first-child) {
    margin-top: 180px;
    @media screen and (max-width: 661px + @h-margin * 2) {
      margin-top: calc(180 * (100vw - @h-margin * 2) * @base-ratio);
    }
  }

  .title {
    display: block;
    color: #bb2933;
    font-weight: bold;
    line-height: 1;

    &--chinese {
      // display: none;
      // margin-top: 76px;
      font-size: 70px;
      @media screen and (max-width: 661px + @h-margin * 2) {
        font-size: calc(70 * (100vw - @h-margin * 2) * @base-ratio);
      }
    }
    &--english {
      margin-top: 16px;
      font-size: 30px;
      @media screen and (max-width: 661px + @h-margin * 2) {
        margin-top: calc(16 * (100vw - @h-margin * 2) * @base-ratio);
        font-size: calc(30 * (100vw - @h-margin * 2) * @base-ratio);
      }
    }
  }
}

整个过程的难点在于，我们需要考虑在窄屏情况下存在两边的外边距，这将导致计算时需要把这两边的外边距排除在外，不仅计算字体的时候需要这样考虑，在计算文本大小的时候也需要。