移动端的概念

news2024/12/24 8:10:24

【移动端】

1. 什么是移动端

大前端时代：

  1. ​ 前端开发涉及的领域越来越多，如：PC端，移动端，小程序，App，甚至是物联网
  2. ​ 大前端’的大字体现在地位重要，涉及领域众多
  3. ​ 前后端完全分离

移动端开发：

  1. ​ PC端：指电脑端，使用电脑访问的页面
  2. ​ 移动端：手机访问
    1. 比如：使用手机浏览器访问淘宝，京东等网页版
    2. 手机网页版，App 应用，小程序等统称为移动端开发
  3. ​ 目前主流开发： 移动端

2. 屏幕相关概念

2.1 屏幕大小

  • 屏幕大小是指屏幕的对角线长度，单位一般是英寸(inch)。

  • 常见的手机屏幕大小有： 3.5寸、4寸、4.7寸、5.0寸、5.5寸、6.0寸等等

  • 英寸与厘米的换算关系为 ：1英寸(inch) = 2.54厘米(cm)

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.2 屏幕分辨率

概念:

  1. 屏幕分辨率是指屏幕在：横向、纵向上所拥有的 ‘物理像素点’总数。一般表示用 n * m 表示。
  2. 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点
  3. 例如： IPhone 6 的屏幕分辨率为 750 * 1334

注意事项:

  1. 屏幕分辨率是一个固定值，屏幕生产出来就确定了，无法修改！
  2. 屏幕分辨率、显示分辨率是两个概念，电脑或手机的设置中可以修改的是：显示分辨率。
  3. 显示分辨率指的是设备当前所用到的物理像素点数，或者说：屏幕分辨率 >= 显示分辨率。

2.3 常见手机分辨率

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. 像素相关概念

3.1 物理像素

概念：

  • 屏幕的分辨率
  • 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

特点：

  • 由屏幕制造商决定，屏幕生产后无法修改

  • 物理像素点个数越多，图像越清晰，但人类肉眼识别是有极限的，当到了极限之后就无法分辨

  • 常用：iphone6物理像素： 750 ***** 1334

作用：

  • 决定控制屏幕显示的像素点个数，屏幕分辨率的大小

理解：

  • 可以认为是屏幕上的发光点

  • 演唱会上组成大的LED*屏幕上的一块一块的小屏幕，由小的发光晶体管组成

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2 css像素

概念：

  • css像素又名： 逻辑像素，css像素是一个抽象的长度单位，单位是px
  • 编写css、JS中所使用的
  • 都是css像素（可以理解为：“程序员像素”）

特点：

  • 虚拟像素
  • 无法像长度单位一样直接衡量，最终需要转换为物理像素进行量化

作用：

  • 开发者进行样式编写的单位，最终由设备转换为物理像素量化在页面上

请思考：

  • 代码中所写的1px（css像素 ），到了屏幕上到底对应几个物理像素呢？
  • 是1个css像素就对应1个物理像素(“发光的灯泡”)吗？

转换介质：设备独立像素

3.3 设备独立像素

概念：

  • 设备独立像素简称 DIP 或 DP（device-independent pixel）
  • 又称：屏幕密度无关像素。
  • 理解：我们的电脑、手机设备中有一个坐标系，这个坐标系中的一个点，就是一个设备独立像素，对应一个可以由程序去使用的虚拟像素(css像素)。程序根据屏幕特性、将设备独立像素上的点对应到屏幕上的物理像素点。

特点：

  • 虚拟像素，设备厂商根据屏幕特性设置的，无法更改
  • 可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素
  • 1css像素 = 1设备独立像素，利用设备独立像素描述移动端设备尺寸的时候，单位也是px，比如iphone6的尺寸(设备独立像素)是 375 * 667

作用：

  • 最终转换为物理像素进行量化
  • 设备独立像素的出现，使得即使在高清屏下，（例如苹果的Retina屏），也可以让元素有正常的尺寸，让代码不受到设备的影响

历史:

  • 在没出现【高清屏】的年代，1个css像素对应1个物理像素，但自从【高清屏】问世，二者就不再是1对1的关系了。苹果公司在2010年推出了一种新的显示标准：在屏幕尺寸不变的前提下，把更多的物理像素点压缩至一块屏幕里，这样分辨率就会更高，显示效果就会更佳细腻。苹果将这种屏幕称为：’Retina 屏幕（又名：视网膜屏幕）’，与此同时推出了配备这种屏幕的划时代数码产品——iPhone4

