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

移动端开发

一、一些概念

(一)、屏幕相关

1、屏幕大小

指屏幕的对角线长度,单位是英寸(inch)。常用尺寸有:3.5寸、4.7寸、5.0寸、5.5寸、6.0寸等

备注:1英寸(inch)=2.54厘米(cm)

2、屏幕分辨率

     指屏幕在:横向、纵向上所拥有的物理像素点总数,一般表示用n * m表示

     例如:iPhone6的屏幕分辨率为750 * 1334

 注意:

3、屏幕密度(ppi)

又称屏幕像素密度,是指屏幕上每英寸里包含的物理像素点个数,单位是:ppi(pixels per inch)

ppi值才是真正衡量一块屏幕是否清晰的核心指标

PPI的计算方法是:PPI=开平方(X*X+Y*Y)/Z

(其中X,Y指长,宽像素数,Z指屏幕大小)。

例如iphone4s分辨率为640*960,屏幕大小为3.5英寸,它的PPI=开平方(960*960+640*640)/3.5=329.650

(二)、像素相关

1、物理像素

又称:设备像素,物理像素是一个长度单位,单位是px,1个物理像素就是屏幕上的一个物理成像点,就是屏幕中一个微小的发光物理元器件(可简单理解为超级微小的灯泡),是屏幕能显示的最小颗粒,它由屏幕制造商决定,屏幕生产后无法修改。

2、css像素

又称:逻辑像素,css像素是一个抽象的长度单位,单位也是px,它是为web开发者创造的,用来精确的度量web页面上的内容的大小,我们在编写css,js,less中所用的都是css像素(可以理解为:‘程序员像素’)

思考:代码中的css像素跟物理像素的比?

他们两个在2010年之前是一样,之后就不一样

3、设备独立像素

设备独立像素简称DIP或DP,又称屏幕密度无关像素

引言:在没有出现高清屏的年代,1个css像素对应1个物理像素,但自从高清屏问世,二者就不再是1对1的关系了

苹果公司,在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下,把更多的物理像素点压缩至一块屏幕里,这样分辨率会更高,显示效果会更加细腻,苹果将这种屏幕成为:Retina屏幕(视网膜屏幕),与此同时推出配备这种屏幕的划时代产品-iPhone4

设备独立像素的出现,使得即使在【高清屏】下,例如苹果的retina屏,也可以让元素有正常的尺寸,让代码不受到设备的影响,它是设备厂商根据屏幕特性设置的,无法更改

设备独立像素于物理像素关系

   普通屏幕下1个设备独立像素对应1个物理像素

   高清屏幕下1个设备独立像素对应N个物理像素

设备独立像素与css像素关系

   在无法缩放的情况下(标准情况下):1css像素=1设备独立像素,即:dpr=物理像素/设备独立像素

4、像素比

像素比(dpr):单一方向设备【物理像素】和【设备独立像素】的比例

5、像素之间的关系

在不考虑缩放的情况下(理想状态下):

普通屏(dpr=1):1css像素=1设备独立像素=1物理像素    2010之前

高清屏(dpr=2):1css像素=1设备独立像素=2物理像素

高清屏(dpr=3):1css像素=1设备独立像素=3物理像素

程序员写了一个width为100px的盒子,那么:

  代表100个css像素;

 若用户不进行缩放,则对应100个设备独立像素;

   在dpr为2的设备上,这100个css像素占据了100*2=200个物理像素(横向)

例如:iPhone6为例

物理像素:750px,

设备独立像素375px,

css像素:375px

(三)、图片高清显示

1、位图像素

位图和矢量图

  • n个像素点组成的。放大后会失真。(常见又:png,jpeg,jpg、gif)
  • PS等软件进行编辑
  • 位图像素可以理解为位图中的一个‘小格子’,是位图的最小单元

        举例:给你买鞋,一直给你买36码  

举例:你的脚多大,给你买多大的鞋  是根据数字关系现场绘图的

(四)、视口概念

视口(viewport)就是浏览器显示页面内容的屏幕区域

PC端视口:

在pc端,视口的默认宽度和浏览器窗口的宽度一致,在css标准文档中,pc端视口也被称为:初始包含块。

移动端视口

