rem适配
2021/6/11 18:22:56
本文主要是介绍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))
这篇关于rem适配的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现