无锡网站推广哪家好,做网站seo赚钱吗,建站平台 在线提交表格功能,建设银行海淀支行 网站1.普通html页面
一般使用px定义#xff0c;不会进行适配
移动端项目#xff1a;从不同的终端保持页面的一致性#xff08;自适应#xff09;,使用rem相对单位#xff0c;rem是相对于根节点html的font-size的值进行动态换算的值
2.普通html页面进行适配
普通页面中不会进行适配
移动端项目从不同的终端保持页面的一致性自适应,使用rem相对单位rem是相对于根节点html的font-size的值进行动态换算的值
2.普通html页面进行适配
普通页面中 监听屏幕宽度变化resize方法和首次刷新pageshow时需要动态设置根节点html的font-size的值 需要调用时根据屏幕变化docEl.clientWidth去设置屏幕的rem的值 font-size不能以屏幕宽度进行设置font-size/10进行计算
项目中如何通过rem实现自适应肯定不会自己去换算rem单位太麻烦了 使用工具帮助进行换算vsCode中有换算工具px to rem ,altz即可自动进行换算
使用rem作为单位但是需要进行换算rem是相对于页面根节点html标签的font-size的值进行适配的。例如如果页面根节点html标签的font-size的值为16px那么1rem 16px如果页面根节点html标签的font-size的值为20px则1rem 20px所以使用rem需要进行动态计算
适配方案只要在窗口大小改变和初始刷新时获取到根节点的宽度/10作为根节点的fontSize大小再对元素使用rem作为单位即可实现适配
如下只要动态设置了窗口大小改变和初始刷新时的fontSize的值再对元素使用rem作为单位即可实现适配
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 4rem;height: 4rem;background-color: aquamarine;}/style
/head
bodydiv classboxh6这是标题/h6/divscriptconst docEl document.documentElement;console.log(docEl);function setRem(){// 直接设置为docEl.clientWidth宽度如果docEl.clientWidth宽度过大计算结果为0.0023这种类似的数字不好显示docEl.style.fontSize docEl.clientWidth / 10 px}window.addEventListener(resize,setRem);window.addEventListener(pageshow,setRem)/script
/body
/html
3.VS code中使用插件px to rem对普通页面进行适配
如果按上诉适配方法每次做适配都是需要计算的很麻烦再VS code中使用插件px to rem或者插件
px to rem rpx vw (cssrem)页面中正常写px单位然后使用快捷键altz即可自动进行换算 4.vue项目中自适应 使用插件amfe-flexible和postcss-pxtorem
实际项目中vue页面需要进行适配沟通浏览器页面 16px-》1rem - 代码16px之间进行换算。 插件amfe-flexible在页面尺寸发生变化时动态设置项目根节点的值 插件postcss-pxtorem将页面中px单位换算成rem需要在项目根节点添加postcss.config.js文件并设置换算规则
module.exports {plugins: [require(postcss-pxtorem)({// rootValue: 16, //设置为16pxrootValue: 37.7, //以屏幕375px作为标准propList: [*],exclude: /node_modules/i,unitPrecision: 5, //保留rem小数点多少位//selectorBlackList: [.radius], //则是一个对css选择器进行过滤的数组比如你设置为[fs]那例如fs-xl类名里面有关px的样式将不被转换这里也支持正则写法。replace: true, //这个真不知到干嘛用的。有知道的告诉我一下mediaQuery: false, //媒体查询( media screen 之类的)中不生效minPixelValue: 8, //px小于12的不会被转换}),]
}
没有做适配前 5.问题less不会自适应
发现上面写法如果使用的是css可以实现自适应但是如果是less或者sass就不能实现
解决使用postcss-px-to-viewport将px单位换成vw
6.less中实现自适应
参考地址vue移动端适配postcss-px-to-viewport - 简书
npm i postcss-px-to-viewport -D 安装好后postcss.config.js设置以下即可实现自适应
postcss.config.js
const path require(path);module.exports ({ file }) {//如果读取的是vant相关的文件viewportWidth就设为375如果是其他的文件我们就按照我们UI的宽度来设置viewportWidth即750。const designWidth file.dirname.includes(path.join(node_modules, vant)) ? 375 : 750;return {plugins: {autoprefixer: {},postcss-px-to-viewport: {unitToConvert: px,viewportWidth: designWidth,unitPrecision: 6,propList: [*],viewportUnit: vw,fontViewportUnit: vw,selectorBlackList: [],minPixelValue: 1,mediaQuery: true,exclude: [],landscape: false}}}}
postcss-px-to-viewport 的缺点无法把行内样式中的 px 转换成视口单位vw, vh, vmin, vmax
