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

前端中常用的单位度量(px,rpx,rem,em,vw,vh)+图片自适应

文章目录

    • 前端中常用的单位度量
    • vw/vh 的场景应用
    • px/rem/em 之间的转换关系
    • 项目中的rem 应用
    • 根元素 font-size 设置为16px 的应用惯例
    • 自适应之图片应用
      • 1. 使用 `max-width` 和 `max-height`
      • 2. 使用 `object-fit` 属性
      • 3. 使用 `background-image` 模拟图片展示

前端中常用的单位度量

  1. px(像素)
    • 定义:px是pixel的缩写,它是一个绝对单位,是屏幕上能显示的最小物理单位。例如,在显示器上,一个像素点就是一个px。
    • 应用场景
      • 当需要精确控制元素的尺寸,特别是在一些对布局精度要求较高的设计场景中,如图标设计、小型组件(按钮等)的尺寸定义等。例如,设计一个直径为30px的圆形图标,这种情况下px可以很好地满足精确尺寸的要求。
      • 在一些固定布局的网页或者应用中,比如简单的宣传页面,其中的文字大小、图片尺寸等如果不需要根据设备屏幕大小自适应,使用px来定义是比较方便的。
  2. rpx(响应式像素)
    • 定义:rpx是微信小程序特有的单位,它可以根据屏幕宽度进行自适应调整。规定屏幕宽度为750rpx,这样在不同尺寸的手机屏幕上,rpx会自动换算成对应的像素值。例如,在iPhone 6中,屏幕宽度为375px,此时1rpx = 0.5px;在iPhone 6 Plus中,屏幕宽度为414px,1rpx的实际像素值会相应变化。
    • 应用场景
      • 主要应用于微信小程序开发。在开发小程序界面时,使用rpx可以让界面在不同型号的手机上保持相对一致的布局效果。比如,设计一个小程序的列表项高度为80rpx,那么不管是在小屏幕手机还是大屏幕手机上,列表项的高度都会根据屏幕宽度自动适配,不会出现布局错乱的情况。
  3. rem(根元素字体大小相对单位)
    • 定义:rem是相对于根元素(html)字体大小来计算的单位。例如,如果根元素(html)的字体大小设置为16px,那么1rem = 16px;如果将根元素字体大小设置为20px,1rem就等于20px。
    • 应用场景
      • 常用于网页的响应式布局。通过设置根元素字体大小,并根据rem来定义其他元素的尺寸,可以很方便地实现整个页面的字号和元素大小的整体缩放。例如,在一个网页中,将根元素字体大小设置为10px,然后将标题的字体大小定义为2rem,那么标题的实际字体大小就是20px。当需要调整页面整体字号时,只需要改变根元素的字体大小,所有使用rem定义的元素尺寸都会相应改变。
      • 对于一些需要根据用户设置(如浏览器字体大小设置)来灵活调整布局的网页,rem也是一个很好的选择。
  4. em(相对单位)
    • 定义:em是相对于父元素字体大小来计算的单位。如果一个元素的父元素字体大小为16px,那么对于这个元素来说,1em = 16px。它会继承父元素的字体大小属性。
    • 应用场景
      • 在文本排版中,当需要根据上下文的字体大小来设置相对比例的字号时可以使用em。例如,在一个段落中,正文的字体大小为16px(1em),想要设置其中引用部分的字体大小为正文的0.8倍,就可以将引用部分的字体大小设置为0.8em。
      • 对于一些具有嵌套结构的文本内容,em可以方便地实现字号的逐级缩放,使得文本层次更加分明。不过,由于它是相对于父元素的,在复杂的布局中可能会因为多层嵌套而导致计算复杂,需要谨慎使用。
  5. vw(视口宽度百分比单位)
    • 定义:vw是viewport width的缩写,表示视口宽度的百分比。1vw等于视口宽度的1%。例如,在一个宽度为1000px的视口中,1vw = 10px。
    • 应用场景
      • 用于创建完全自适应视口宽度的布局。比如,在设计一个全屏的网页轮播图时,可以将轮播图的宽度设置为100vw,这样不管视口宽度如何变化,轮播图都能铺满整个屏幕宽度。
      • 对于一些需要根据屏幕宽度按比例分配空间的模块布局,vw是一个很好的选择。例如,将一个网页的侧边栏宽度设置为30vw,主内容区域宽度设置为70vw,这样在不同屏幕宽度下,两边的区域都能按照比例自适应。
  6. vh(视口高度百分比单位)
    • 定义:vh是viewport height的缩写,表示视口高度的百分比。1vh等于视口高度的1%。例如,在一个高度为600px的视口中,1vh = 6px。
    • 应用场景
      • 与vw类似,主要用于自适应视口高度的布局。例如,在设计一个高度自适应的单页应用(SPA)的页面时,可以将页面的各个部分(如导航栏、内容区、页脚等)的高度用vh来定义,使得页面在不同设备的屏幕高度下都能有良好的布局效果。
      • 在一些需要垂直方向自适应的场景,如垂直滚动的长页面中的某些固定高度比例的模块,使用vh可以方便地实现自适应。比如,设置一个视频播放区域的高度为50vh,这样它会始终占据屏幕高度的一半,为用户提供一致的视觉体验。