移动端视口可以分为布局视口、视觉视口、理想视口(完美视口)标准

1、布局视口

默认的布局视口容器是980px,对pc页面进行压缩,压到跟手机一样大小,就可以看了,只是元素看上去很小,只能手动去缩放,体验效果不好

2、视觉视口

视觉视口就是用户可见的区域,它的绝对宽度永远和设备屏幕一样宽,但这个宽度里包含的css像素值是变化的

例如:一般手机将980个css像素放入视觉视口中。

注意:布局视口经过压缩后,横向的宽度用css像素表达,就不再是375px,而是980px

描述一下iPhone6屏幕

  1. 1、物理像素:750px
  2. 2、设备独立像素:375px
  3. 3、css像素:980px

3、理想视口

与屏幕(设备独立像素)等宽的布局视口,称之为理想视口;让布局视口宽度与屏幕等宽(设备独立像素),靠meta标签实现

用户不需要缩放、滚动就能看到网站的全部内容

要为移动端设备单独设计一个移动端网站

开启理想视口的方法

<meta name='viewport' content='width=device-width' />

(五)、meta标签设置

 

   <!-- 设置完美视口大小  device-width   视口宽度和设备保持一致initial-scale  表示页面的初始缩放值,==>屏幕宽度(设备独立像素)/布局视口宽度user-scalable  是否允许用户缩放maxinum-scale=1.0, 最大允许缩放比例mininum-scale=1.0, 最小允许缩放比例--><meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=nomaxinum-scale=1.0,mininum-scale=1.0 " />

    

(六)、多倍图的概念

咱们已经知道,在移动端里,1个css像素=1个设备独立像素=多个物理像素,那么对于开发来说,有什么影响呢?

问题:图片也是有分辨率的概念的,分辨率指的是物理像素还是css像素呢?

图片的分辨率:指的是图片在水平垂直方向需要显示多少个物理像素(发光小点)

如:图片的分辨率是200*200

表示图片显示在屏幕中需要用到200*200的物理像素(发光小点)

提问:以200*200分辨率的图片显示为例

如果图片需要显示完全,需要 多少*多少 的发光点

之前在pc端中,需要写 多少*多少 px?

  200css像素*200css像素,也就是在pc端1个css像素=1个物理像素

现在移动端,如果:iphone6,需要写 多少*多少 px?

200*200个物理像素

100*100个设备独立像素

100*100个css像素

例子:需求:在移动端iphone6中显示100*100px的盒子,里面装对应的图片

iphone6物理像素宽时750px,设备独立像素时375px,

1个设备独立像素=1个css像素=2个物理像素

 50*50设备独立像素=  50*50css像素    =100*100物理像素

100*100设备独立像素=100*100css像素=200*200物理像素

一倍图:

使用的是100*100 物理像素的图片

100*100分辨率图片==》对应屏幕中100*100的发光点(物理像素)==》对应css中50*50px

此时强行设置100*100px css像素,很明显对比起来就较为模糊

二倍图

使用200*200的图片

200*200分辨率的图片==》对应屏幕200*200的发光点(物理像素)==》css中100*100px

此时设置为100*100px,正好完美对应显示

结论

在现在移动端中,例如:在iphone6中,需要显示多少px的图片,为了不被强行放大, 需要使用宽高为2被分辨率的图片,显示更好的效果。

而这种使用的宽高为2倍分辨率大小的图片,称之为2倍图

实际开发过程中还存在2倍图、3倍图、4倍图之类的,但是具体使用哪一种看公司具体的需要

命名特点:

xxxx@2x.png   二倍图

xxx@3x.png    三倍图

在实际开发中如果给的是1倍图,那就多大写多大;如果是2倍图,那就是图片的大小/2 ;3倍图,就是图片的大小/3······;

(七)、移动端运行在移动设备上的产品

           移动设备:手机 、平板 ipad

           我们以后做的产品大部分都只需要适配ios系统和安卓系统即可

        响应式:

           在不同的设备上都能给用户再好的体验,不同设备,显示不同效果

        响应式开发

           随着移动互联网的兴起,不同设备的分辨率相差比较大,如果在不同设备上显示同一个页面,则用户体验差。

           响应式页面设计是一种方法,使得一个网站能够兼容多个终端,而不用为每个终端制作特定的版本。

           它使一个网站在任何类型的屏幕上,都能被轻松浏览使用,采用响应式设计,在不同设备中,网站会重新排列

           展现出不同的设计风格,以完美的适配任何尺寸的屏幕

        响应式设计原则(面试题)

           渐近增强

               基本需求==>更好体验

            优雅降级

               完备功能==>向下兼容

           移动优先的响应式布局采用的是渐进增强原则

