浮动与BFC容器
浮动布局是面试中的一个考点，且大多数面试官在考你css时，问的最多的知识点就是浮动，所以我们不仅要会用浮动去布置页面，还要深入理解其原因，知其然，又要知其所以然，只有这样，你才能在面试官面前如鱼得水般的谈笑自如。下面我会引导你去理解浮动布局究竟有啥知识点和细节需要去理解和注意。 1\. 实现文字环绕效果和脱离文档流 在以前的网站上，有着这么一种典型布局方式（文字环绕图片），如图： 你写着写着，突然想插入一张图片，然后图片后面继续写字，这...
深入理解前端性能优化：图片懒加载实践
在当今的前端开发领域，网站性能优化是一个永恒的主题。性能优化不仅关乎用户体验，也直接影响到网站的搜索引擎排名。其中，图片加载优化是提升页面加载速度的重要手段之一。本文将深入探讨一种常用的图片优化技术——图片懒加载的原理和实现方法。 什么是图片懒加载？ 图片懒加载是一种常用的网页性能优化技术，其基本思想是延迟非可视区域图片的加载时间。换句话说，只有当用户滚动到页面的某个区域，位于该区域的图片才开始加载。这样不仅减少了无谓的网络资源请求，还...
[Android] Android开发中dip，dpi，density，px等详解
Px （Pixel像素） 也称为图像元素，是作为图像构成的基本单元，单个像素的大小并不固定，跟随屏幕大小和像素数量的关系变化（屏幕越大，像素越低，单个像素越大，反之亦然）。所以在使用像素作为设计单位时，在不同的设备上可能会有缩放或拉伸的情况。 Resolution（分辨率） 是指屏幕的垂直和水平方向的像素数量，如果分辨率是 1920\ 1080 ，那就是垂直方向有 1920 个像素，水平方向有 1080 个像素。 Dpi（...
TS系列篇｜类(class)
"不畏惧，不将就，未来的日子好好努力"——大家好！我是小芝麻😄 类（Class）定义了一件事物的抽象特点，包含它的属性和方法 1、定义类 在 中，我们也是通过 关键字来定义一个类, 使用 定义构造函数。 构造函数: constructor 主要用于初始化类的成员变量属性 类的对象创建时自动调用执行 没有返回值 2、类的继承 使用 关键字实现继承，子类中使用 关键字来调用父类的构造函数和方法。 子类继承父类后子类的实例就拥有了父类中的属...
一文读懂屏幕尺寸、分辨率、PPI、设备独立像素、Retina
这是我参与8月更文挑战的第1天，活动详情查看： 当我们介绍一个设备的屏幕时，我们会怎么描述呢。除了说很大很细腻之外，还有更精确的概念吗。 以上是从苹果官网截取的对iPhone 12 的屏幕描述。可以看到主要有 尺寸、像素分辨率、ppi 这三个词。他们分别是什么含义呢。下面我们一一解读。 屏幕尺寸 屏幕尺寸大小是用户非常关键的一个指标。如上所示，苹果官网在最明显的位置标明了各个机型的屏幕尺寸。屏幕尺寸一般用屏幕对角线的物理长度表示，单位为...
超好用的API之IntersectionObserver
这是个还在草案中的API，不过大部分浏览器均已实现（除了IE）。先看下MDN中的介绍： IntersectionObserver接口提供了一种异步观察目标元素与祖先元素或顶级文档 的交集中的变化的方法。祖先元素与视窗viewport被称为 根(root)。 不知大家有没有发现随着网页发展，对 检测某个（些）元素是否出现在可视窗 相关的需求越来越多了？比如： 当页面滚动时，懒加载图片或其他内容。 实现“可无限滚动”网站，也就是当用户滚动网...
Vue使用wangEditor富文本编辑器报错(ot find a descendant at path [0,1] in node: {“children“:[{“type“:“paragraph)_cannot find a descendant at path [0,1] in node
答案 时渲染dom报错问题： 每题的答案 修改文字样式后切换报错 解决办法: 在动态切换答案回显的同时删除 wangEditor 的实例然后异步重新创建一遍进行回显 代码片段:
实现主题换肤( CSS 变量 + 类名切换)
实战引入： CSS变量 + 类名切换 通过arco design组件库的使用来了解如何切换主题 主要思路：CSS变量 + 类名切换（组件库提供/自己定义） + 将当前主题模式设置到localStorage + vuex状态管理theme 1. 定义CSS变量：因为CSS变量组件库已经配好一套黑白变量了，直接拿来用 2. 为body标签添加相关的属性，参考arcodesign官网： 设置到localStorage防止刷新之后主题恢复成默认...
前端主题切换方案
现在我们经常可以看到一些网站会有类似 的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家可根据需求综合分析得出一套适用的方案。 方案1：link标签动态引入 其做法就是提前准备好几套 主题样式文件，在需要的时候，创建 标签动态加载到 标签中，或者是动态改变 标签的 属性。 表现效果如下： 网络请求如下： 优点： 实现了按需加载，提高了首屏加载时的性能 缺点：...