确定页面容器的有效宽高以 1920 * 1080 的设计稿为例，当屏幕的宽高比： 等于 16:9 时，宽高都刚好占满屏幕 小于 16:9 时（说明设备较高），页面上下留白，左右占满并上下居中 大于 16:9 时（说明设备较宽），页面左右留白，上下占满并居中 始终保持页面宽高比例为 16:9 具体代码实现： 适配方案vw 方案原理：按照设计稿的尺寸，将 px 按比例计算转为 vw 和 vh...

原文戳这里👉：https://bemcss.com BEM 解决的问题css 的样式应用是全局性的，没有作用域可言。考虑以下场景： 场景一：开发一个弹窗组件，在现有页面中测试都没问题，一段时间后，新需求新页面，该页面一打开这个弹窗组件，页面中样式都变样了，一查问题，原来是弹窗组件和该页面的样式相互覆盖了，接下来就是修改覆盖样式的选择器…又一段时间，又开发新页面，每次为元素命名都心惊胆战，求...

-webkit- 前缀：浏览器厂商会在 CSS 属性或值前加一个私有的前缀来支持新属性，带有此前缀的属性或值能够在以 WebKit 为内核的浏览器中正常使用。以 WebKit 为内核的浏览器代表有 Safari 和 Chrome。 fill-available：它会自动计算元素的宽度和高度，使元素的尺寸撑满其父元素的可用空间，这个属性通常用于解决某些布局问题。 下面是一个使用 -webkit...

只提供核心代码，多余代码已被省去。 padding适用于 parent 的高度不确定的情况 12345.parent { padding: 20px 0;}.child {} flex1234567.parent { display: flex; justify-content: center; align-items: cente...

后端通常会以文件流的形式将文件返回给前端，前端需要将获取到的文件内容转换成 blob 类型的数据，然后再下载到本地。 设置 responseType 为 blob以 axios 为例，通过设置 responseType 为 blob 把指定响应数据的类型指定为 Blob 对象 123456export function getFileFromApi() { return axios...

以 Vue3 为例，通常我们会在 onMounted 钩子中处理异步请求 1234onMounted(() => { await request() fn() // fn 只在 request 请求成功后被调用}) 如果 request 请求出错而未处理，Vue 会抛出警告 虽然影响并不大，可警告看着还是不太舒服，索性还是想办法解决下 可通过下面几种方式消...

根据 Vue 文档，在 Vue 中进行事件监听时，事件的回调函数有两种写法： 接受方法名：不带圆括号的形式不需要传参，event 对象将被自动当做实参传入。 123456789<template> <button @click="greet">Greet</button></template><script s...

原文戳这里👉：https://github.com/mrlmx/blogs/issues/4 前言在面试的时候，经常会遇到一道经典的面试题： 如何优化网页加载速度？ 常规的回答中总会有一条： 把 css 文件放在页面顶部，把 js 文件放在页面底部。 那么，为什么要把 js 文件放在页面的最底部呢？ 我们先来看下这段代码： 1234567891011121314<!DOC...

基本原理if(A <= B)if(A <= B) true else false 123type A = 1;type B = 1 | 2;type Result = A extends B ? true : false; // true if(A <= B) and (C <= D)1234567891011type A =...

四种成员可见性public（类外可见）public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public private（类内可见）private 修饰的属性或方法是私有的，不能在声明它的类的外部访问 protected（子类可见）protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的 #var（真私有...