markdown 响应式排版与Sass地图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 响应式排版与Sass地图相关的知识，希望对你有一定的参考价值。
# Responsive Typography
## Organizing Font Sizes With Sass Maps :smile:
$p-font-sizes: (
null : 15px,
480px : 16px,
640px : 17px,
1024px: 19px
);
:rocket: With mobile-first in mind, we see that the key null represents
the default font size (not in a media query),
and breakpoints are in ascending order.
@mixin font-size($fs-map) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint == null {
font-size: $fs-font-size;
}
@else {
@media screen and (min-width: $fs-breakpoint) {
font-size: $fs-font-size;
}
}
}
}
:+1: How to use it :
p {
@include font-size($p-font-sizes);
}
:+1: which results in the following CSS :
p { font-size: 15px; }
@media screen and (min-width: 480px) {
p { font-size: 16px; }
}
@media screen and (min-width: 640px) {
p { font-size: 17px; }
}
@media screen and (min-width: 1024px) {
p { font-size: 19px; }
}
$h1-font-sizes: (
null : 28px
480px : 31px,
640px : 33px,
1024px: 36px
);
h1 {
@include font-size($h1-font-sizes);
}
:+1: There is another solution :
$breakpoints: (
small : 480px,
medium: 700px,
large : 1024px
);
$p-font-sizes: (
null : 15px,
small : 16px,
medium: 17px,
large : 19px
);
@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint == null {
font-size: $fs-font-size;
}
@else {
// If $fs-font-size is a key that exists in
// $fs-breakpoints, use the value
@if map-has-key($fs-breakpoints, $fs-breakpoint) {
$fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
}
@media screen and (min-width: $fs-breakpoint) {
font-size: $fs-font-size;
}
}
}
}
:rocket: Use it :
p {
@include font-size($p-font-sizes);
}
以上是关于markdown 响应式排版与Sass地图的主要内容，如果未能解决你的问题，请参考以下文章