(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
postcss-pxtorem
配置px自动转换rempostcss-pxtorem
插件npm install postcss postcss-pxtorem --save-dev
npm install @craco/craco
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, }), ], }, }, };
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
(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))