html 响应式排版的方法:http://fr.slideshare.net/JamesSteinbach/responsive-typography-47632381

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 响应式排版的方法:http://fr.slideshare.net/JamesSteinbach/responsive-typography-47632381相关的知识,希望对你有一定的参考价值。

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$rwd-typography: (
  default: (
    base-font-size: 16px,
    vertical-rhythm: 1.414,
    type-scale: 1.2,
    min-width: null
  ),
  medium: (
    base-font-size: 18px,
    vertical-rhythm: 1.5,
    type-scale: 1.414,
    min-width: 480px
  ),
  large: (
    base-font-size: 20px,
    vertical-rhythm: 1.618,
    type-scale: 1.5,
    min-width: 960px
  ),
  xlarge: (
    base-font-size: 24px,
    vertical-rhythm: 1.618,
    type-scale: 1.618,
    min-width: 1300px
  )
);

$rwd-scale-labels: (p, bq, sh, h, hero);

@function rwd-generate-font-size($label, $breakpoint) {
  $label-position: index($rwd-scale-labels, $label);
  $breakpoint-base-font-size: map-get(map-get($rwd-typography, $breakpoint), base-font-size);
  $breakpoint-type-scale: map-get(map-get($rwd-typography, $breakpoint), type-scale);
  $breakpoint-vertical-rhythm: map-get(map-get($rwd-typography, $breakpoint), vertical-rhythm);
  $font-size: $breakpoint-base-font-size;
  @for $i from 1 to $label-position {
    $font-size: $font-size * $breakpoint-type-scale;
  }
  $base-vertical-rhythm: $breakpoint-base-font-size * $breakpoint-vertical-rhythm;
  $line-height: round($font-size / $base-vertical-rhythm) * $base-vertical-rhythm / $font-size;
  $return: join($font-size, $line-height);
  @return $return;
}

@each $label in $rwd-scale-labels {
  %#{$label} {
    @each $breakpoint, $data in $rwd-typography {
      $generated-values: rwd-generate-font-size($label, $breakpoint);
      $font-size: round(nth($generated-values, 1)*10)/10;
      $line-height: round(nth($generated-values, 2)*100)/100;

      @if map-get($data, min-width) != null {
        @media screen and (min-width: map-get($data, min-width)) {
          font-size: $font-size;
          line-height: $line-height;
        }
      } @else {
        font-size: $font-size;
        line-height: $line-height;
      }
    }
  }
}

body {
  @extend %p;
}
 
blockquote {
  @extend %bq;
}
 
h1 {
  @extend %h;
}
 
h2 {
  @extend %sh;
}
 
.hero-title {
  @extend %hero;
}
<h1 class="hero-title">Primary Title</h1>
<div class="entry-content">
  <p>Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  <h1>Content Title</h1>
  <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus.</p>
  <h2>Content Subtitle</h2>
  <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
body {
  font-size: 16px;
  line-height: 1.41;
}
@media screen and (min-width: 480px) {
  body {
    font-size: 18px;
    line-height: 1.5;
  }
}
@media screen and (min-width: 960px) {
  body {
    font-size: 20px;
    line-height: 1.62;
  }
}
@media screen and (min-width: 1300px) {
  body {
    font-size: 24px;
    line-height: 1.62;
  }
}

blockquote {
  font-size: 19.2px;
  line-height: 1.18;
}
@media screen and (min-width: 480px) {
  blockquote {
    font-size: 25.5px;
    line-height: 1.06;
  }
}
@media screen and (min-width: 960px) {
  blockquote {
    font-size: 30px;
    line-height: 1.08;
  }
}
@media screen and (min-width: 1300px) {
  blockquote {
    font-size: 38.8px;
    line-height: 1;
  }
}

h2 {
  font-size: 23px;
  line-height: 0.98;
}
@media screen and (min-width: 480px) {
  h2 {
    font-size: 36px;
    line-height: 0.75;
  }
}
@media screen and (min-width: 960px) {
  h2 {
    font-size: 45px;
    line-height: 0.72;
  }
}
@media screen and (min-width: 1300px) {
  h2 {
    font-size: 62.8px;
    line-height: 1.24;
  }
}

h1 {
  font-size: 27.6px;
  line-height: 0.82;
}
@media screen and (min-width: 480px) {
  h1 {
    font-size: 50.9px;
    line-height: 1.06;
  }
}
@media screen and (min-width: 960px) {
  h1 {
    font-size: 67.5px;
    line-height: 0.96;
  }
}
@media screen and (min-width: 1300px) {
  h1 {
    font-size: 101.7px;
    line-height: 1.15;
  }
}

.hero-title {
  font-size: 33.2px;
  line-height: 0.68;
}
@media screen and (min-width: 480px) {
  .hero-title {
    font-size: 72px;
    line-height: 1.13;
  }
}
@media screen and (min-width: 960px) {
  .hero-title {
    font-size: 101.3px;
    line-height: 0.96;
  }
}
@media screen and (min-width: 1300px) {
  .hero-title {
    font-size: 164.5px;
    line-height: 0.94;
  }
}
<h1 class="hero-title">Primary Title</h1>
<div class="entry-content">
  <p>Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  <h1>Content Title</h1>
  <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus.</p>
  <h2>Content Subtitle</h2>
  <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>

以上是关于html 响应式排版的方法:http://fr.slideshare.net/JamesSteinbach/responsive-typography-47632381的主要内容,如果未能解决你的问题,请参考以下文章

带有 rem 的响应式排版 - 以 % 或 px 为单位的基线字体大小?

html 响应式排版

响应式网页设计排版需要注意什么?

列表的响应式排版

Angular Material 中的响应式排版

markdown 响应式排版与Sass地图