阳江营销型网站建设,wordpress防攻击插件,做去自己的网站首页,seo关键词优化指南按照设计稿的尺寸#xff0c;将px按比例计算转为vw和vh#xff0c;转换公式如下
假设设计稿尺寸为 1920*1080#xff08;做之前一定问清楚 ui 设计稿的尺寸#xff09;即#xff1a;
网页宽度1920px
网页高度1080px我们都知道
网页宽度100vw
网页宽度100vh所以#xff0…按照设计稿的尺寸将px按比例计算转为vw和vh转换公式如下
假设设计稿尺寸为 1920*1080做之前一定问清楚 ui 设计稿的尺寸即
网页宽度1920px
网页高度1080px我们都知道
网页宽度100vw
网页宽度100vh所以在 1920px*1080px 的屏幕分辨率下1920px 100vw
1080px 100vh这样一来以一个宽 300px 和 200px 的 div 来说其所占的宽高以 vw 和 vh 为单位计算方式如下:vwDiv (300px / 1920px ) * 100vw
vhDiv (200px / 1080px ) * 100vh所以就在 1920*1080 的屏幕分辨率下计算出了单个 div 的宽高当屏幕放大或者缩小时div 还是以 vw 和 vh 作为宽高的就会自动适应不同分辨率的屏幕1、新建文件src/styles/index.less
charset utf-8;//默认设计稿的宽度
designWidth: 1920;
//默认设计稿的高度
designHeight: 1080;.px2vw(name, px) {{name}: (px / designWidth) * 100vw;
}.px2vh(name, px) {{name}: (px / designHeight) * 100vh;
}
.px2font(px) {font-size: (px / designWidth) * 100vw;
}.px2margin(top, right, bottom, left) {margin: (top / designHeight) * 100vh (right / designWidth) * 100vw (bottom / designHeight) * 100vh(left / designWidth) * 100vw;
}
.px2padding(top, right, bottom, left) {padding: (top / designHeight) * 100vh (right / designWidth) * 100vw (bottom / designHeight) * 100vh(left / designWidth) * 100vw;
}
2、配置在vite.config.js配置less全局变量
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import path from path;export default defineConfig({css: {preprocessorOptions: {less: {javascriptEnabled: true,additionalData: import ${path.resolve(__dirname, src/styles/index.less)};}}}
});3、在 vue 文件中使用
templatediv classbox /div
/template
style langless scopedscoped
/* 直接使用 vw 和 vh 函数将像素值传进去得到的就是具体的 vw vh单位 */
.box{.px2vw(width, 300);.px2vh(height, 100);.px2font(16);.px2vw(margin-left, 300);.px2vh(margin-top, 100);.px2padding(0, 16, 16, 16);background-color: black;
}
/style4、特殊情况处理 1echarts图表字体、间距、位移等尺寸自适应 echarts 的字体大小只支持具体数值像素不能用百分比或者 vw 等尺寸一般字体不会去做自适应当宽高比跟 ui 稿比例出入太大时会出现样式问题 封装工具函数
//给定设计稿的字体大小计算当前分辨率下等比例缩放后的字体大小
export const fitSize (size, defalteWidth 1920) {let clientWidth window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;if (!clientWidth) return size;let scale clientWidth / defalteWidth;return Number((size * scale).toFixed(3));
};使用 var myChart echarts.init(document.getElementById(left-bottom));var option {tooltip: {trigger: item,textStyle: {fontSize: fitSize(14)}},legend: {top: 5%,left: center,itemWidth: fitSize(25),itemHeight: fitSize(14),textStyle: {color: #fff,fontSize: fitSize(12)}},series: [{name: Access From,type: pie,radius: [40%, 70%],avoidLabelOverlap: false,label: {show: false,position: center},emphasis: {label: {show: true,fontSize: fitSize(28),fontWeight: bold}},labelLine: {show: false},data: [{ value: 1048, name: Search Engine },{ value: 735, name: Direct },{ value: 580, name: Email },{ value: 484, name: Union Ads },{ value: 300, name: Video Ads }]}]};myChart.setOption(option);2定义 js 样式处理函数
// 定义设计稿的宽高
const designWidth 1920;
const designHeight 1080;// px转vw
export const px2vw (_px) {return (_px * 100.0) / designWidth vw;
};export const px2vh (_px) {return (_px * 100.0) / designHeight vh;
};export const px2font (_px) {return (_px * 100.0) / designWidth vw;
};使用
divclasscontent:style{ font-size: px2font(14) }
环境监测环境监测环境监测环境监测
/div
el-table:datatableDatastylewidth: 100%:heightpx2vh(342)
el-table-columnpropnamelabelName:widthfitSize(80)/el-table-columnpropdatelabelDate:widthfitSize(120)/
/el-table3第三方插件的处理如element、antd 4地图插件处理
参考一次搞懂数据大屏适配方案 (vw vh、rem、scale)
