当前位置: 首页 > news >正文

H5 移动端适配最佳实践落地指南。

文章目录

  • 前言
    • 一、为什么需要移动端适配?
    • 二、核心适配方案
      • 1. 视口(Viewport)设置
      • 2. 三种适配方案 (仅供参考)
        • (1)rem 适配方案
        • (2)vw/vh 适配方案
        • (3)使用postcss-px-to-viewport插件方案
          • 一、安装 postcss-px-to-viewport
          • 二、配置 PostCSS
          • 关键配置项说明
    • 三、常见问题与解决方案
    • 总结


前言

在移动端开发中,适配不同设备屏幕尺寸和分辨率一直是一个核心挑战。作为一名前端工程师,我在多个项目中积累了丰富的 H5 移动端适配经验。本文将分享一套完整的 H5 移动端适配最佳实践方案,并提供可落地的代码示例。


一、为什么需要移动端适配?

  1. 设备多样性:从 320px 的小屏手机到 1200px 的平板,屏幕尺寸差异巨大。
  2. 分辨率差异:1x、2x、3x 屏幕密度导致像素密度不同。
  3. 用户体验:适配不良会导致页面变形、文字模糊、交互困难等问题。

二、核心适配方案

1. 视口(Viewport)设置

在 HTML 的 <head> 中添加以下 meta 标签:

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  • width=device-width:让页面宽度等于设备宽度。
  • initial-scale=1.0:初始缩放比例为 1。
  • user-scalable=no:禁止用户缩放(根据需求决定是否使用)。

2. 三种适配方案 (仅供参考)

(1)rem 适配方案

原理:将页面宽度等分为 100 份,每份为 1rem,通过动态设置根元素字体大小实现适配。

实现步骤

  1. JavaScript 动态设置 rem
	// rem.js(function () {const baseSize = 32; // 设计稿宽度为 375px 时,1rem = 32px(可根据设计稿调整)const setRem = () => {const scale = document.documentElement.clientWidth / 375; // 375 是设计稿宽度document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; // 最大缩放 2 倍};setRem();window.addEventListener('resize', setRem);})();
  1. 引入 rem.js
	<script src="./rem.js"></script>
  1. CSS 中使用 rem
	.container {width: 20rem; /* 相当于 640px(设计稿中 20*32=640) */padding: 1rem;}.button {width: 10rem;height: 2rem;line-height: 2rem;font-size: 0.8rem;}
(2)vw/vh 适配方案

原理:使用视窗单位(vw/vh)直接按比例缩放。

实现示例

	/* 设计稿宽度为 375px */.container {width: 53.333vw; /* 200px / 375px * 100 */padding: 2.667vw; /* 10px / 375px * 100 */}.button {width: 26.667vw; /* 100px / 375px * 100 */height: 5.333vw; /* 20px / 375px * 100 */line-height: 5.333vw;font-size: 2.133vw; /* 8px / 375px * 100 */}

优点:无需 JavaScript,CSS 直接实现。
缺点:在极端屏幕尺寸下可能需要额外处理。

(3)使用postcss-px-to-viewport插件方案

postcss-px-to-viewport 是一个 PostCSS 插件,它可以将 CSS 中的 px 单位自动转换为 vw 单位,从而实现响应式布局。下面是如何使用这个插件的详细指南。

一、安装 postcss-px-to-viewport

首先,你需要安装这个插件以及它的依赖:

	npm install postcss-px-to-viewport postcss --save-dev

或者使用 yarn:

	yarn add postcss-px-to-viewport postcss --dev
二、配置 PostCSS