二、移动端开发选择

   由于移动端设备的屏幕尺寸大小不一,会出现:同一个元素,在两个不同的手机上显示效果不一样(比例不同)。要想让同一个元素在不同设备上,显示效果一样,就需要适配,无论采用何种适配方式,中心原则永远是等比

(一)、移动端主流适配方案

1、单独制作移动端页面(主流)

为了在特定的设备上显示最好的视觉效果,大多的移动端产品都有PC端,和移动端两套不一样的网站。

其技术实现通常为:服务器根据浏览器请求的user-agent判断设备类型,然后返回(或重定向)对应的站点内容。

例如:京东商城、淘宝网、苏宁易购等

rem   flexible.js

vw  vh

2、响应式页面兼容移动端(其次)

媒体查询

常见于PC、移动等多端共用一套代码的场景,比如bootstrap站点、三星手机官网,星巴克官网

通过判断屏幕宽度来改变样式,以适应不同终端

缺点:制作麻烦,需要花费很大的精力去调兼容性的问题

只适用一些内容简单,要求不高的官网

(二)、移动端开发几个注意点

1、去除默认样式,可以用normalize.css(默认样式不去除,处理各浏览器对默认样式的不同解析),resize.css(直接把所有的默认样式都去掉,要用,你就自己重设)   

2、盒子模型采用box-sizing的属性,border-box属性值

3、超链接点击高亮背景的效果需要去除

-webkit-tap-highlight-color:transparent;

三、移动端常见实现方式

(一)、移动端的技术选型

1、单独制作移动端页面

百分比,flex,rem,vw

1>  流式布局

就是百分比布局,也称为非固定像素布局

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充,主要是设置宽度

一般配合以下属性使用,免得盒子里面的元素,被挤下来

max-width 最大宽度(max-height最大高度)  

min-width 最小宽度(min-height 最小高度)

2>、flex弹性布局
3>、rem+媒体查询布局
(1)、rem单位

相对单位,相对于html根元素的字体大小,通过更改html文字的大小,改变页面的大小

(2)、媒体查询(meidia Query):

作用:

@media查询,可以针对不同的媒体类型定义不同的样式

可以针对不同的屏幕尺寸设置不同的样式

语法:

     @media 媒体类型  关键字  (媒体特性){css}

           媒体类型(可以同时用多个媒体类型,用逗号隔开,这样他们之间就是或的关系)

                all  所有设备

                print  打印设备或打印预览

                screen  带屏幕的设备(电脑,手机)**

                speech  屏幕阅读器  

            关键字  and  not  only  来连接

将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

and:可以将多个媒体特性连接到一起,相当于且的意思

not:排除某个媒体类型,相当于“非”的意思,可以省略

only:指定某个特定的媒体类型,可以省略

             媒体特性(必须要有小括号)

 width  页面可见宽度

                max-width  视口的最大宽度(视口小于指定宽度时就生效,小于等于xxxpx)

                min-width  视口的最小宽度(视口大于指定宽度时就生效)

                max-height  最大高度

                min-height   最小高度

                orientation:landscape  横屏

                orientation:portrait   竖屏

    常用的断点

样式切换的分界点,我们称其为断点,也就是网页的样式

尺寸范围

设备划分

 <768px

超小屏幕

max-width=768px

 >=768px~<992px

小屏幕

min-width=768px    max-width=992

        >=992px ~<1200px

中型屏幕  

min-width=992px     max-width=1200

>=1200px

大屏幕

min-width=1200px

   