视网膜屏幕:

  • 起名视网膜屏幕，指人类肉眼可识别的最大分辨率屏幕
  • Dpr（devicePixelRatio）为 2

3.4 三者像素关系

设备独立像素与css像素

  • 在无缩放的情况下（标准情况）：1css像素 = 1设备独立像素
  • 移动端目前大都是不使用缩放情况

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

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

3.5 设备像素比(dpr)

概念：

  • 单一方向上设备【物理像素】和【设备独立像素】的比例。即：dpr = 物理像素 / 设备独立像素

获取

  • Window.devicePixelRatio

常见设备像素比:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

像素之间关系

  • 普通屏(dpr = 1)：1css像素 = 1设备独立像素 = 1物理像素
  • 高清屏(dpr = 2)：1css像素 = 1设备独立像素 = 2物理像素
  • 高清屏(dpr = 3)：1css像素 = 1设备独立像素 = 3物理像素

示例：程序员写了一个width为300px的盒子，那么：

  • 它占据了300个css像素；
  • 若用户不进行缩放，则对应300个设备独立像素；
  • 在dpr为2的设备上，这300个css像素占据了300*2=600个物理像素（横向）

总结：以iphone6为例(横向)

  • 物理像素：750px
  • 设备独立像素：375px
  • css像素：375px

4. 视口viewport

4.1 视口分类

  1. PC端视口
  2. 移动端视口
    1. 布局视口
    2. 视觉视口
    3. 理想视口(完美视口)

4.2 PC端视口

概念：

  • pc端视口的默认宽度和浏览器窗口的宽度一致；
  • 在 css 标准文档中，视口也被称为：初始包含块；
  • 它是所有 css 百分比宽度推算的根源；

获取方法:

  • 获取浏览器窗口文档显示区域的宽度，不包含滚动条
    • document.documentElement.clientWidth
  • 包含滚动条可视区域
    • window.innerWidth
  • 包含滚动条、边框的可视区域
    • window.outerWidth
  • 设备整个屏幕的宽度,与浏览器无关
    • screen.width

4.3 移动端视口

4.3.1 布局视口

概念：

  • Css布局时的画布，用于约束页面内容显示的范围
  • 可以理解为我们画画时候的画板大小，用于约束绘画者绘画的范围

大小:

​ 默认980px

作用：

  • 用于解决早期的页面在手机上显示的PC问题

    在这里插入图片描述

4.3.2 视觉视口

概念：

  • 视觉视口就是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽

作用：

  • 用于解决单一使用布局视口压缩页面出现的问题；
  • 比如：压缩后页面内容太小，用户无法精准点击甚至是无法查看清楚页面内容

在这里插入图片描述

4.3.3 理想视口

概念：

  • 当页面在浏览器中呈现最佳效果即为理想视口
  • 布局视口宽度 = 视觉视口宽度 = 设备宽度

作用：

  • 用于使页面完美呈现在浏览器中

  • 解决单一压缩页面在手机浏览器中带来的问题

    在这里插入图片描述

4.3.4 理想视口实现

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

扩展内容： viewport选项

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  • width： 布局视口宽度
  • initial-scale： 初始缩放比例
  • maximum-scale： 最大缩放比例
  • minimum-scale： 最小缩放比例
  • user-scalable： 是否允许用户缩放，

问题延伸:

实现理想视口以后，虽然没有滚动条和页面压缩现象了，但是移动端设备的型号很多，屏幕大小不一致，那么不同移动端设备下，页面内的元素大小如何显示？大小固定？ || 根据屏幕大小不同元素也随之变化？

解决问题：

适配

5. 适配

请思考：

​ 为什么要做适配

场景：

  • 实际开发中上线后的移动端项目需要在不同的手机上供用户使用访问，不同的手机屏幕尺寸大小不一样
  • 那么在开发中需要单独为每一中手机单独开发页面吗？

5.1 适配方案

  1. viewport适配
  2. rem适配
  3. vw适配

