62.5percent 中文文档教程
62.5percent
62.5 是使用 rem 的简单方法，没有数学复杂性。
What it does
浏览器默认字体大小为16px，但不方便rem单位使用。 所以我们使用 16px 的 62.5% 来使字体大小为 10px。 现在您可以使用 10 基础数学来设置 rem 的大小。 示例：2.4rem 是 24px。
它只将以下代码添加到您的 css
html {
font-size: .625em;
font-size: calc(1em * .625);
}
现在您可以轻松地使用 rem 和低数学。
Use with CDN
您可以简单地将它添加到您自己的样式表之前。
<link rel="stylesheet" href="//unpkg.com/62.5percent@latest">
Import with eyeglass or NPM
带眼镜
npm i -D eyeglass
npm i -S 62.5percent
/* gulpfile.js */
const gulp = require('gulp');
const sass = require('gulp-sass');
const eyeglass = require("eyeglass");
gulp.task('css', function () {
return gulp.src('sass/**/*.{sass,scss}')
.pipe(sass(eyeglass())
.pipe(gulp.dest('./dist/css/')
);
});
或带NPM
npm i -S 62.5percent
/* gulpfile.js */
const css625 = require("62.5percent").includePaths;
gulp.task('cssTask', function () {
return gulp.src(PATH.css.src)
.pipe(sass(
{ includePaths: [css625] }
).on('error', sass.logError))
// ...
.pipe(gulp.dest(PATH.css.dest));
});
easy use
@import '62.5percent';
body {
font-size: 1.4rem; // equivalent to 14px
@media screen and (min-width: 76.8rem) { // equivalent to 768px
font-size: 1.5rem; // equivalent to 15px
}
@media screen and (min-width: 99.2rem) { // equivalent to 992px
font-size: 1.6rem; // equivalent to 16px
}
}
62.5percent
62.5 is an easy way to use rem with no math complication.
What it does
The browser set the default font size to 16px, but it's not convenient for rem unit use. So we take 62.5% of 16px to have a font size base at 10px. Now you can set size in rem with a 10 base maths. Example: 2.4rem is 24px.
It only adds the following code to your css
html {
font-size: .625em;
font-size: calc(1em * .625);
}
Now you can use rem easily with low maths.
Use with CDN
You can simply add this before your own stylesheet.
<link rel="stylesheet" href="//unpkg.com/62.5percent@latest">
Import with eyeglass or NPM
With eyeglass
npm i -D eyeglass
npm i -S 62.5percent
/* gulpfile.js */
const gulp = require('gulp');
const sass = require('gulp-sass');
const eyeglass = require("eyeglass");
gulp.task('css', function () {
return gulp.src('sass/**/*.{sass,scss}')
.pipe(sass(eyeglass())
.pipe(gulp.dest('./dist/css/')
);
});
or With NPM
npm i -S 62.5percent
/* gulpfile.js */
const css625 = require("62.5percent").includePaths;
gulp.task('cssTask', function () {
return gulp.src(PATH.css.src)
.pipe(sass(
{ includePaths: [css625] }
).on('error', sass.logError))
// ...
.pipe(gulp.dest(PATH.css.dest));
});
easy use
@import '62.5percent';
body {
font-size: 1.4rem; // equivalent to 14px
@media screen and (min-width: 76.8rem) { // equivalent to 768px
font-size: 1.5rem; // equivalent to 15px
}
@media screen and (min-width: 99.2rem) { // equivalent to 992px
font-size: 1.6rem; // equivalent to 16px
}
}