<style>body {background-color: red;}/* 第一种方式  直接引入 *//* 在992px-768px之间设置的样式 */@media screen and (max-width: 992px) and (min-width: 768px) {body {background-color: orange;}}/* 可以简写,默认写了screen and */@media (max-width: 768px) {body {background-color: yellowgreen;}}</style><!-- 第二种方式:外接式,针对不同的界面效果,可以写不同的样式,分别引入,写的时候,最好从小到大来写语法:media="媒体类型 关键字 (媒体特性)--><link rel="stylesheet" href="./600.css"  media="screen and (max-width: 600px) " />
(3)、rem适配方案

按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小(媒体查询)

css中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值

        根字体=(手机横向设备独立像素值=设计稿css像素值)/10        

        设计稿元素设计数值转成rem: 设计值/(设计稿宽度/10)  

例如:iPhone6,根字体=375/10=37.5px         以rem为单位,即1rem=37.5px

如果设计稿是375px     写一个100px*100px的盒子,用rem来表示   100px/(375px/10)=2.667rem

设计稿是固定的,根据设计稿来开发页面,用rem这个相对单位去根据设计稿设计的大小开发好页面后,再根据不同的手机设备独立像素去更改根标签字体的大小,就可以实现响应式的变化

手机横向设备独立像素值,可以用flexible.js计算,用里面的js去做处理

css元素的设计值换算用css中的Cssrem: Root Font Size去实现    

           px to rem & rpx & vw (cssrem)

(4)、flexible.js

=css像素)划分为10等份,但不同设备下,比例还是一致的。

只要确定当前html文字大小就可以了.

github地址:https://github.com/amfe/lib-flexible

官方文档地址:https://github.com/amfe/article/issues/17

vscode中直接安装)

px to rem & rpx & vw (cssrem)

Cssrem: Root Font Size

基准font-size(单位:`px`), default: 16,调整成75

例如主流设计稿大小为750px,主要将html文字的大小设置为75px,里面页面元素rem值:页面元素的px值/75,从而算出rem值

4>、混合布局(主流)

综上所有,一起使用,选取一种主要技术选型,其他技术为辅助(推荐)

rem适配—移动端开发的步骤

第一步:拿到多大的设计稿,将root font size 改成  :设计稿的大小/10

第二步:引入flexable.js  ,会动态的去修改html的字体大小          

第三步:正常根据设计稿的大小去开发,将所有的px值换算为rem的值

5>、vw、vh(未来的趋势)

vw也是百分比,只不过这个百分比只参考设备视口

vw(Viewport‘s width):1vw等于视口宽度的1%

vh(Viewport’s height):1vh等于视口高度的1%

vmin:vw和vh中的较小值

vmax:选取vw和vh中的最大值

 

(1)、750的设计稿:html{ font-size:13.3333vw }

1vw表示1%的屏幕宽度,而我们的设计稿通常是750px的,屏幕一共是100vw,对应的就是750px, 1vw=7.5px        那么1px就是0.13333vw,

同时我们知道另一个单位rem,rem是相对于html元素字体大小,放了方便计算,我们自定义html字体大小为100px,

通过上面的计算结果我们知道1px是0.13333vw,那么100px就是13.333vw了。

这样后面的用rem就很好计算了。13.333vw对应的是100px,然后我们就可以很愉快的写rem单位了,由于自定义的1rem=100px,

书写代码时,就是(设计图元素大小/100),单位是rem

如果750的设计稿设计一个盒子大小是200px,里面有字体大小50px,那么对应的就是,盒子宽高2rem,字体大小是0.5rem

(2)、1080设计稿:html{ font-size:9.259vw }

如果设计稿时1080px,屏幕是100vw,那么对应的1px=0.09259vw,rem根标签依然自定义取100px,那么就是1rem=100px,那么1rem=9.259vw。

如果1080的设计稿设计一个盒子大小是200px,里面有字体大小50px,那么对应的就是,盒子宽高2rem,字体大小是0.5rem

总结:

虽然还是vw布局,但还是用rem去写

1、无关屏幕的大小,反正100vw,就是屏幕的100%,用屏幕的大小作为固定值去换算相对单位

2、自定义一个rem跟px之间的换算比值,为了好算一般是1rem=100px,计算出vw跟rem,px之间的关系

例如750的设计稿:1font-size=100px=1rem=13.3333vw

3、后面750设计稿上的所有尺寸都用rem来算。例如200px*200px的盒子,就是2rem*2rem的盒子,也就是26.666vw*26.666vw的盒子。