vw/vh 的场景应用

  1. 网页布局设计
    • 全屏模块布局
      • 在创建全屏的网页页面时,vw和vh单位非常有用。例如,设计一个单页网站,首页通常希望背景图或者背景色能够铺满整个屏幕。此时,可以将body或相关的容器元素的高度设置为100vh,宽度设置为100vw,这样就能确保无论用户使用何种设备访问,页面都能完全覆盖屏幕,提供沉浸式的视觉体验。
    • 分屏布局
      • 当需要将页面划分为不同比例的部分时,vw和vh可以很好地实现这个目标。比如,要创建一个具有固定比例侧边栏和内容区域的网页布局。可以将侧边栏的宽度设置为30vw,内容区域的宽度设置为70vw。在垂直方向上,如果希望有一个固定高度的头部(如导航栏)和一个自适应剩余高度的内容区,可以将导航栏的高度设置为20vh,内容区的高度设置为80vh。这种布局方式能够在不同屏幕尺寸的设备上(如桌面显示器、笔记本电脑、平板电脑和手机)保持各部分的比例相对稳定。
  2. 响应式图片和视频展示
    • 图片展示
      • 在展示大型图片(如产品图片、画廊图片等)时,为了让图片在不同设备上都能有较好的展示效果,可以使用vw和vh单位来控制图片的尺寸。例如,将图片的最大宽度设置为100vw,这样图片就不会超出屏幕宽度,避免用户需要水平滚动来查看完整的图片。如果希望图片在高度上也能自适应,可以将其高度设置为与宽度成一定比例,例如,设置高度为70vw(假设希望图片的宽高比为10:7),这样图片就能根据屏幕宽度自动调整大小,并且保持合适的比例。
    • 视频播放
      • 对于视频播放区域,同样可以使用vw和vh来实现自适应。比如,在一个在线课程网站或者视频分享平台上,将视频播放器的宽度设置为90vw,高度设置为50vh,这样视频播放器能够在不同设备上占据合适的屏幕空间,提供良好的观看体验。而且,当用户旋转设备时,视频播放器的尺寸也能根据新的视口尺寸自动调整。
  3. 移动应用和小程序布局(部分情况)
    • 在一些基于WebView的移动应用或者小程序开发中,如果希望界面能够更好地适配设备屏幕,vw和vh单位也可以发挥作用。例如,在一个混合式移动应用的某个页面中,要设计一个信息展示卡片,卡片的宽度可以设置为80vw,高度根据内容和设计需求(如设置为40vh)来确定,这样卡片在不同尺寸的手机屏幕上都能有合适的大小,并且布局相对稳定。不过需要注意的是,在移动原生应用开发中,可能会有更适合的布局方式和单位,但在某些特定场景下结合vw和vh可以提供额外的布局灵活性。
  4. 数据可视化和图表展示
    • 在数据可视化领域,例如制作柱状图、折线图、饼图等图表时,vw和vh单位有助于图表在不同设备上的适配。如果希望图表能够自适应屏幕大小,可以将图表的容器(如div元素)的宽度设置为90vw,高度设置为70vh。这样,无论是在大屏幕的监控显示器还是小屏幕的移动设备上,图表都能根据视口大小自动调整尺寸,保证数据能够清晰地展示,同时也不会因为尺寸问题而导致布局混乱。