5.2 viewport适配

  • 适配方案：

    • 通过meta标签进行viewport设置达到适配效果
    • 主要是调整布局视口大小
    • 拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后直接按照设计稿给宽高进行布局即可

  • 优点：

    • 开发页面的时候直接按照设计稿的尺寸进行编写即可

  • 缺点：

    • 有些不希望被适配的东西，例如边框，也被适配了，导致比设计稿大的设备上边框太粗
    • 图片失真,内容显示不清

    viewport 适配的思路:

    在进入页面,要渲染这个页面,渲染的时候从上到下执行代码,先执行一段js代码,获取设备的宽度

    然后立即用js去设置一个meta标签,这个meta标签的width设置为当前设备的宽度

5.3 px, em, rem的区别

  • px：
    • 绝对单位，一旦设置，就无法因为适应页面大小而改变
  • em：
    • 相对单位，em是相对于其父元素来设置字体大小的,一般都是以的“font-size”为基准
    • 子元素字体大小的em是相对于父元素字体大小
    • 元素的width/height/padding/margin用em的话是相对于该元素的font-size
  • rem：
    • 相对单位，rem是相对于根节点字体大小
    • 一旦设置根标签字体大小，body标签必须设置字体大小，否则会继承根标签字体大小

5.4 rem适配

5.4.1 方案一：

使用rem 适配的时候，需要设置body字体大小，否则会影响em值的大小

  • 适配细节：
    • 将根节点字体设置为100px
    • 1rem = 100px
    • 编写的值rem(设备元素尺寸) = (设计稿元素尺寸 / 设计稿宽度 * 设备宽度) / 100 rem
    • 比如：iphone6手机下，设计稿750， 设计稿元素宽高为375的div，设置宽高应该是： (375/750 * 375)/100 = 1.875 rem
  • 优点:
    • 方案统一，完美适配
  • 缺点:
    • 计算相对复杂
  • 注意点:
    • 使用rem 适配的时候，需要设置body字体大小，否则会影响em值的大小

5.4.2 方案二:

  • 适配细节:

    • 将页面设备宽度或 设计稿宽度均等分10份
    • 方式一：设备等分： 1rem = 1/10设备宽度
      设备等分： 1rem = 1/10设备宽度代码：
    <script>
   function remRefresh() {
      let clientWidth = document.documentElement.clientWidth;
      // 将屏幕等分10份
      let rem = clientWidth / 10;
      document.documentElement.style.fontSize = rem + 'px'; // 设置html元素的字体大小,让rem单位生效
      document.body.style.fontSize = '12px'; // 设置body的字体,重置一下字体
    }

    window.addEventListener('pageshow', () => {
      remRefresh()
    })
    // 函数防抖
    let timeoutId;
    window.addEventListener('resize', () => {
      timeoutId && clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        remRefresh()
      }, 300)
    }) 
    </script>
    • 方式二：设计稿等分： 1rem = 1 /10 设计稿宽度
    • 设计稿的值直接换算成rem计算 编写的值 rem = 设计稿元素尺寸/设计稿等分10份的值
    • 比如：iphone6手机下，设计稿750， 设计稿元素宽高为375的div，设置宽高应该是： 375/（750/10）= 5rem

  • 优点：

    • 换算简单，完美适配，推荐使用
    • 可搭配第三方库自动换算：lib-flexible 、 postcss-plugin-px2rem

  • 注意点：

    • 使用rem 适配的时候，需要设置body字体大小，否则会影响em值的大小

5.5 vw适配

  • 概念：视口单位vw，vh
    • 1vw = 1%屏幕宽度
    • 1vh = 1%屏幕高度
  • 适配细节：
    • 需要将设计稿等分100份
    • 计算设计稿元素占比多少份
    • 比如：750设计稿上375的元素， 375 / 750 /100 = ?vw
  • 注意点：
    • 只能使用vw适配，不能使用vh
    • 有的机型可能宽度一样，但高度不一样，比如：iphone6和iphoneX
  • 缺点：
    • 换算复杂

6. 移动端事件

6.1 事件分类

  • touchstart 元素上触摸开始时触发
  • touchmove 元素上触摸移动时触发
  • touchend 手指从元素上离开时触发
  • touchcancel 触摸被打断时触发，很少使用

6.2 事件绑定方式

