做网站Linux,中国室内设计师网官网,做瑞士网站,wordpress orion1、
当pc端、移动端H5等项目中#xff0c;需要根据当前浏览器窗口或屏幕尺寸#xff0c;来自适应的改变页面内元素尺寸时#xff0c;就可以借助下述插件和相关配置来实现。
2、适用范围#xff1a;vue3 vite ts
步骤一#xff1a;相关依赖下载下载相关依赖
npm inst…1、
当pc端、移动端H5等项目中需要根据当前浏览器窗口或屏幕尺寸来自适应的改变页面内元素尺寸时就可以借助下述插件和相关配置来实现。
2、适用范围vue3 vite ts
步骤一相关依赖下载下载相关依赖
npm install postcss-pxtorem --save npm install amfe-flexible --save
下载完之后package.json
{name: baseh5,private: true,version: 0.0.0,type: module,scripts: {dev: vite --host,build: vue-tsc -b vite build,preview: vite preview},dependencies: {amfe-flexible: ^2.2.1,less: ^4.2.0,postcss-pxtorem: ^6.1.0,vue: ^3.4.31},devDependencies: {vitejs/plugin-vue: ^5.0.5,typescript: ^5.2.2,vite: ^5.3.4,vue-tsc: ^2.0.24}
}步骤二在main.ts中进行引入
import { createApp } from vue
import App from ./App.vueimport amfe-flexible // 在main.ts中进行引入createApp(App).mount(#app)
步骤三在vite.config.ts中进行配置
import { fileURLToPath, URL } from url
import { defineConfig } from vite
import vue from vitejs/plugin-vue// 这里 - 引入pxtorem插件
import postCssPxToRem from postcss-pxtoremexport default defineConfig({plugins: [vue()],// 引入pxtorem插件 - ----------------------------------------------------css: {postcss: {plugins: [postCssPxToRem({/*配置在将px转化为rem时 1rem等于多少px(因为我们搭配使用了amfe-flexible插件此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)当UI设计稿的全屏基准宽度是1920px时 此处设置的值为192*/rootValue: 75,// propList - 配置方案1所有px均转化为rempropList: [*]/*propList - 配置方案2若想设置部分样式不转化 可以在propList中配置如除border和font-size外所有px均转化为rempropList: [*, !border,!font-size],*/})]}},// 引入pxtorem插件 - ----------------------------------------------------resolve: {alias: {: fileURLToPath(new URL(./src/, import.meta.url))}}
})
3、验证效果
可以设置一个元素的宽度为我们UI设计稿的基准宽度使其正好占满一行 此时可以看到不论浏览器窗口如何放大缩小该元素宽度都是正好占满一行。
4、注意点
1、 postcss-pxtorem插件会将我们写在样式中的px根据我们在vite.config.ts中设置的rootValue值按比例转化为rem。 但是行内样式中的px不会被转化为rem。 2、 amfe-flexible插件会根据当前可展示区域的实际宽度动态设置的font-size为可展示区域宽度的十分之一 这也就是为什么我们在vite.config.ts中设置rootValue值时需要设置为UI设计稿的十分之一 是为了与此插件对font-size的设置相对应。 3、rem单位的特点是1rem对应的px值等于html的font-size值 也就是说当html的font-size值变化时1rem的值会跟随着动态变化 比如 有一个div它的高度设置为1rem 当页面内html的font-size为16px时这个div的高度就是16px 当页面内html的font-size为32px时这个div的高度就是32px
5、禁止缩放
用这种方案做 H5 的时候在手机上打开页面可以被缩放就有些不专业了 可以用下面这种方法解决 在 index.html的 head 标签中添加以下代码即可 headmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue TS/title!-- 禁止在手机端缩放 --meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0!--禁止在电脑浏览器滚轮缩放 --scriptdocument.addEventListener(mousewheel, function (e) {e e || window.event;if ((e.wheelDelta event.ctrlKey) || e.detail) {event.preventDefault();}}, {capture: false,passive: false})/script/head
