CSS 单位 px、em、rem 的区别与选择

在CSS中，px、em、rem是常用的长度单位，它们在应用中有显著区别：px（像素）：绝对单位，代表屏幕上固定的长度。1px通常是屏幕1吋的1/96。优势在于精确控制尺寸，但缺点是不随页面缩放改变。em：相对单位，用于字体和一般长度单位时计算方式不同。字体大小：基于父元素的字体大小计算。如font-size: 2em;表示当前元素字体是父元素的两倍。宽度：基于当前元素的字体大小计算。如width: 2em;若当前元素字体为10px，则宽度为20px。若未设定当前元素字体，则继承父元素字体大小。特点：灵活性高，但多层嵌套时可能导致继承混乱，适合简单排版。rem：相对单位，基于根元素（html）的字体大小计算。无论在哪使用，都以根元素为基准，解决了em的继承问题。适合响应式设计和移动设备开发。选择策略：px：适合需要精确控制尺寸且不受页面缩放影响的场景。em：适用于简单排版、少层级、仅需与父元素比较的版面。rem：因避免了em的继承问题，成为响应式设计和移动设备开发的首选。现代CSS框架（如Tailwind CSS）也常使用rem作为长度单位，以提高响应式设计的灵活性和可维护性。

技术 · 08-23
CSS 单位 px、em、rem 的区别与选择

使用 TypeScript 处理 API 请求返回值的类型

在现代前端开发中，API 请求是非常常见的操作。而在使用 TypeScript 时，我们可以为这些请求的返回值定义类型，从而提高代码的可靠性和可读性。在本文中，我们将探讨如何使用 TypeScript 处理成功和失败时返回值类型不一致的情况。定义返回值类型首先，我们需要为 API 请求定义成功和失败的返回值类型。可以通过接口（Interface）来定义这些类型：// 成功返回值接口 interface SuccessResponse { success: true; data: any; // 根据实际返回的数据结构定义 } // 失败返回值接口 interface ErrorResponse { success: false; error: string; // 错误信息 } // 联合类型 type ApiResponse = SuccessResponse | ErrorResponse;在上面的代码中，我们定义了 SuccessResponse 接口表示成功的返回值，ErrorResponse 接口表示失败的返回值，并通过联合类型（Union Types）将

技术 · 07-12
使用 TypeScript 处理 API 请求返回值的类型

ECMAScript 新特性详解：从ES6到ES14的演进与应用

ECMAScript（简称ES）是JavaScript的标准，每年都会发布一个新版本，从ES6（2015年）到ES14（2023年），每个版本都引入了新的特性和改进。以下是每个版本的一些主要特性及其使用方式和应用场景：ES6 (2015)let 和 const用法: let x = 1; const y = 2;场景: 块级作用域变量声明，避免变量提升导致的错误。箭头函数用法: const add = (a, b) => a + b;场景: 更简洁的函数表达式，自动绑定 this。模板字符串用法: const message = `Hello, ${name}!`;场景: 多行字符串和字符串插值。类（Class）用法:class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, ${this.name}`); } }场景: 面向对象编程。解构赋值用法:const [a, b] = [1, 2]; const {name, age} = {na

技术 · 06-18
ECMAScript 新特性详解：从ES6到ES14的演进与应用

Fetch API和SSE：服务器发送事件变得简单

使用 Fetch API 和 SSE 实现服务器发送事件服务器发送事件（Server-Sent Events，简称SSE）是一种使得服务器能够向客户端推送信息的机制。在传统的Web应用中，客户端需要定期轮询服务器以获取最新数据，而SSE提供了一种更高效的方式，让服务器能够主动向客户端推送数据。在本篇文章中，我们将探讨如何使用Fetch API和SSE来实现服务器发送事件。SSE简介SSE是一种轻量级的长连接技术，它允许服务器向客户端推送数据，而不需要客户端频繁地请求。SSE使用HTTP协议，并通过text/event-stream内容类型来传输数据。服务器保持连接打开，并可以随时向客户端发送数据。使用EventSource在浏览器中，你可以使用EventSourceAPI来轻松地处理SSE。以下是一个简单的示例代码，展示了如何使用JavaScript处理SSE：// 创建一个新的EventSource连接，指定服务器的URL var source = new EventSource('/path/to/server-endpoint'); // 监听服务器的消息事件 source.on

技术 · 05-27
Fetch API和SSE：服务器发送事件变得简单

X-Frame-Options 与同源策略

同源策略是一种浏览器安全策略，用于限制网页中 JavaScript 代码对其他来源的网页进行访问。同源策略的基本思想是：一个网页只能访问与其来源相同的网页或其下的网页。这可以防止恶意网页访问其他网页的敏感信息，从而保护用户的隐私和安全。X-Frame-Options 是 HTTP 响应头中的一个字段，用于防止网页被嵌入到其他网页中。X-Frame-Options 字段的值可以是以下三种之一：SAMEORIGIN：表示允许嵌入该网页的源必须与该网页的源相同。DENY：表示不允许嵌入该网页。ALLOW-FROM url：表示允许嵌入该网页的源必须是指定的 url。如果网页的响应头中包含 X-Frame-Options 字段，并且其值为 SAMEORIGIN 或 DENY，则浏览器会阻止该网页被嵌入到其他网页中。如果其值为 ALLOW-FROM url，则浏览器只会允许来自指定 url 的网页嵌入该网页。若B系统的视频播放页面中包含 X-Frame-Options 字段，并且其值为 SAMEORIGIN，这意味着只有来自B系统的网页才能嵌入该视频播放页面。当A系统尝试嵌入该视频播放页面时，浏

技术 · 04-18
X-Frame-Options 与同源策略
2024 EN笔迹. All Rights Reserved.
Theme Jasmine by Kent Liao