因为专注,所以专业
2005 - 2020

使用现代CSS的响应式版面

时间:2020-02-05 16:53:10    作者:八叔模板堂

推荐: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);
}

总结


相关链接

原文出处 Responsive Typography Using Modern CSS | stevenloria.com
翻译来源 使用现代CSS的响应式版面
赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部