用vw去开发

1、看设计稿是多大,自定义1rem=100px, 然后1px=xxxvw,    将html{font-size:xxxvw}

2、去更改root font size   ,更改1rem=100px

3、根据设计稿的大小,将px值写成rem

总结:

都是一个绝对值为参考值

   flexable.js是以设备独立像素为绝对值,去算rem的值

   vw是设备的视口的宽度为绝对值,去算rem的值

最终都是把设计稿中的px换算成rem

2、响应式页面兼容移动端

百分比,flex,rem,媒体查询,

媒体查询

以上已讲述

bootstarp框架

https://www.bootcss.com/

相关文章:

移动端开发

一、一些概念 &#xff08;一&#xff09;、屏幕相关 1、屏幕大小 指屏幕的对角线长度&#xff0c;单位是英寸&#xff08;inch&#xff09;。常用尺寸有&#xff1a;3.5寸、4.7寸、5.0寸、5.5寸、6.0寸等 备注&#xff1a;1英寸&#xff08;inch&#xff09;2.54厘米&…...

光伏行业内卷到什么程度了?

现在每个行业都在内卷&#xff0c;光伏行业也一样在内卷中&#xff0c;但是光伏行业的内卷体现在多个方面&#xff0c;下面给举例。 一、产能竞争激烈&#xff1a; 产能扩张迅速&#xff1a;过去几年&#xff0c;大量资本涌入光伏行业&#xff0c;企业纷纷扩产。例如&#xf…...

C# 通俗易懂的介绍基础知识(七)——栈Stack(从日常生活开始讲解)

目录 一、前言 二、栈是排列方式 三、栈的单词 四、程序中的栈 五、栈的方法 1.声明并初始化栈 2.往栈里放东西&#xff08;学名&#xff1a;入栈&#xff09; 3.从栈往外拿东西 &#xff08;学名&#xff1a;出栈&#xff09; 4.清空栈 5.遍历 Stack 6.获取Stack的长…...

学习threejs,使用第一视角控制器FirstPersonControls控制相机

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️第一视角控制器FirstPerson…...

odoo17 前端 在头像下拉 dropdown 自定义菜单

odoo17 前端 在头像下拉 dropdown 自定义菜单 其实很简单, 我们先找到原来已经创建好的, 找到代码位置 使用 我的资料 为例 odoo-17.0\addons\hr\static\src\user_menu\my_profile.js /** odoo-module **/import { _t } from "web/core/l10n/translation"; import …...

如何管理好自己的LabVIEW项目

在LabVIEW项目开发中&#xff0c;项目管理对于提高开发效率、确保项目质量、减少错误和维护成本至关重要。以下从项目规划、代码管理、测试与调试、版本控制、团队协作等方面&#xff0c;分享LabVIEW项目管理的体会。 ​ 1. 项目规划与需求分析 关键步骤&#xff1a; 需求分析…...

GPT-5 要来了:抢先了解其创新突破

Microsoft 的工程师计划于 2024 年 11 月在 Azure 上部署 Orion (GPT-5)。虽然这一版本不会向公众开放&#xff0c;但其上线被视为人工智能领域的一个重要里程碑&#xff0c;并将产生深远的影响。 文章目录 GPT-5 真的要来了GPT-4 的局限性GPT-5 的创新突破与遗留挑战GPT-5 预期…...

@ComponentScan:Spring Boot中的自动装配大师

文章目录 1. 什么是ComponentScan注解&#xff1f;2. 为什么需要ComponentScan注解&#xff1f;3. 如何使用ComponentScan注解&#xff1f;4. ComponentScan注解的高级用法5. 注意事项6. 结语推荐阅读文章 在Spring Boot的世界里&#xff0c;自动装配&#xff08;Auto-wiring&a…...

uniapp 面试题总结常考

uniapp 文件详情 ├── pages # 页面文件夹 │ │── index # index文件夹 │ │ │── index.vue # index页面 ├── static # 静态资源&#xff08;类似于图片 字体图标等&#xff09; │ …...

花了36元给我的个人博客上了一道防御

