当前位置: 首页 > 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.核心功能 视频导…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...