贵州建设厅考试网站准考证下载,比较好的网站开发公司,网站分类代码,iis网站拒绝显示此网页推荐使用postcss插件#xff0c;它会自动将项目所有的px单位统一转换为vw等单位#xff08;包括npm安装的第三方组件#xff09;#xff0c;从而实现适配#xff0c;具体配置规则可参考官网或npm网站介绍。
另外对于大屏的适配#xff0c;需要缩放网页#xff0c;可使用…推荐使用postcss插件它会自动将项目所有的px单位统一转换为vw等单位包括npm安装的第三方组件从而实现适配具体配置规则可参考官网或npm网站介绍。
另外对于大屏的适配需要缩放网页可使用autojs参考https://blog.csdn.net/m0_71231013/article/details/131650562 。但它只能放大或缩小页面适合做大屏项目使用不能让页面字体、div宽高等自动依据屏幕分辨率适配。
我的vue3项目使用postcss首先在devDependencies安装了以下包
postcss: ^8.4.38,
postcss-import: ^16.1.0,
postcss-loader: ^8.1.1,
postcss-px-to-viewport: ^1.1.1,
postcss-px-to-viewport-opt: ^0.0.4,随后参考官网和一些参考资料在项目根目录和package.json平级新建配置文件postcss.config.js内容如下
export default {plugins: {autoprefixer: {path: [./src/*]},postcss-import: {},postcss-px-to-viewport-opt: {viewportWidth: 1707, // 我的视窗宽度viewportHeight: 791, // 我的视窗高度unitPrecision: 5, // 指定px转换为视窗单位值的小数位数(很多时候无法整除)viewportUnit: vw, // 指定需要转换成的视窗单位建议使用vwselectorBlackList: [#nprogress], // 指定不转换为视窗单位的类minPixelValue: 3, // 小于或等于1px不转换为视窗单位mediaQuery: false, // 允许在媒体查询中转换px// exclude: /(\/|\\)(node_modules)(\/|\\)/, // 可以自定义规则哪些文件不要转换例如这句让包里的不会转换但通常无需配置}}
}最后如果使用了element-plus的el-message组件它不能被postcss自动转换需要自己在项目根目录的index.html的head配置
headmeta charsetUTF-8 /!-- link relicon typeimage/svgxml href/vite.svg / --link relicon typeimage href/AI.png /meta nameviewport contentwidthdevice-width, initial-scale1 /title标题/titlestyle.el-message {font-size: 16px;}/style
/head这样就配置完成了无论是在浏览器随意缩放或者换不同的浏览器查看网页都能完美适配
我总结出写项目应遵循以下适配规则 在App.vue页面设置全局的字体颜色、字体大小作为项目默认避免意外情况让页面宽100vw高100vh font-size等单位不要用large、medium等没有明确单位的写法全部禁用px单位特别是1px、2px这种无法被postcss转换的微小长度统一用vw、vh或者百分比 记得电脑系统、浏览器调成深色模式观察网站是否会有文字变白等异常现象并修复 可以将网页用浏览器的手机显示模式调整网页大小例如1920×1080观察不同大小模式网页是否适配将网页进行缩放观察不同缩放倍率下是否出现不适配问题。 完成适配具体做法安装postcss项目根目录新建配置文件postcss.config.js记得别用exclude排除node_modules否则postcss无法将包里的px样式也一起转为vw对于el-message组件单独在项目的index.html文件的style里设置 .el-message { font-size: 16px;}即可保证el-message组件显示正常。