前言 双11活动薅了个羊毛&#xff0c;1折的价格买了一年的EdgeOne&#xff0c;正好可以为我的个人博客站点保驾护航。本文就来看看个人博客接入EdgeOne后的效果&#xff0c;如果也想薅羊毛的&#xff0c;赶紧去双11活动页面&#xff0c;不要错过这次机会。 EdgeOne 介绍 先简…...

浅谈C++之内存管理

一、基本介绍 内存管理是C最令人切齿痛恨的问题&#xff0c;也是C最有争议的问题&#xff0c;C高手从中获得了更好的性能&#xff0c;更大的自由&#xff0c;C菜鸟的收获则是一遍一遍的检查代码和对C的痛恨&#xff0c;但内存管理在C中无处不在&#xff0c;内存泄漏几乎在每个C…...

719. 找出第 K 小的数对距离

目录 题目解法 题目 数对 (a,b) 由整数 a 和 b 组成&#xff0c;其数对距离定义为 a 和 b 的绝对差值。 给你一个整数数组 nums 和一个整数 k &#xff0c;数对由 nums[i] 和 nums[j] 组成且满足 0 < i < j < nums.length 。返回 所有数对距离中 第 k 小的数对距离。…...

【图像压缩感知】论文阅读:Self-supervised Scalable Deep Compressed Sensing

tips&#xff1a;本文为个人阅读论文的笔记&#xff0c;仅作为学习记录所用。 Title&#xff1a;Self-supervised Scalable Deep Compressed Sensing Journal&#xff1a;IJCV 2024 代码链接&#xff1a;GitHub - Guaishou74851/SCNet: Self-Supervised Scalable Deep Comp…...

Swift 宏(Macro)入门趣谈(一)

概述 苹果在去年 WWDC 23 中就为 Swift 语言新增了“其利断金”的重要小伙伴 Swift 宏&#xff08;Swift Macro&#xff09;。为此&#xff0c;苹果特地用 2 段视频&#xff08;入门和进阶&#xff09;颇为隆重的介绍了它。 那么到底 Swift 宏是什么&#xff1f;有什么用&…...

linux常见资源查询命令(持续更新)

年纪大了&#xff0c;很多命令记不住了&#xff0c;但偶尔也需要用到&#xff0c;通过搜索也需要点时间&#xff0c;特此记录。 不同操作系统命令会有所区别&#xff0c;下面是大部分时候工作的机器系统&#xff1a; CentOS release 7.5 (Final)Kernel \r on an \m 1、实时查…...

JavaWeb:文件上传1

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

C++ 中的异常处理机制是怎样的?

异常处理的基本概念&#xff1a; 异常: 程序在运行时发生的错误或意外情况。 抛出异常: 使用 throw 关键字将异常传递给调用堆栈。 捕获异常: 使用 try-catch 块捕获和处理异常。 异常类型: 表示异常类别的标识符。 异常处理流程&#xff1a; 抛出异常: 当检测到错误或意…...

SwiftUI-基础入门

开发OS X 图形应用界面时有三种实现方式&#xff1a;XIB、Storyboard、SwiftUI。Storyboard基于XIB做了优化&#xff0c;但XIB基本被放弃了&#xff0c;而SwiftUI是苹果公司后来开发的一套编程语言&#xff0c;用来平替Objective-C。虽然现在Swift 6 还是有些不完善的地方&…...

C++builder中的人工智能(20):如何在C++中开发一个简单的Hopfield网络

在AI技术的发展历史中&#xff0c;模式识别模型是最伟大的AI技术之一&#xff0c;尤其是从像素图像中读取文本。其中一个是Hopfield网络&#xff08;或称为Ising模型的神经网络或Ising–Lenz–Little模型&#xff09;&#xff0c;这是一种递归神经网络形式&#xff0c;由John J…...

video2gif容器构建指南

一、介绍 1.项目概述 Video2Gif 项目旨在提供一种便捷的方式&#xff0c;让用户能够将视频中的精彩片段快速转换为 GIF 动画。GIF 动画因其循环播放、文件体积小等特点&#xff0c;在社交媒体、聊天工具中广泛应用&#xff0c;用于表达情感、分享趣事等。 2.核心功能 视频导…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...

基于单片机的宠物屋智能系统设计与实现(论文+源码)

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...