nodeEle.ontouchstart = function(e){
	console.log('touch start',e)
}
nodeEle.addEventListener('touchstart', function(e){
	console.log('touch start',e)
})

6.3 事件点透

6.3.1 click事件在移动端延迟

  • 互联网刚兴起的时候，更多是使用PC 的网页，即使在手机上，通常需要使用手指进行缩放来查看页面内容，如何缩放呢？双击放大。、。。
  • 浏览器为了区分用户到底是点击还是双击缩放，需要等待，等待得时长大概是300ms，此时用的事件是click事件
  • touchstart： 手指一旦触摸屏幕就触发，不需要等待，因此，click事件会有时间差
  • 如果设置meta view标签，延迟时间大概是100ms左右

6.3.2 事件点透现象

  • 原因： 在移动端touchstart事件结束后会默认触发元素的click事件
  • 场景： 如果touch事件隐藏一个遮罩的话，touchstart作用在遮罩后会自动触发click事件，该click事件自动作用在遮罩后方的元素的身上

​

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      display: block;
      height: 100vh;
      width: 100vm;
      text-align: center;
      line-height: 80vh;
    }

    #mask {
      position: fixed;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.2);
      width: 100vw;
      height: 100vh;
      text-align: center;
      line-height: 100vh;
     
    }

    .btn {
      width: 200px;
      height: 40px;
      background-color: yellowgreen;
      color: #fff;
      border: none;
      outline: none;
    }
  </style>

<a href="http://www.atguigu.com">点击去尚硅谷</a>
<div id="mask">
  <button class="btn">点我关闭遮罩</button>
</div>

let btn = document.querySelector('.btn');
let mask = document.querySelector('#mask');
btn.addEventListener('touchstart', function(){
  mask.style.display = 'none';
})

6.3.3 事件点透解决方案

  • 方案一：

    • 阻止默认行为
    btn.addEventListener('touchstart', (e) => {
    e.preventDefault()
    mask.style.display = 'none'
})

  • 方案二：

    • 使用click事件代替touch事件
    btn.addEventListener('click', () => {
   mask.style.display = 'none'
})

  • 方案三：

    • 让隐藏的目标元素延迟隐藏，延迟时间大于300ms
    btn.addEventListener('touchstart', (e) => {
    setTimeout(() => {
    	mask.style.display = 'none'
    }, 300)
})

7. 移动端经典问题

7.1 问题： 1px像素边框过粗**

  • 场景重现：

    设计稿： 宽度750， 设计稿中有个box的div width 375px height 375px

    UI设计师：我需要你将这个box的div的边框设置成1个像素，颜色为红色

    前端开发工程师： 好的

    ​ 代码实现： div： border： 1px solid red

    UI设计师: 你的效果不对，我要的是1个像素，你设计的边框错粗，大于1个像素

  • 问题：

    前端工程师代码明明写的是1px的border，UI工程师为什么说边框比1个像素粗呢

  • 原因：

    • UI工程师需要的是1个物理像素的边框，即在设计稿上占比是1个像素，设计稿总宽是750
    • 前端工程师编写的是1px， 比如在iphone6下，因为dpr = 2， 所以1px在同一个方向上 = 2个物理像素
    • 因此边框比1物理像素要粗

7.2 解决方案

多媒体查询器，根据dpr不同，对border进行对应的缩放

* {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 5rem; 
      height: 5rem;
      font-size: 16px;
      border: 1px solid red;
    }

    /* 多媒体查询器 */
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      .box {
        border: 0.5px solid red;
      }
    }

    @media screen and (-webkit-min-device-pixel-ratio: 3) {
      .box {
        border: 0.333333px solid red;
      }
    }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/957696.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

从零开始的Hadoop学习（五）| HDFS概述、shell操作、API操作

从零开始的Hadoop学习（五）| HDFS概述、shell操作、API操作

1. HDFS 概述 1.1 HDFS 产出背景及定义 1&#xff09;HDFS 产生背景 随着数据量越来越大&#xff0c;在一个操作系统存不下所有的数据&#xff0c;那么就分配到更多的操作系统管理的磁盘中&#xff0c;但是不方便管理和维护&#xff0c;迫切 需要一种系统来管理多台机器上的…
阅读更多...
OpenCV（八）：图像二值化

OpenCV（八）：图像二值化