在你的项目根目录下创建或修改 postcss.config.js 文件:

	module.exports = {plugins: {'postcss-px-to-viewport': {unitToConvert: 'px',     // 要转换的单位,默认为 'px'viewportWidth: 375,      // 设计稿的视口宽度(通常与设计稿宽度一致)unitPrecision: 5,        // 转换后的精度(小数点位数)propList: ['*'],         // 需要转换的属性列表,'*' 表示所有属性viewportUnit: 'vw',      // 转换后的单位,默认为 'vw'fontViewportUnit: 'vw',  // 字体转换后的单位,默认为 'vw'selectorBlackList: [],   // 不进行转换的选择器黑名单minPixelValue: 1,        // 最小转换的像素值(小于此值的 px 不会转换)mediaQuery: false,       // 是否转换媒体查询中的 pxreplace: true,           // 是否直接替换属性值而不添加备用exclude: [/node_modules/], // 忽略某些文件夹下的文件landscape: false,        // 是否处理横屏情况landscapeUnit: 'vw',     // 横屏时使用的单位landscapeWidth: 568      // 横屏时的视口宽度}}};

通过 vite.config.js 文件配置
在 Vite 的配置文件中,通过 css.postcss 属性直接配置插件:

    	import { defineConfig } from 'vite';import postcssPxToViewport from 'postcss-px-to-viewport';export default defineConfig({css: {postcss: {plugins: [postcssPxToViewport({viewportWidth: 375,unitPrecision: 5,propList: ['*'],viewportUnit: 'vw',minPixelValue: 1,exclude: [/node_modules/]})]}}});
关键配置项说明
  • viewportWidth:设计稿的视口宽度,需与项目设计稿宽度一致(如 375px)。
  • unitPrecision:转换后的小数位数,通常设置为 5。
  • propList:指定需要转换的 CSS 属性,['*'] 表示全部转换。
  • viewportUnit:转换后的单位,通常为 vw
  • minPixelValue:设置最小转换数值,小于此值的 px 不转换(如设置为 1,则 1px 及以下不转换)。
  • exclude:通过正则表达式排除不需要转换的文件或目录(如 node_modules)。

三、常见问题与解决方案

  1. 图片模糊

    • 使用高分辨率图片,并通过 srcset 或媒体查询加载。
    • 避免使用 CSS 缩放图片。
  2. 文字溢出

    • 使用 -webkit-line-clamp 实现多行文本截断。
    • 添加 white-space: nowraptext-overflow: ellipsis 实现单行截断。
  3. 布局错乱

    • 避免使用固定宽度,优先使用百分比、flex 或 grid 布局。
    • 使用 box-sizing: border-box 避免 padding 和 border 影响布局。
  4. 性能问题

    • 避免在 resize 事件中执行复杂计算。
    • 使用防抖(debounce)或节流(throttle)优化 resize 事件。

总结

H5 移动端适配是一个系统工程,需要从视口设置、布局方案、图片处理、字体适配等多个方面综合考虑。通过本文分享的最佳实践方案,你可以:

  1. 快速落地适配:使用 rem 或 vw/vh 方案快速实现适配。
  2. 提升用户体验:确保页面在不同设备上显示一致。
  3. 提高开发效率:通过工具和规范减少适配成本。

希望本文能对你的 H5 移动端开发有所帮助!如果你有更好的适配方案或经验,欢迎在评论区分享。

相关文章:

H5 移动端适配最佳实践落地指南。

文章目录 前言一、为什么需要移动端适配&#xff1f;二、核心适配方案1. 视口&#xff08;Viewport&#xff09;设置2. 三种适配方案 &#xff08;仅供参考&#xff09;&#xff08;1&#xff09;rem 适配方案&#xff08;2&#xff09;vw/vh 适配方案&#xff08;3&#xff09…...

从电动化到智能化,法雷奥“猛攻”中国汽车市场

当前&#xff0c;全球汽车产业正在经历前所未有的变革&#xff0c;外资Tier1巨头开始向中国智能电动汽车市场发起新一轮“猛攻”。 在4月23日-5月2日上海国际车展期间&#xff0c;博世、采埃孚、大陆集团、法雷奥等全球百强零部件厂商纷纷发布战略新品与转型计划。在这其中&am…...

智能网联汽车 “中央计算” 博弈:RTOS 与跨域融合的算力分配挑战

一、引言 随着智能驾驶技术的飞速发展&#xff0c;汽车逐渐从传统的交通工具演变为移动的智能终端。智能网联汽车的核心竞争力日益体现在其强大的计算能力和高效的算力管理上。汽车电子电气架构&#xff08;EEA&#xff09;正经历从分布式架构向 “中央计算 区域控制” 架构的…...

springboot 加载 tomcat 源码追踪

加载 TomcatServletWebServerFactory 从 SpringApplication.run(&#xff09;方法进入 进入到 refresh () 方法 选择实现类 ServletWebServerApplicationContext 进入到 AbstractApplicationContext onRefresh() 方法创建容器 找到加载bean 得到 webServer 实例 点击 get…...

AI预测3D新模型百十个定位预测+胆码预测+去和尾2025年5月9日第72弹

从今天开始&#xff0c;咱们还是暂时基于旧的模型进行预测&#xff0c;好了&#xff0c;废话不多说&#xff0c;按照老办法&#xff0c;重点8-9码定位&#xff0c;配合三胆下1或下2&#xff0c;杀1-2个和尾&#xff0c;再杀6-8个和值&#xff0c;可以做到100-300注左右。 (1)定…...

企业高性能WEB服务器—Nginx

Nginx介绍 Nginx是一款轻量级的网页服务器、反向代理服务器以及电子邮件代理服务器。 具有高并发&#xff08;特别是静态资源&#xff09;、占用系统资源少的特性。它不仅是Web服务软件&#xff0c;还具有反向代理负载均衡功能和缓存服务功能 具备如下基本特性 可针对静态资…...

neo4j图数据库基本概念和向量使用

一.节点 1.新建节点 create (n:GroupProduct {name:都邦高保额团意险,description: "保险产品名称"} ) return n CREATE&#xff1a;Neo4j 的关键字&#xff0c;用于创建新节点或关系。 (n:GroupProduct)&#xff1a; n 是节点的临时别名&#xff08;变量名&#…...

安全核查基线-3.用户umask设置策略

在Linux中&#xff0c;umask&#xff08;用户文件创建掩码&#xff09;是一个重要的权限管理机制&#xff0c;用于控制新创建的文件和目录的默认权限。umask的值决定了文件或目录的初始权限中哪些权限位会被屏蔽&#xff08;即不可用&#xff09;。 1. umask 的作用 文件默认权…...

UE像素流是什么

UE像素流是什么 UE像素流送是一种云渲染技术&#xff0c;由虚幻引擎&#xff08;UE&#xff09;提出&#xff0c;用于在浏览器中运行高画质3D应用或游戏。其原理是在远程计算机&#xff08;可以是云端服务器或本地高性能服务器&#xff09;上运行UE开发的应用程序&#xff0c;…...

【C】初阶数据结构14 -- 归并排序

本篇文章主要是讲解经典的排序算法 -- 归并排序 目录 1 递归版本的归并排序 1&#xff09; 算法思想 2&#xff09; 代码 3&#xff09; 时间复杂度与空间复杂度分析 &#xff08;1&#xff09; 时间复杂度 &#xff08;2&#xff09; 空间复杂度 2 迭代版本的归并…...

02_线性模型(回归线性模型)

描述 线性模型是在实践中广泛使用的一类模型&#xff0c;线性模型利用输入特征的线性函数&#xff08;linear function&#xff09;进行预测。 用于回归的线性模型 对于回归问题&#xff0c;线性模型预测的一般公式如下&#xff1a; $ \widehat y w[0]*x[0]w[1]*x[1]…w[p…...

当当网Top500书籍信息爬取与分析

爬取当当网的Top500书籍信息&#xff0c;并对书籍的评价数量进行排序&#xff0c;然后绘制前十名的条形图&#xff0c;然后对各个出版社出版的书籍数量进行排序&#xff0c;绘制百分比的饼图 # 导入所需的模块 import re # 正则表达式模块&#xff0c;用于提取文本中的特定模…...

Spring生态全景解析:Spring、Spring MVC、SpringBoot与Spring Cloud的关系

Spring生态全景解析&#xff1a;Spring、Spring MVC、SpringBoot与Spring Cloud的关系 1. Spring框架简介 Spring框架是一个轻量级的Java开发框架&#xff0c;由Rod Johnson于2003年创建。它主要解决了企业级Java开发中的复杂性&#xff0c;通过依赖注入(DI)和面向切面编程(A…...

STM32-TIM定时中断(6)

目录 一、TIM介绍 1、TIM简介 2、定时器类型 3、基本定时器 4、通用定时器 5、定时中断基本结构 6、时基单元的时序 &#xff08;1&#xff09;预分频器时序 &#xff08;2&#xff09;计数器时序 7、RCC时钟树 二、定时器输出比较功能&#xff08;PWM&#xff09; …...

Godot4.3类星露谷游戏开发之【昼夜循环】

千里之行&#xff0c;始于足下 文章目录 零、 笔记一、创造时间二、产生颜色三、搭建测试环境四、测试五、免费开源资产包 零、 笔记 为了让游戏可以拥有白天和黑夜&#xff0c;我们需要像上帝一样&#xff0c;在游戏中创造时间的规则&#xff0c;并在不同的时间点产生不同的颜…...

工业与协议融合篇:如何将多个协议集成进一个系统?

🏭 本文为《嵌入式通信协议全解析》第六篇,深入探讨如何在工业或物联网系统中同时集成 BLE、CAN、LoRa、MQTT、RS485 等多种通信协议,实现一个高效、可控、稳定运行的嵌入式通信架构。 🧭 一、为什么需要多协议融合? 在真实产品中,单一通信协议往往无法满足所有业务需…...

java-----------------多态

多态&#xff0c;当前的成指的是 java 所呈现出来的一个对象 多态 定义 多态是指同一个行为具有多个不同表现形式或形态的能力。在面向对象编程中&#xff0c;多态通过方法重载和方法重写来实现。 强弱类型语言 javascript 或者python 是弱类型语言 C 语言&#xff0c;或…...

vLLM部署Qwen2-7B模型推理

vllm简介 vLLM是一个高效的大语言模型推理和部署服务系统&#xff0c;专为大型语言模型的高效执行而设计。它不仅支持多种量化技术以减少模型大小和加速推理过程&#xff0c;还提供了与OpenAI API兼容的服务接口&#xff0c;使得现有的应用程序能够无缝对接。 一、前提环境 …...

SSL证书格式详解:PEM、CER、DER、JKS、PKCS12等

引言 在网络安全领域&#xff0c;SSL/TLS证书是保障互联网通信安全的核心工具。它们通过加密连接&#xff0c;确保服务器与客户端之间的数据隐私和完整性。然而&#xff0c;对于初学者来说&#xff0c;SSL证书的多种格式——PEM、CER、JKS、PKCS12、PFX等——常常令人困惑。每…...

idea spring boot 打包成可执行的 JAR包

idea 2023 spring boot 2.6.13 打包成可执行的 JAR包 创建一个 简单的 spring boot 程序 idea File — New — Project 11 22 11 package com.example.demo.controller;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.b…...

设计模式-迭代器模式

写在前面 Hello&#xff0c;我是易元&#xff0c;这篇文章是我学习设计模式时的笔记和心得体会。如果其中有错误&#xff0c;欢迎大家留言指正&#xff01; 案例 假设有一个Book类和一个管理书籍的BookCollection类&#xff0c;我们需要遍历BookCollection类中所有书籍信息。 一…...

Java 匿名内部类的作用

简化代码&#xff1a;无需专门定义一个具名类来实现接口或继承类&#xff0c;减少类文件数量&#xff0c;在只需简单实现特定功能时&#xff0c;让代码更简洁紧凑 。比如创建线程时&#xff0c;使用匿名内部类实现 Runnable 接口&#xff0c;直接在代码块中编写线程执行逻辑&am…...

MySQL数据库故障排查与解决方案

一、故障排查流程图 #mermaid-svg-hF8hhP2lrqWDbNhV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hF8hhP2lrqWDbNhV .error-icon{fill:#552222;}#mermaid-svg-hF8hhP2lrqWDbNhV .error-text{fill:#552222;stroke:…...

C#学习——继承、封装、多态

一、继承 1&#xff09;什么是继承&#xff1f; 官方话&#xff1a;允许一个类继承另一个类的字段和方法 个人理解&#xff1a;子类可以使用父类已经授权的所有字段和方法&#xff0c;子承父业 2&#xff09;使用方式 方式&#xff1a;子类&#xff1a;父类 class…...

数据库基础:概念、原理与实战示例

在当今信息时代&#xff0c;数据已经成为企业和个人的核心资产。无论是社交媒体、电子商务、金融交易&#xff0c;还是物联网设备&#xff0c;几乎所有的现代应用都依赖于高效的数据存储和管理。数据库&#xff08;Database&#xff09;作为数据管理的核心技术&#xff0c;帮助…...

AI与计算机视觉(CV):目标检测与图像分割的最新进展

AI与计算机视觉&#xff08;CV&#xff09;&#xff1a;目标检测与图像分割的最新进展 系统化学习人工智能网站&#xff08;收藏&#xff09;&#xff1a;https://www.captainbed.cn/flu 文章目录 AI与计算机视觉&#xff08;CV&#xff09;&#xff1a;目标检测与图像分割的…...

嵌入式开发学习日志Day17

第十一章 结构体与共用体 一、结构体 1、结构体 一般形式 【struct 标识符】 结构体中的标识符一般首字母大写&#xff1b; 【.】结构体成员运算符&#xff1b; 优先级 1 级 结合方向&#xff1a;从左至右&#xff1b; 【->】:指向结构体成员运算符&#x…...

awesome-digital-human本地部署及配置:打造高情绪价值互动指南

在数字化交互的浪潮中&#xff0c;awesome-digital-human-live2d项目为我们打开了本地数字人互动的大门。结合 dify 聊天 api&#xff0c;并借鉴 coze 夸夸机器人的设计思路&#xff0c;能为用户带来充满情绪价值的交互体验。本文将详细介绍其本地部署步骤、dify 配置方法及情绪…...

ClickHouse多表join的性能优化:原理与源码详解

本文将从底层原理和源代码的角度详细解释 ClickHouse 多表 JOIN 的处理过程&#xff0c;尽量用通俗移动的语言&#xff0c;让初学者也能理解。本文会分步骤推导&#xff0c;涵盖 JOIN 的原理、实现方式、关键代码逻辑以及优化机制&#xff0c;同时确保逻辑清晰、内容全面。最后…...

国产Excel处理控件Spire.XLS系列教程:C# 将Excel文件转换为Markdown格式

Microsoft Excel 是一款强大的数据管理工具&#xff0c;广泛用于数据处理和分析。然而&#xff0c;其专有格式&#xff08;如 XLS 和 XLSX&#xff09;在不同平台之间共享时&#xff0c;常常面临兼容性问题。相比之下&#xff0c;Markdown 是一种轻量级的标记语言&#xff0c;因…...

C++线程库

1. 基本概念 1.1 线程&#xff08;Thread&#xff09; 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。一个进程可以并发多个线程&#xff0c;每条线程并行执行不同的任务。 1.2 并发与并行 并发&#xff08;Concurren…...

Missashe计网复习笔记(随时更新)

Missashe计算机网络复习笔记 前言&#xff1a;这篇笔记用于博主对计网这门课所学进行记录和总结&#xff0c;也包括一些个人的理解。正在更新当中…… 第一章 计算机网络体系结构 考纲内容 (一) 计算机网络概述 计算机网络的概念、组成与功能;计算机网络的分类; 计算机网络…...

解决osx-arm64平台上conda默认源没有提供 python=3.7 的官方编译版本的问题

CONDA_SUBDIRosx-64 conda create -n py37_env python3.7 是一个用于创建特定架构环境的命令&#xff0c;主要针对 macOS 系统。下面为你详细解析它的功能和作用&#xff1a; 命令功能解析 这个命令的主要功能是创建一个名为 py37_env 的 Conda 环境&#xff0c;并且指定该环…...

Cjson格式解析与接入AI大模型

JSON格式的解析与构造 基本概念 JSON是JavaScript Object Notation的简称&#xff0c;中文含义为“JavaScript 对象表示法”&#xff0c;它是一种数据交换的文本格式&#xff0c;而不是一种编程语言。 JSON 是一种轻量级的数据交换格式&#xff0c;采用完全独立于编程语言的…...

RocketMQ 深度解析:架构设计与最佳实践

在分布式系统架构日益复杂的今天&#xff0c;消息中间件作为系统间通信的桥梁&#xff0c;扮演着至关重要的角色。RocketMQ 作为阿里开源的高性能分布式消息中间件&#xff0c;凭借其卓越的性能、丰富的功能以及高可用性&#xff0c;在电商、金融、互联网等众多领域得到广泛应用…...

【Light】帕多瓦大学超表面技术:开启矢量光束相位偏振定制新时代

01 前言 近年来&#xff0c;完美涡旋光束&#xff08;Perfect Vortex Beams&#xff09;因其独特的环形强度分布和与拓扑电荷无关的特性&#xff0c;成为研究热点。然而&#xff0c;传统方法在生成此类光束时面临相位和偏振控制的挑战&#xff0c;通常需要复杂的光学系统或多重…...

2021-11-15 C++下一个生日天数

缘由c今日日期到生日天数-编程语言-CSDN问答 int isLeap(int year)//判断闰年 {//缘由https://ask.csdn.net/questions/7567048?spm1005.2025.3001.5141return ((!(year % 4) && year % 100) || !(year % 400)); } int daysInMonth(int year, int month)//返回月天数…...

基于nodejs + Koa +Nuxt3的订单系统项目实战

以下是一个基于 Node.js Koa Nuxt3 的订单系统项目实战指南&#xff0c;包含关键实现步骤和代码示例&#xff1a; 一、项目架构设计 project/ ├── backend/ # Koa 后端 │ ├── config/ # 配置文件 │ ├── controllers/ # 控制器 │ ├──…...

# YOLOv2:目标检测的升级之作

YOLOv2&#xff1a;目标检测的升级之作 在目标检测领域&#xff0c;YOLO&#xff08;You Only Look Once&#xff09;系列算法以其高效的速度和创新的检测方式受到了广泛关注。今天&#xff0c;我们就来深入探讨一下 YOLOv2&#xff0c;看看它是如何在继承 YOLOv1 的基础上进行…...

国债收益率、需求与抛售行为的逻辑解析

国债收益率、需求与抛售行为的逻辑解析 1. 国债收益率的定义 国债收益率是衡量国债投资回报的核心指标&#xff0c;分为两种常见计算方式&#xff1a; 当前收益率&#xff08;Current Yield&#xff09;&#xff1a;年利息收入 债券当前市场价格 例如&#xff1a;面值100元、…...

使用Python和TensorFlow实现图像分类的人工智能应用

最近研学过程中发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。下面开始对正文内容的…...

嵌入式培训之C语言学习完(十七)结构体、共用体、枚举、typedef关键字与位运算

目录 一、结构体&#xff08;struct关键字&#xff09; &#xff08;一&#xff09;声明一个结构体数据类型 &#xff08;二&#xff09;结构体的成员初始化与赋值 a、结构体变量赋值 b、结构体成员初始化 c、结构体的定义形式 &#xff08;三&#xff09;考点&#xff…...

cilium路由模式和aws-eni模式下的IPAM

来看Cilium路由的几种核心模式。 封装模式&#xff08;overlay&#xff09; 首先是最基础的封装模式。这是默认情况下&#xff0c;如果你没有特别配置&#xff0c;Cilium会自动运行的模式。它的最大特点就是对底层网络环境的要求非常低&#xff0c;可以说是开箱即用。具体怎么…...

深入理解 Java 代理模式:从基础到实战​

在软件开发的世界里&#xff0c;设计模式是程序员智慧的结晶&#xff0c;它们为解决常见问题提供了经过验证的最佳实践。代理模式作为一种常用的结构型设计模式&#xff0c;在 Java 开发中有着广泛的应用。本文将深入探讨 Java 代理模式&#xff0c;从基本概念、分类、实现原理…...

Python毕业设计219—基于python+Django+vue的房屋租赁系统(源代码+数据库+万字论文)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于pythonDjangovue的房屋租赁系统(源代码数据库万字论文)219 一、系统介绍 本项目前后端分离&#xff0c;分为租客、房东、管理员三种角色 1、租客&#xff1a; 注册、登录、公…...

Spring Boot 框架概述

1. 简介 Spring Boot 是由 Pivotal 团队开发的一个用于简化 Spring 应用开发的框架。它通过提供默认配置、嵌入式服务器和自动配置等特性&#xff0c;让开发者能够更快速地构建独立的、生产级别的 Spring 应用。 Spring Boot 的主要特点包括&#xff1a; 快速创建独立的 Spri…...

MySQL 8.0(主从复制)

MySQL 8.0 的 主从复制&#xff08;Master-Slave Replication&#xff09; 是一种数据库高可用和数据备份的核心技术&#xff0c;下面用 一、什么是主从复制&#xff1f; 就像公司的「领导-秘书」分工&#xff1a; 主库&#xff08;Master&#xff09;&#xff1a;负责处理所…...

探索大型语言模型的 LLM 安全风险和 OWASP 十大漏洞

大型语言模型 (LLM) 引领着技术进步,推动着包括医疗保健在内的各个领域的自动化进程。在 Halodoc,我们通过 AI 驱动技术的运用直接见证了这一变化。然而,强大的功能伴随着同样重大的责任——保障这些系统的安全对于保护敏感信息和维护信任至关重要。本博客探讨了与 LLM 相关…...

算法与数据结构 - 二叉树结构入门

目录 1. 普通二叉树结构 1.1. 常见术语 1.2. 完全二叉树 (Complete Binary Tree) 1.3. 满二叉树 (Full Binary Tree) 2. 特殊二叉树结构 2.1. 二叉搜索树 (BST) 2.1.1. BST 基本操作 - 查找 2.1.2. BST 基本操作 - 插入 2.1.3. BST 基本操作 - 删除 2.2. 平衡二叉树…...

基于AQS实现Reentrantlcok

好久没有更新了 这次来补充上一次AQS还没有实现的可重入锁部分&#xff01; 我们知道ReentrantLock是可重入的锁&#xff0c;主要的核心是state&#xff0c;他是一个原子性的整数&#xff0c;我们只需要将获取锁的代码boolean由false到true变成0->1即可完成。在完成删除逻辑…...