总结
=============================================================
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。
或者
yarn add vue3-scale-box
使用方法:
<template>
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
<router-view />
</ScaleBox>
</template>
<script>
import ScaleBox from "vue3-scale-box";
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
background: url("@/assets/bg.jpg");
}
</style>
方案二:设置设备像素比例(设备像素比)
在项目的 utils 下新建 devicePixelRatio.js 文件
class devicePixelRatio {
/* 获取系统类型 */
getSystem() {
const agent = navigator.userAgent.toLowerCase();
const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
if (isMac) return false;
// 目前只针对 win 处理,其它系统暂无该情况,需要则继续在此添加即可
if (agent.indexOf("windows") >= 0) return true;
}
/* 监听方法兼容写法 */
addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
/* 校正浏览器缩放比例 */
correct() {
// 页面devicePixelRatio(设备像素比例)变化后,计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化
document.getElementsByTagName("body")[0].style.zoom =
1 / window.devicePixelRatio;
}
/* 监听页面缩放 */
watch() {
const that = this;
// 注意: 这个方法是解决全局有两个window.resize
that.addHandler(window, "resize", function () {
that.correct(); // 重新校正浏览器缩放比例
});
}
/* 初始化页面比例 */
init() {
const that = this;
// 判断设备,只在 win 系统下校正浏览器缩放比例
if (that.getSystem()) {
that.correct(); // 校正浏览器缩放比例
that.watch(); // 监听页面缩放
}
}
}
export default devicePixelRatio;
在 App.vue 中引入并使用即可
<template>
<div>
<router-view />
</div>
</template>
<script>
import devPixelRatio from "@/utils/devicePixelRatio.js";
export default {
created() {
new devPixelRatio().init(); // 初始化页面比例
},
};
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}
</style>
方案三:通过 JS 设置 zoom 属性调整缩放比例
在项目的 utils 下新建 monitorZoom.js 文件
export const monitorZoom = () => {
let ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
} else if (~ua.indexOf("msie")) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (
window.outerWidth !== undefined &&
window.innerWidth !== undefined
) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
return ratio;
};
在 main.js 中引入并使用即可
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {
document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {
document.body.style.zoom = 100 / Number(m);
}
完整代码
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
/* 调整缩放比例 start */
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {
document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {
document.body.style.zoom = 100 / Number(m);
}
/* 调整缩放比例 end */
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
获取屏幕的分辨率
获取屏幕的宽:
最后
其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。