前言
最近天气好冷。今日前端早读课文章由@keep_curious投稿分享。
正文从这开始~~
目前css主流布局方案对比
百分比布局(%)、视口布局(vw/vh)
优势：全部元素应用后，比例保持完好。劣势：计算繁琐，工程效率太低，还要时刻区分是相对于父元素的哪个属性。实用性欠佳。
rem布局(rem)
优势：计算规则统一，不容计算混乱。劣势：复制样式后还不能用，再人工计算，再修改。效率低下。
弹性盒布局(flex)
优势：解决的是盒子布局问题。劣势：带px的属性值如何自适应不同屏幕大小，尚未解决。
网格布局(grid)
优势：之前css框架的网格布局，浏览器逐渐内置了。劣势：劣势同弹性盒布局
媒体查询(@media)
优势：根据浏览器屏幕大小适用相关自定义样式。劣势：需要书写多套样式，多套。
postcss-pxtorem
优势：将px按照相关配置条件转换成rem。劣势：要自己通过js计算根元素的像素值，还要保证postcss-pxtorem的配置参数填写正确。自己做的工作较多，还要撸代码，容易出错。
smart-rem
优势：自动计算rem合理值。劣势：书写代码时，像素单位px要改成rem，对应关系100px=>1rem。要手工将100px改成1rem，与懒癌气质不符。
postcss-auto-rem
优势：自动将px转换成rem。如果代码中是100px，则在浏览器中看到的编译后是1rem。零配置。劣势：需要自定义rem的合理值，如何合理定义rem的合理值，需要撸码，容易出错。
smart-rem加postcss-auto-rem
优势：smart-rem自动完成rem值计算，posts-auto-rem自动将px编译成rem。两者的计算比例完美相合 劣势：两个包结合使用，而无需手工撸码，也无需多余配置。工程化最佳，大大提高了开发效率。
将smart-rem和postcss-auto-rem结合使用，一点点改变～，也有很大的差别
目前支持所有主流框架和webpack、gulp、及nodejs Api等等等等。
例如
源代码
.foo {
/* Input example */
margin: 100px;
padding: 100px;
width: 50px;
font-size: 50px;
}
输出到浏览器中的代码
.foo {
/* Output example */
margin: 1rem;
padding: 1rem;
width: 0.5rem;
font-size: 0.5rem;
}
调试问题：
如果在代码编辑器中，正常修改px值即可；
如果在浏览器中，100px = 1rem，如果调整1px，只需增加0.01rem；(在浏览器上微调，看实时效果，着实比其他方案简单很多哦)
用法
给出以下参考用法，当然，高手可以自己随便玩。
Vue、react、angular框架使用步骤参考如下
第一步:
npm install smart-rem -S
第二步:
在入口文件
import smartRem from 'smart-rem'
smartRem(Arguments)
注释: Arguments参数是设计稿的整个尺寸宽度，如果设计稿的尺寸宽度是750px，那么参数就是750(不带px)，如下：
smartRem(750)
注意vue2.x已经内置了对postcss的支持，所以，如果在根目录有.postcssrc.js文件，直接在此文件添加一行"postcss-auto-rem":{}，然后npm install -D postcss-auto-rem 即可，下面第三步和第四步都不用看了。如果其它框架有变动，亦可酌情处理哦。
第三步:
安装依赖postcss postcss-auto-rem
npm install --save-dev postcss postcss-auto-rem
第四步:
修改css相关rules配置
如果是Webpack,在webpack.config.js中使用postcss-loader:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
}
]
}
}
如果是CSS-in-JS,在jsx中使用postcss最好的方式是使用astroturf，添加到你的webpack.config.js中。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
}
]
}
}
第五步：
检查你的项目是否存在postcss配置文件，一般位于根目录。
如果没有postcss的相关配置文件，则可以手动创建一个postcss.config.js，在plugins中，添加require(postcss-auto-rem)
module.exports = {
plugins: [
+ require('postcss-auto-rem'),
require('autoprefixer')
]
}
如果你使用parcel打包，而非webpack，那么parcel内置了postcss，你只需在根目录创建postcss.config.js，添加如代码
Nuxt框架，使用可参考如下
可在nuxt.config.js中的head部分做添加
head: {
// ** 开始添加
script: [
{
innerHTML: require('smart-rem') + 'smartRem(Arguments)',
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
// ** 结束添加
},
其它步骤参考上面第一步到第四步。
Next 框架使用可参考如下
根目录下创建文件pages/_document.js，在render中添加script脚本
// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Head>
{`body { margin: 0 } /* custom! */`}style>
// **开始添加
<script dangerouslySetInnerHTML={{__html: require('smart-rem') + 'smartRem(Arguments)'}}>script>
// ** 结束添加
Head>
<body className="custom_class">
<Main />
<NextScript />
body>
html>
)
}
}
其它步骤参考最上面第一步到第四步。
Node Api用法参考如下
var fs = require('fs');
var postcss = require('postcss');
var postcssAutoRem = require('postcss-auto-rem');
var css = fs.readFileSync('main.css', 'utf8');
var processedCss = postcss(postcssAutoRem()).process(css).css;
fs.writeFile('auto-rem.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('file written.');
});
gulp用法参考如下
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var postcssAutoRem = require('postcss-auto-rem');
gulp.task('css', function () {
var processors = [
autoprefixer({
browsers: 'last 1 version'
}),
postcssAutoRem()
];
return gulp.src(['build/css/**/*.css'])
.pipe(postcss(processors))
.pipe(gulp.dest('build/css'));
});
关于本文 作者：@keep_curious 原文：https://juejin.cn/post/6914676904909864968/
本周你可能错过的前端早读课
为你推荐
【第2038期】使用滚动特效的最佳实践
【第1625期】 从原型图到成品：步步深入 CSS 布局
欢迎自荐投稿，前端早读课等你来
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
