rem适配
作者：互联网
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
window.clientWidth = docEl.clientWidth;
window.clientHeight = docEl.clientHeight;
if (!window.clientWidth) return;
var aspectRatio = window.clientWidth / window.clientHeight;
if (aspectRatio > 1920 / (window.screenRatio ? 1440 :1080)) {
docEl.style.fontSize = 100 * (window.clientHeight / (window.screenRatio ? 1440 :1080)) + 'px';
window.base = 100 * (window.clientHeight / (window.screenRatio ? 1440 :1080));
} else {
docEl.style.fontSize = 100 * (window.clientWidth / 1920) + 'px';
window.base = 100 * (window.clientWidth / 1920);
// 判断是否为移动设备，提示旋转屏幕
}
// alert(navigator.userAgent)
var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any: function () {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
}
};
};
try {
recalc();
} catch (e) {
}
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
第二中
(function (doc, win) { // 自适应
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; // 放下16个字
};
console.log(resizeEvt);
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);第三中
作为一名前端开发，在做移动端适配时rem、vw是我们经常用到的单位，但是我们在实际开发过程中需要将设计稿上的px转换成rem，如果手动去计算，将是一个很耗时、费力的过程。这是就需要一个工具可以帮我们自动将px转成rem、vw。
开始之前，我们先来了解一个概念【PostCSS】
PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具，类似babel对js的处理。常见的功能如：
1 . 使用下一代css语法(cssnext)
2 . 自动补全浏览器前缀(autoprefixer)
3 . 自动把px代为转换成rem/vw(postcss-pxtorem/postcss-px-to-viewport)
4 . css代码压缩等等
PostCSS 只是一个工具，本身不会对css一顿操作，一般不单独使用，而是与已有的构建工具进行集成，通过插件实现功能。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。
Webpack 中使用 PostCSS 插件示例：
postcss-loader 用来对.css 文件进行处理，并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。require('autoprefixer') 的作用是加载 Autoprefixer 插件。
言归正传，接下来我们看一下如果使用PostCSS把px自动转成rem、vw
postcss-pxtorem
功能：把px转换成rem
安装：npm install postcss-pxtorem --save-dev
配置项：
'postcss-pxtorem':{
rootValue:100,// html节点设的font-size大小，由于chrome最小12px，所以基值要设置大写
unitPrecision:5,// 转rem精确到小数点多少位
propList:['font','font-size','line-height','letter-spacing'],// 指定转换成rem的属性，支持 * ！
selectorBlackList:[],// str或reg ，指定不转换的选择器，str时包含字段即匹配
replace:true,
mediaQuery:false,// 媒体查询内的px是否转换minPixelValue:0// 小于指定数值的px不转换
}
postcss-px-to-viewport
之前做移动端适配时，基本上是采用rem方案。但随着viewport越来越被大家熟悉，我们似乎发现了一种更好的方案。
功能：将px单位自动转换成viewport单位
安装：npm install postcss-px-to-viewport --save-dev
配置项：
'postcss-px-to-viewport': {
unitToConvert:'px'， //要转换的单位，默认是'px'
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750，默认是320
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数，默认是5
propList: ['*'], //指定可以转换的css属性，默认是['*']，代表全部属性进行转换
viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw
fontViewportUnit: 'vw', //指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false, // 允许在媒体查询中转换`px`
replace: true,
exclude: [], //设置忽略文件，如node_modules
}
作者：forever_提拉米苏
链接：https://www.jianshu.com/p/6ef14f2a589e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
4
react使用插件postcss-pxtorem配置px自动转换rem
1.下载postcss-pxtorem插件
npm install postcss postcss-pxtorem --save-dev
2.下载craco ，进行webpack的配置(ant design中的),或者在webpack.config.js中，这里的话我使用antd的craco插件
npm install @craco/craco
3.在项目根目录创建一个craco.config.js进行配置
const pxtorem = require("postcss-pxtorem");
//https://github.com/cuth/postcss-pxtorem,参考地址
module.exports = {
style: {
postcss: {
plugins: [
pxtorem({
rootValue: 3.75, // 设计稿宽度/100，即分成多少份
unitPrecision: 5, // 小数精度
propList: [
"font",
"font-size",
"line-height",
"letter-spacing",
"width",
"height",
],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0,
exclude: /node_modules/i,
}),
],
},
},
};
4.如果报错：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8,因为postcss-pxtorem最高也才6.0.0版本（就2021年5月31日来说是6.0.0，往后就不知道了），只需下载指定5.1.1版本的postcss-pxtorem就行了
npm install postcss-pxtorem@5.1.1 --save-dev
5.到这里其实还会遇到一个bug,就是元素转换的rem对了，但是展示的效果却不一样，这是因为我们没有设置根标签默认的字体大小,这里有一个根据不同设备会设置根标签的默认字体大小，只要引进你的react入口文件就好了，拿走不谢
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = '16px'
} else {
/*
DOMContentLoaded DOM元素加载完成就触发
load 页面所有资源加载触发
*/
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 100
function setRemUnit () {
var rem = docEl.clientWidth / 100
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
标签：适配,px,window,rem,docEl,postcss,pxtorem 来源： https://blog.csdn.net/weixin_49409651/article/details/117824337