px/rem/em 之间的转换关系

  1. px与rem的转换关系
    • 基本原理:rem是相对于根元素(html)字体大小来计算的单位。假设根元素(html)的字体大小设置为 F F Fpx,那么 1 1 1rem = F F Fpx。例如,如果根元素字体大小是 16 16 16px,那么 1 1 1rem就等于 16 16 16px。
    • 转换公式:若要将px转换为rem,公式为 r e m = p x 根元素字体大小( p x ) rem = \frac{px}{根元素字体大小(px)} rem=根元素字体大小(pxpx。例如,一个元素的宽度是 32 32 32px,根元素字体大小为 16 16 16px,那么这个元素的宽度用rem表示就是 32 ÷ 16 = 2 32\div16 = 2 32÷16=2rem。反之,若要将rem转换为px,公式为 p x = r e m × 根元素字体大小( p x ) px = rem\times根元素字体大小(px) px=rem×根元素字体大小(px
  2. px与em的转换关系
    • 基本原理:em是相对于父元素字体大小来计算的单位。设父元素字体大小为 P P Ppx,那么对于该父元素下的子元素, 1 1 1em = P P Ppx。例如,父元素字体大小为 12 12 12px,那么子元素的 1 1 1em就是 12 12 12px。
    • 转换公式:若要将px转换为em,公式为 e m = p x 父元素字体大小( p x ) em=\frac{px}{父元素字体大小(px)} em=父元素字体大小(pxpx。例如,一个元素的字体大小是 18 18 18px,其父元素字体大小为 12 12 12px,那么这个元素的字体大小用em表示就是 18 ÷ 12 = 1.5 18\div12 = 1.5 18÷12=1.5em。反过来,若要将em转换为px,公式为 p x = e m × 父元素字体大小( p x ) px = em\times父元素字体大小(px) px=em×父元素字体大小(px
  3. em与rem的转换关系(复杂情况)
    • 没有嵌套关系的简单情况:如果元素没有嵌套,或者所有元素的父元素字体大小都和根元素字体大小相同,那么em和rem可以简单地进行转换。例如,根元素(html)字体大小为 16 16 16px,此时 1 1 1rem = 1 1 1em。
    • 嵌套情况下:假设根元素字体大小为 F F Fpx,某元素的父元素字体大小为 P P Ppx。该元素用em表示的尺寸为 E E Eem,转换为rem的公式为 r e m = E × P F rem=\frac{E\times P}{F} rem=FE×P。例如,根元素字体大小为 16 16 16px,一个元素的父元素字体大小为 12 12 12px,这个元素的字体大小为 1.5 1.5 1.5em,转换为rem就是 1.5 × 12 16 = 1.125 \frac{1.5\times12}{16}=1.125 161.5×12=1.125rem。

项目中的rem 应用

  1. 网页字体大小设置
    • 整体字号控制
      • 在网页开发中,通过将根元素(html)的字体大小设置为一个相对合理的值(如10px16px),然后使用rem单位来定义其他元素的字体大小。例如,对于网页中的标题元素h1,可以将其字体大小设置为2rem,如果根元素字体大小为16px,那么h1的字体大小就是32px。这样,当需要调整整个网页的字体大小时,只需改变根元素的字体大小,所有基于rem定义的字体大小都会相应地改变,实现了网页字体大小的整体缩放,方便用户根据自己的喜好或者设备的显示情况(如视力不好的用户可能希望增大字体)进行调整。
    • 不同级别标题字号设置
      • 可以根据文档结构和设计需求,使用rem为不同级别的标题设置字号。例如,h1设置为2remh2设置为1.6remh3设置为1.3rem等,形成一个层次分明的标题字号体系。这样,在不同的页面或者模块中,标题的字号比例关系保持一致,有助于提高网页内容的可读性和视觉层次。
  2. 网页布局尺寸定义
    • 容器尺寸设定
      • 对于网页中的各种容器元素,如divsection等,使用rem来定义它们的宽度和高度是实现响应式布局的一种有效方式。例如,设计一个内容区域,将其宽度设置为60rem,如果根元素字体大小为10px,那么这个内容区域的宽度就是600px。当根元素字体大小改变时,内容区域的宽度也会随之改变,从而适应不同屏幕尺寸和用户偏好。
    • 组件尺寸调整
      • 在网页组件(如按钮、输入框等)的开发中,rem单位可以确保组件在不同的页面环境下保持合适的大小。例如,设计一个按钮,其宽度为1.5rem,高度为0.8rem,按钮内文字大小为0.6rem。这样,按钮的尺寸和文字大小会根据根元素字体大小进行自适应调整,无论是在大屏幕还是小屏幕设备上,按钮的比例和可读性都能得到较好的保证。
  3. 响应式网页适配不同设备
    • 适配多种屏幕分辨率
      • 随着移动设备的多样化,屏幕分辨率也各不相同。使用rem单位可以方便地让网页在不同分辨率的设备上进行适配。例如,在桌面浏览器上,根元素字体大小可能设置为16px,而在移动设备上,通过媒体查询(@media)可以将根元素字体大小调整为10px。这样,基于rem定义的所有元素尺寸都会相应地在移动设备上变小,实现了网页从桌面到移动设备的自适应转换,避免了在小屏幕设备上出现布局混乱或者元素过大的问题。
    • 适配不同的设备方向
      • 当用户旋转设备(如从竖屏变为横屏)时,网页布局也需要相应地调整。通过rem单位和适当的媒体查询,可以根据设备的方向改变根元素的字体大小,进而调整网页中所有元素的尺寸。例如,在竖屏时根元素字体大小为10px,当设备旋转为横屏时,可以将根元素字体大小增加到12px,使得网页中的元素在横屏模式下能够更好地利用屏幕空间,同时保持布局的合理性。

根元素 font-size 设置为16px 的应用惯例

  1. 浏览器默认设置的影响
    • 大多数浏览器的默认font - size值是16px。这是一种行业惯例,用户在浏览网页时已经习惯了这种默认的文字大小。如果将根元素font - size定义为16px,在没有特别设置其他元素字体大小的情况下,网页的文本呈现会比较符合用户的预期,不需要用户进行额外的缩放操作来正常阅读内容。
  2. 计算方便性
    • 16px是一个相对容易计算的数值。在进行rem单位和px单位之间的转换时,如果根元素font - size16px,那么1rem = 16px。例如,将一个元素的字体大小设置为2rem,很容易计算出它的实际字体大小是32px 2 × 16 = 32 2\times16 = 32 2×16=32)。这种简单的倍数关系方便了开发者在设计网页布局和字体大小时进行快速的换算和调整。
  3. 响应式设计的灵活性
    • 在响应式网页设计中,以16px作为根元素font - size的起始值,能够方便地通过媒体查询(@media)来调整字体大小。例如,当屏幕尺寸变小(如从桌面端切换到移动端)时,可以通过媒体查询将根元素font - size按比例减小,如设置为12px10px。基于rem单位的其他元素尺寸和字体大小也会相应地按比例缩小,从而实现了网页在不同设备上的自适应布局,同时保持了相对合理的文字显示效果。
  4. 与其他单位的兼容性
    • 在和其他单位(如em)结合使用时,如果根元素font - size16px,可以更好地协调不同单位之间的关系。因为em是相对于父元素字体大小的单位,而在没有特别设置父元素字体大小的情况下,很多元素会继承根元素的字体大小特性。这样,在使用rem和em进行布局和字体大小设置时,可以更容易地理解和控制它们之间的相互作用,减少因为单位换算混乱而导致的布局问题。

自适应之图片应用

要实现图片自适应展示、保证图片显示不变形、等比缩放且居中展示,可以使用CSS来实现。以下是几种常见的方法:

1. 使用 max-widthmax-height

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>img {max - width: 100%;max - height: 100%;display: block;margin: 0 auto;}</style>
</head><body><img src="your-image-url.jpg" alt="示例图片">
</body></html>
  • 原理max - width: 100% 确保图片宽度不会超过其父容器的宽度,max - height: 100% 确保图片高度不会超过其父容器的高度。display: block 将图片转换为块级元素,margin: 0 auto 使图片在水平方向上居中显示。

2. 使用 object-fit 属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>.img-container {width: 100%;height: 400px;/* 设置一个固定高度,也可以根据需求调整 */display: flex;justify-content: center;align-items: center;}img {width: 100%;height: 100%;object-fit: contain;}</style>
</head><body><div class="img-container"><img src="your-image-url.jpg" alt="示例图片"></div>
</body></html>
  • 原理object-fit: contain 会保持图片的纵横比,并将图片缩放到在指定的容器内尽可能大,同时保证图片的完整显示。通过设置父容器(.img-container)的 display: flexjustify-content: centeralign-items: center,实现图片在父容器内水平和垂直居中。

3. 使用 background-image 模拟图片展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>.img - container {width: 100%;height: 400px;background - image: url('your-image-url.jpg');background - size: contain;background - position: center;background - repeat: no - repeat;}</style>
</head><body><div class="img-container"></div>
</body></html>
  • 原理background-size: contain 使背景图片在保持纵横比的情况下尽可能大,同时完全适应容器。background-position: center 将背景图片在容器内居中显示,background-repeat: no-repeat 确保图片不会重复显示。这种方法适用于不需要对图片添加HTML元素交互(如点击链接等)的场景。

相关文章:

前端中常用的单位度量(px,rpx,rem,em,vw,vh)+图片自适应

文章目录 前端中常用的单位度量vw/vh 的场景应用px/rem/em 之间的转换关系项目中的rem 应用根元素 font-size 设置为16px 的应用惯例自适应之图片应用1. 使用 max-width 和 max-height2. 使用 object-fit 属性3. 使用 background-image 模拟图片展示 前端中常用的单位度量 px&…...

STM32之一种双通路CAN总线消息备份冗余处理方法(十三)

STM32F407 系列文章 - Dual-CANBus-ProMethod&#xff08;十三&#xff09; 目录 前言 一、现状分析 二、解决思路 1.应用场景网络结构图 2.数据发送流程 3.数据接收流程 4.用到的模块 1.CAN网络速率及时间片分配 2.CAN网络消息ID组成 3.设备节点定义 4.数据格式说明…...

从零开始:使用VSCode搭建Python数据科学开发环境

引言 在数据科学领域&#xff0c;一个高效、稳定的开发环境是成功的关键。本文将详细介绍如何使用Visual Studio Code搭建一个完整的Python数据科学开发环境。通过本指南&#xff0c;您将学会&#xff1a; 安装和配置VSCode&#xff0c;包括基本设置和快捷键配置设置Python开…...

C#语言的字符串处理

C#语言的字符串处理 引言 在现代编程中&#xff0c;字符串处理是一项重要的技能&#xff0c;几乎在所有编程语言中都有应用。C#语言作为一种强类型的、面向对象的编程语言&#xff0c;提供了丰富的字符串处理功能。这使得开发人员能够方便地进行文本操作&#xff0c;比如字符…...

《安富莱嵌入式周报》第348期:开源低功耗测试仪,开源创意万用表,续航100-300小时,开源PCB电机,自制shell和网络协议栈,开源水培自动化系统

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版&#xff1a; https://www.bilibili.com/video/BV1Tzr9Y3EQ7/ 《安富莱嵌入式周报》第348期&#xff1a;开源低功…...

npm发布流程说明

一、进入要发布的项目根目录&#xff0c;初始化为npm包 npm initname&#xff1a;最重要的字段之一&#xff0c;项目名称&#xff08;少于214个字节&#xff09;。没有name和version不能进行安装&#xff1b; version&#xff1a;最重要的字段之一&#xff0c;项目版本。没有n…...

缓存-文章目录

关于缓存系列文章&#xff1a; 缓存学习总结1&#xff08;缓存分类&#xff09; 缓存学习总结2&#xff08;服务器本地缓存&#xff09; 缓存学习总结3&#xff08;服务器内存缓存&#xff09;推荐使用 缓存学习总结4&#xff08;分布式缓存&#xff09; 关于redis系列文章…...

LeetCode 3297.统计重新排列后包含另一个字符串的子字符串数目 I:滑动窗口

【LetMeFly】3297.统计重新排列后包含另一个字符串的子字符串数目 I&#xff1a;滑动窗口 力扣题目链接&#xff1a;https://leetcode.cn/problems/count-substrings-that-can-be-rearranged-to-contain-a-string-i/ 给你两个字符串 word1 和 word2 。 如果一个字符串 x 重新…...

如何在 Ubuntu 24.04 上安装 Memcached 服务器教程

简介 Memcached 是一个高性能、分布式的内存缓存系统&#xff0c;旨在通过减少数据库负载来加速动态 Web 应用程序。它通过将数据和对象缓存在 RAM 中来实现这一点&#xff0c;从而最大限度地减少了从数据库或其他慢速存储层重复获取数据的需要。 本教程的目标是手把手教你如…...

《深度学习模型在鸿蒙分布式框架下的跨设备高效之旅》

在人工智能领域&#xff0c;深度学习模型的训练与推理通常需要强大的计算资源和大量的数据支持。而鸿蒙系统的分布式框架为解决这一问题提供了新的思路和方法&#xff0c;使得深度学习模型能够在多个设备之间实现高效的训练与推理。 鸿蒙分布式框架概述 鸿蒙系统是一款面向万…...

[python3]Excel解析库-xlutils

xlutils 是一组用于处理 Excel 文件的 Python 库&#xff0c;它实际上是 xlrd 和 xlwt 的扩展&#xff0c;提供了额外的功能来操作 Excel 文件。xlutils 主要由三个部分组成&#xff1a;xlutils.copy、xlutils.filter 和 xlutils.view&#xff0c;它们分别用于复制和修改现有 E…...

Springboot Bean创建流程、三种Bean注入方式(构造器注入、字段注入、setter注入)、循坏依赖问题

文章目录 1 Bean 创建流程1.1 Bean的扫描注册1.2 创建Bean的顺序 2 三种Bean注入方式2.1 构造器注入 | Constructor Injection&#xff08;推荐&#xff09;2.2 字段注入 | Field Injection&#xff08;常用&#xff09;2.3 方法注入 | Setter Injection2.4 三种方式注入顺序 3…...

mybatisX插件的使用,以及打包成配置

装mybatisX插件&#xff1b; idea连接数据库&#xff1b; 点击mybatisx-generator&#xff0c;设置自己装mybatisX插件&#xff1b; idea连接数据库&#xff1b; 点击mybatisx-generator&#xff0c;设置自己要的包和类&#xff1b; 如果要把自己的配置设置成一个自定义模板&a…...

【初阶数据结构】线性表之单链表

文章目录 前言 一、单链表的概念与结构 1.概念 2.结点 3.性质 二、实现单链表 1.结构的定义 2.链表的打印和结点的申请 3.单链表的尾插和头插 4.单链表的尾删和头删 5.单链表的查找 6.指定位置之前插入数据和指定位置之后插入数据 7.删除pos结点和删除pos之后的结…...

CentOS7通过yum安装JDK

CentOS7通过yum安装JDK 1、卸载自带的JDK 查看已安装的JDK rpm -qa | grep java删除已安装的JDK yum -y remove java-1.8.0-openjdk*验证是否删除成功 查不到版本信息则已删除成功 java -version2、安装JDK sudo yum install java-1.8.0-openjdk java-1.8.0-openjdk-deve…...

c# 常见的几种取整场景

软件取整&#xff0c;通常指的是在计算机软件中对数值进行取整操作&#xff0c;即将一个浮点数或小数转换为整数&#xff0c;同时确定如何处理小数部分。取整操作在编程和数学计算中非常常见&#xff0c;不同的取整方法适用于不同的场景。 常见的取整方法 向零取整&#xff08…...

数据库回滚:大祸临头时

原文地址 什么是数据库回滚&#xff1f; 数据库技术中&#xff0c;回滚是通过撤销对数据库所做的一项或多项更改&#xff0c;将数据库返回到先前状态的操作。它是维护数据完整性和从错误中恢复的重要机制。 什么时候需要数据库回滚&#xff1f; 数据库回滚在以下几个场景中很…...

【GoLang】两个字符串如何比较大小?以及字典顺序的比较规则

在 Go 语言中&#xff0c;字符串的比较是基于字典顺序进行的。 字典顺序的比较规则&#xff1a; 比较两个字符串从左到右逐个字符的Unicode码点值&#xff0c; 若比较结果不相等则将此结果作为字符串大小的结果&#xff0c; 若比较结果相等则比较下一位&#xff0c; 若其中一个…...

5G学习笔记之SNPN系列之UE入网和远程配置

参考&#xff1a;3GPP 23.501 5.30.2.10 Onboarding of UEs for SNPNs 小小协议搬运工 目录 0. NPN系列 1. 概述 2. SNPN作为ONN 2.1 DCS参与的入网主鉴权 2.2 DCS不参与的入网主鉴权 2.3 UE入网 3. PLMN作为ONN 4. 远程配置 0. NPN系列 1. NPN概述 2. NPN R18 3. 【SNPN系列】…...

C#版OpenCv常用函数大全

OpenCvSharp 是 OpenCV 的NET封装&#xff0c;提供了丰富的图像处理和计算机视觉功能。以下是一些常用函数及其详细说明。 1. 图像读取与显示 Cv2.ImRead 功能&#xff1a;读取图像文件并返回一个 Mat 对象。用法&#xff1a;Mat image Cv2.ImRead("path/to/image.jpg&…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...