目录 1.固定值二值化 2.自适应阈值二值化 3.Android JNI完整代码 1.固定值二值化 固定阈值二值化是OpenCV中一种简单而常用的图像处理技术&#xff0c;用于将图像转换为二值图像。在固定阈值二值化中&#xff0c;像素值根据一个预定义的阈值进行分类&#xff0c;大于阈值的…
阅读更多...
OFDM 系统在 AWGN 信道下对不同载波频率偏移 （CFO） 的 BER 灵敏度研究（Matlab代码实现）

OFDM 系统在 AWGN 信道下对不同载波频率偏移 （CFO） 的 BER 灵敏度研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
软件测评国家标准概要总结

软件测评国家标准概要总结

软件测试 软件测评是指针对软件功能、性能、用途使用价值等进行的评价和测试&#xff1b; 软件测评主要依靠标准是GB/T 25000.51-2016 系统与软件工程 系统与软件质量要求和评价&#xff08;SQuaRE&#xff09; 第51部分&#xff1a;就绪可用软件产品&#xff08;RUSP&#x…
阅读更多...
基于JavaWeb和mysql实现校园订餐前后台管理系统（源码+数据库）

基于JavaWeb和mysql实现校园订餐前后台管理系统（源码+数据库）

一、项目简介 本项目是一套基于JavaWeb和mysql实现网上书城前后端管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都…
阅读更多...
小兔鲜儿---商品分类

小兔鲜儿---商品分类

目录 准备工作​ 渲染轮播图​ 一级分类​ 获取数据​ Tab 交互​ 二级分类​ 骨架屏​ 准备工作​ 参考效果 商品分类页中的广告位&#xff0c;可复用之前定义的轮播图组件 XtxSwiper。 静态结构 商品分类页静态结构&#xff1a; src/pages/category/category.vue …
阅读更多...
Docsify + Gitalk详细配置过程讲解

Docsify + Gitalk详细配置过程讲解

&#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是Zeeland&#xff0c;开源建设者与全栈领域优质创作者。&#x1f4dd; CSDN主页&#xff1a;Zeeland&#x1f525;&#x1f4e3; 我的博客&#xff1a;Zeeland&#x1f4da; Github主页: Undertone0809 (Zeeland)&…
阅读更多...
二进制安全虚拟机Protostar靶场 安装,基础知识讲解,破解STACK ZERO

二进制安全虚拟机Protostar靶场 安装,基础知识讲解,破解STACK ZERO

简介 pwn是ctf比赛的方向之一&#xff0c;也是门槛最高的&#xff0c;学pwn前需要很多知识&#xff0c;这里建议先去在某宝上买一本汇编语言第四版&#xff0c;看完之后学一下python和c语言&#xff0c;python推荐看油管FreeCodeCamp的教程&#xff0c;c语言也是 pwn题目大部…
阅读更多...
FastestDet：比yolov5更快！更强！全新设计的超实时Anchor-free目标检测算法（附源代码下载）...

FastestDet：比yolov5更快！更强！全新设计的超实时Anchor-free目标检测算法（附源代码下载）...

关注并星标 从此不迷路 计算机视觉研究院 公众号ID&#xff5c;ComputerVisionGzq 学习群&#xff5c;扫码在主页获取加入方式 计算机视觉研究院专栏 作者&#xff1a;Edison_G 本篇文章转自于知乎——qiuqiuqiu&#xff0c;主要设计了一个新颖的轻量级网络&#xff01; 代码地…
阅读更多...
【多线程】线程安全（重点）

【多线程】线程安全（重点）

文章目录 1. 观察线程不安全1.1 示例11.2 示例2 2. 线程不安全的原因2.1 修改共享数据2.2 原子性2.3 可见性2.4 顺序性 3. synchronized同步方法3.1 synchronized特性3.1.1 互斥3.1.2 刷新内存3.1.3 可重入 3.2 synchronized使用3.2.1 直接修饰普通方法3.2.2 修饰静态方法3.2.3…
阅读更多...
开源照片管理服务LibrePhotos

开源照片管理服务LibrePhotos

