广州网站建设外包建设推广,无锡网站建设营销型,公司网站建设需要多少钱,最强wordpress主题一般后台管理页面#xff0c;需要自适应的也就是大屏这一个#xff0c;其他的尺寸我感觉用第三方框架继承好的就挺合适的#xff0c;当然自适应方案也可以同步到所有页面#xff0c;但我感觉除了 to c 的项目#xff0c;不太需要所有页面自适应#xff0c;毕竟都是查看和…一般后台管理页面需要自适应的也就是大屏这一个其他的尺寸我感觉用第三方框架继承好的就挺合适的当然自适应方案也可以同步到所有页面但我感觉除了 to c 的项目不太需要所有页面自适应毕竟都是查看和管理数据的也没有很多花哨的东西
我这次做的大屏使用的自适应方案是 vw rem flex
这种方案我感觉比较万金油整体框架使用 vw flex至于其中比较精确的长度和宽度以及字体大小就使用rem
vw和flex这里就不细说了没什么好讲的100vw就是撑满整个浏览器的宽度flex不细说详情可看 阮一峰flex
主要讲一下这个rem其实rem也很简单rem就是根据根节点的字体大小通常是html来计算元素的字体大小比如现在我给html定义了字体大小,然后我给一个div定义长和宽
html {font-size: 20px;
}div {width: 1rem;height: 1rem;
}此时你打开控制台你就能看到 这个div的长宽都是20px
ok那么能理解这个的情况下如何使用rem做到自适应呢比如ui设计图的宽度是1920 x 1080 的尺寸现在有一个盒子长192px也就是设计图的 1/10如果我使用 px 单位的话会出现什么情况呢我来逐一解答
首先如果我仅仅使用px作为这个盒子的单位会出现什么情况如果你的屏幕分辨率是 1920 x 1080那么这个盒子的宽度将会占屏幕的 1/10如果有一个物理尺寸相同的也就是常说的24寸 27寸这种 叫物理尺寸分辨率更高的屏幕比如分辨率是2880 x 1620那么这个盒子的宽度将会占屏幕的 1/15也就是说如果你单纯使用px作为单位在不同的分辨率的屏幕上这个盒子的大小看上去是会有区别的也就会和你的ui设计图有出入原本你想占整体宽度的1/10结果换个屏幕你可能变成了1/15 、 1/20
那么如何解决这个问题呢怎么可以在不同分辨率的屏幕上达到和ui设计图一样的比例呢那就需要rem单位了还是以ui设计图 1920 x 1080 为例子你想写一个div 的宽度 为 1/10 也就是192px你可以设置 html 的font-size为192px然后讲div 的 width 写为 1rem接下来的问题就转变成如何能在不同分辨率下动态修改 html的font-size 的问题
介绍两个插件
postcss-pxtorem 和 amfe-flexible
amfe-flexible 就是上面说的动态修改html的font-size原理就是获取当前设备的宽度你也可以理解为分辨率把当前设备宽度划分为10等份动态设置html元素的字体大小为一份比如当前分辨率 1920 那么html的font-size就是192px如果是2560的分辨率 html的font-size就是 256px
postcss-pxtorem 这个插件就是能将你写的px转换成rem他们结合起来就可以达到自适应的效果还是举例说明你拿到一份ui设计图1920 x 1080其中一个div宽 192那么此时你在代码中写下了 width192px此时 postcss-pxtorem插件会将你的width转换成 1rem这里插一句为什么我写192px就是1rem因为这个插件可以设置后面会说用法转换成1rem之后这个时候的width的具体大小就是根据 html 的font-size 变化来变化了此时屏幕变化amfe-flexible 能获取到当前设备的宽度取 1/10 为 html的font-size 这样 div 的 width就是动态并且能保证在不同分辨率的屏幕上比例和设计图一致
下面说下这两个插件的用法以vue举例我这里是vue3
1.下载3个插件 amfe-flexible postcss postcss-pxtorem
npm install amfe-flexible postcss postcss-pxtorem --save2.vite.config.js中引入
module.exports {css: {postcss: {plugins: [postCssPxToRem({rootValue: 192,propList: [*],exclude: (e) {if (/src(\\|\/)views(\\|\/)echarts/.test(e)) {return false}return true}}),]}}
}rootvalue就是之前提到保证和ui设计图一致的 如果是1920 就写192 2560 就写256 propList 是一个存储哪些将被转换的属性列表这里设置为 [*] 全部假设需要仅对边框进行设置可以写[*, !border*] exclude要忽略并保留为px的文件路径如果value是字符串它将检查文件路径是否包含字符串。 ‘exclude’ 将匹配 \project\postcss-pxtorem\exclude\path 如果value是正则它将检查文件路径是否与regexp相匹配。 /exclude/i 将匹配 \project\postcss-pxtorem\exclude\path 如果value是function则可以使用exclude function返回true该文件将被忽略。 回调函数会将文件路径作为参数传递它应该返回一个布尔结果。
function (file) { return file.indexOf(exclude) ! -1; }这里要提醒一下 postcss-pxtorem 有一个坑就是打包后可能会失效 我这里打包是用的阿里云搭建的流水线打包步骤就是 npm installnpm run build 需要添加一个 npm cache clean --force //清除缓存npm installnpm run build
