rem大法
util.js
// 获取fontSize,配合echarts食用
export function getFontSize() {
let windowWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
let windowHight =
window.innerHeight ||
document.docuementElement.clientHeight ||
document.body.clientHeight;
let fontSize;
if (windowWidth < 1366) {
fontSize = windowWidth / 100;
} else {
if (windowWidth / 16 > windowHight / 9) {
fontSize = ((windowHight / 9) * 16) / 100;
} else {
fontSize = windowWidth / 100;
}
}
return fontSize;
}
// 小辉哥的高级方法
export function _regWindowObject(map) {
for (const key in map) {
window[key] = window[key] || map[key];
}
}
//监听 HTML 文档被解析完成的事件,定义最大的 fontSize
export function changeFontSize() {
// 获取html标签
const html = document.querySelector("html");
// 屏幕的宽度除以10,获取跟元素fontSize标准
let windowWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
let windowHight =
window.innerHeight ||
document.docuementElement.clientHeight ||
document.body.clientHeight;
let fontSize;
if (windowWidth < 1440) {
fontSize = windowWidth / 100;
} else {
if (windowWidth / 16 > windowHight / 9) {
fontSize = ((windowHight / 9) * 16) / 100;
} else {
fontSize = windowWidth / 100;
}
}
// 定义根元素 大小
html.style.fontSize = fontSize + "px";
}
//全局事件注册
export function eventRegister() {
document.addEventListener("DOMContentLoaded", () => {
changeFontSize();
});
window.addEventListener("resize", () => {
changeFontSize();
});
}
### 全局js声明
import {
getFontSize,
_regWindowObject,
eventRegister
} from '@/hkScreen/scripts/utils'
//适当引入vue/echarts
Vue.prototype.GetFontSize = getFontSize
Vue.component('vEcharts', vECharts);
// 小辉哥的高级用法,看不懂
_regWindowObject({
echarts: Echarts,
fontSizeHelper: (res) => Math.ceil(res * getFontSize())
});
eventRegister();
new Vue({
router,
store,
render: (h) => h(App),
mounted() {}
}).$mount('#app')
CSS中的使用
按照设计稿,切百分比,比如宽度占屏幕宽度的10%,则width: 10rem;
缺点
需要切换百分比计算长宽
# transform大法
util.js
window.onload = function () { // dom元素加载后计算缩放比例
window.addEventListener('resize', function () {
domResize()
})
domResize()
}
document.addEventListener('DOMContentLoaded', domResize, false);
function domResize () {
let dom = document.getElementsByTagName('body')[0]
let w = 1920
let clientWidth =document.documentElement.clientWidth
let scale = clientWidth / w // 通过浏览器可视宽 / 初始宽度(设计图宽度) 得到缩放比例
// 设置默认页面高度为 100vh 防止非全屏下 dom 元素显示不全
document.getElementsByClassName('main-view')[0].style.height = '100vh'
if (clientWidth <= 1920) { // 小于1910 进行缩放
dom.style.transform = "scale(" + scale + ")" // 设置缩放
dom.style.overflow = "hidden" // 超出隐藏
dom.style.transformOrigin = "left top 0" // 元素复位
dom.style.marginLeft = "0px" // 元素复位
dom.style.width = clientWidth + 'px' // 设置页面宽度
// 设置页面高度 可以使用 vuex 存储高度,需要使用的页面 动态设置 不过判断需要改一下了
document.getElementsByClassName('main-view')[0].style.height = '1080px'
console.log('视窗高度',document.documentElement.clientHeight)
}
console.log('缩放比列:',(clientWidth / w), '视窗宽度',clientWidth, '======', w,)
}
CSS
按照原稿px绘画,不需要对宽度做特殊处理
缺点
部分动画效果和宽高计算会因为transform出现异常