使用现代CSS的响应式版面

站长手记作者： 2024-08-28 10:40:01

通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小.为字体大小使用百分比.给文本内容和媒体查询使用em,针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小,使用媒体查询或者media()函数基于视口来改变比例和基础字号

推荐：PostCSS和cssnext

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-cssnext'),
  ],
};

尝试应用一个比例

:root {
  /* Font faces */
  --headerFont: 'Helvetica Neue', sans-serif;
  --bodyFont: 'Georgia', serif;
  --fontColor: hsla(0, 0%, 0%, 0.8);
  --lineHeight: 1.5;
  --baseFontSize: 112.5%;  /* 18px */
  /* Type scale */
  --ratio: 1.414;  /* Augmented fourth */
  /* Each step of the scale is a power
     of --ratio
  */
  --stepUp1: calc(1em * var(--ratio));
  --stepUp2: calc(var(--stepUp1) *
                  var(--ratio));
  --stepUp3: calc(var(--stepUp2) *
                  var(--ratio));
  --stepDown1: calc(1em /
                    var(--ratio));
}

html {
  font-size: var(--baseFontSize);
  color: var(--fontColor);
  line-height: var(--lineHeight);
  font-family: var(--bodyFont);
}

h1,
h2,
h3 {
  margin: var(--stepUp1) 0 0.5em;
  font-family: var(--headerFont);
  line-height: 1.2;
}

h1 {
  font-size: var(--stepUp3);
}

h2 {
  font-size: var(--stepUp2);
}

h3 {
  font-size: var(--stepUp1);
}

small {
  font-size: var(--stepDown1);
}

移动端存在的问题

使其具备响应式特性

使用媒体查询

:root {
   /* Base sizes */
  --baseFontSizeSm: 100%; /* 16px */
  --baseFontSizeMd: 112.5%; /* 18px */
  /* Type scale on smaller screens */
  --ratioSm: 1.2;  /* Minor third */
  --stepUp1Sm: calc(1em * var(--ratioSm));
  --stepUp2Sm: calc(var(--stepUp1Sm) *
                    var(--ratioSm));
  --stepUp3Sm: calc(var(--stepUp2Sm) *
                    var(--ratioSm));
  --stepDown1Sm: calc(1em /
                      var(--ratioSm));
  /* Type scale on larger screens */
  --ratioLg: 1.414;  /* Augmented fourth */
  --stepUp1Lg: calc(1em * var(--ratioLg));
  --stepUp2Lg: calc(var(--stepUp1Lg) *
                    var(--ratioLg));
  --stepUp3Lg: calc(var(--stepUp2Lg) *
                    var(--ratioLg));
  --stepDown1Lg: calc(1em /
                      var(--ratioLg));
}

@custom-media --break-md (width >= 36em);
@custom-media --break-lg (width >= 48em);

html {
  font-size: var(--baseFontSizeSm);
  color: var(--fontColor);
  line-height: var(--lineHeight);
  font-family: var(--bodyFont);

  @media (--break-md) {
    font-size: var(--baseFontSizeMd);
  }
}

h1 {
  font-size: var(--stepUp3Sm);
  @media (--break-lg) {
    font-size: var(--stepUp3Lg);
  }
}

h2 {
  font-size: var(--stepUp2Sm);
  @media (--break-lg) {
    font-size: var(--stepUp2Lg);
  }
}

h3 {
  font-size: var(--stepUp1Sm);
  @media (--break-lg) {
    font-size: var(--stepUp1Lg);
  }
}

small {
  font-size: var(--stepDown1Sm);
  @media (--break-lg) {
    font-size: var(--stepDown1Lg);
  }
}

使用media()函数

npm install postcss-media-fn

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-cssnext'),
    require('postcss-media-fn'),
  ],
};

--stepUp1: media(
  calc(1em * var(--ratioSm)),
  (min-width: 48em) calc(1em * var(--ratioLg))
);

:root {
  /* Break points */
  --minMd: 36em;
  --minLg: 48em;

  /* Ratio on smaller screens */
  --ratioSm: 1.2; /* Minor third */

  /* Ratio on larger screens */
  --ratioLg: 1.414; /* Augmented fourth */

  /* Type scale */
  --stepUp1: media(
    calc(1em * var(--ratioSm)),
    (min-width: var(--minLg)) calc(1em * var(--ratioLg))
  );
  --stepUp2: media(
    calc(1em * var(--ratioSm) * var(--ratioSm)),
    (min-width: var(--minLg)) calc(1em * var(--ratioLg) * var(--ratioLg))
  );
  --stepUp3: media(
    calc(1em * var(--ratioSm) * var(--ratioSm) * var(--ratioSm)),
    (min-width: var(--minLg)) calc(1em * var(--ratioLg) * var(--ratioLg) * var(--ratioLg))
  );
  --stepDown1: media(
    calc(1em / var(--ratioSm)),
    (min-width: var(--minLg)) calc(1em / var(--ratioLg))
  );
}

h1 {
  font-size: var(--stepUp3);
}

h2 {
  font-size: var(--stepUp2);
}

h3 {
  font-size: var(--stepUp1);
}

small {
  font-size: var(--stepDown1);
}