本文是为了解决网友 赵云遇到的问题&#xff0c;顺便折腾的。虽然软件跑起来了&#xff0c;但是他遇到的问题&#xff0c;超出了老苏的认知。当然最终问题还是得到了解决&#xff0c;不过与 LibrePhotos 无关&#xff1b; 什么是 LibrePhotos ? LibrePhotos 是一个自托管的开源…
阅读更多...
uniapp微信小程序用户隐私保护

uniapp微信小程序用户隐私保护

使用wx.requirePrivacyAuthorize实现微信小程序用户隐私保护。 一、前言 微信小程序官方出了一个公告《关于小程序隐私保护指引设置的公告》。不整的话&#xff0c;后果很多授权无法使用&#xff0c;详见《小程序用户隐私保护指引内容介绍》 。 二、隐私相关设置 1、在 微信…
阅读更多...
基于Laravel通用型内容建站企业官网系统源码 可免费商用

基于Laravel通用型内容建站企业官网系统源码 可免费商用

是一个基于 Laravel 企业内容建站系统。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;免费且不限制商业使用 2023年08月23日增加了以下12个特性&#xff1a; [新功能] 手机端Banner支持…
阅读更多...
视频监控人员行为识别算法

视频监控人员行为识别算法

视频监控人员行为识别算法通过opencvpython网络模型框架算法&#xff0c;视频监控人员行为识别算法可以识别和判断员工的行为是否符合规范要求&#xff0c;一旦发现不符合规定的行为&#xff0c;视频监控人员行为识别算法将自动发送告警信息。OpenCV的全称是Open Source Comput…
阅读更多...
Java8实战-总结18

Java8实战-总结18

Java8实战-总结18 使用流筛选和切片用谓词筛选筛选各异的元素截短流跳过元素 使用流 流让你从外部迭代转向内部迭代。这样&#xff0c;就用不着写下面这样的代码来显式地管理数据集合的迭代(外部迭代)了&#xff1a; List<Dish> vegetarianDishes new ArrayList<>…
阅读更多...
​​​​​​​嵌入式学习笔记（8）ARM汇编伪指令

​​​​​​​嵌入式学习笔记（8）ARM汇编伪指令

伪指令的意义 伪指令不是指令&#xff0c;伪指令和指令的根本区别是经过汇编后不会生成机器码。 伪指令的意义在于指导汇编过程。 伪指令是和具体的汇编器有关的&#xff0c;我们使用gnu工具链&#xff0c;因此学习gnu下的汇编伪指令 gnu汇编中的一些符号 用来做注释。 : …
阅读更多...
react利用wangEditor写评论和@功能

react利用wangEditor写评论和@功能

先引入wangeditor写评论功能 import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from react; import wangeditor/editor/dist/css/style.css; import { Editor, Toolbar } from wangeditor/editor-for-react; import { Button, Card, Col, For…
阅读更多...
IPv6网络实验：地址自动生成与全球单播通信探索

IPv6网络实验：地址自动生成与全球单播通信探索

文章目录 一、实验背景与目的二、实验拓扑三、实验需求四、实验解法1. 在R1和PC3上开启IPv6链路本地地址自动生成&#xff0c;测试是否能够使用链路本地地址互通2. 为R1配置全球单播地址2001::1/64&#xff0c;使PC3能够自动生成与R1同一网段的IPv6地址3. 测试R1和PC3是否能够使…
阅读更多...
动力学约束下的运动规划算法——Hybrid A*算法（附程序实现及详细解释）

动力学约束下的运动规划算法——Hybrid A*算法（附程序实现及详细解释）

前言&#xff08;推荐读一下&#xff09; 本文主要介绍动力学约束下的运动规划算法中非常经典的Hybrid A*算法&#xff0c;大致分为三部分&#xff0c;第一部分是在传统A * 算法的基础上&#xff0c;对Hybrid A * 算法的原理、流程进行理论介绍。第二部分是详细分析 MotionPl…
阅读更多...
[C++]vector使用和模拟实现

[C++]vector使用和模拟实现

&#x1f941;作者&#xff1a; 华丞臧 &#x1f4d5;​​​​专栏&#xff1a;【C】 各位读者老爷如果觉得博主写的不错&#xff0c;请诸位多多支持(点赞收藏关注)。如果有错误的地方&#xff0c;欢迎在评论区指出。 推荐一款刷题网站 &#x1f449;LeetCode 文章目录 一、vec…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023