皮皮网

1.remԴ??
2.正点原子lwIP学习笔记——网络数据包管理
3.大屏适配的几种方式
4.REM，你这磨人的小妖精！

remԴ??

       Rem 标记

       FindPic 0,0,,,"Attachment:\1.bmp",0.9,intX,intY

       If intX = - 1  Then  

       Goto 标记

       End If

       //下一个命令

正点原子lwIP学习笔记——网络数据包管理

       TCP/IP作为一种数据通信机制，其协议栈的实现本质上是对数据包的处理。为了实现高效率的处理，lwIP数据包管理提供了一种高效的黑人博客源码机制。协议栈各层能够灵活处理数据包，同时减少数据在各层间传递时的时间和空间开销，这是提高协议栈工作效率的关键。在lwIP中，这种机制被称为pbuf。

       用户的数据经过申请pbuf，拷贝到pbuf结构的内存堆中。在应用层，数据的前面加上应用层首部，在传输层加上传输层首部，最后在网络层加上网络层首部。

       pbuf用于lwIP各层间数据传递，openwrt官方源码避免各层拷贝数据！

       lwIP与标准TCP/IP协议栈的区别在于，lwIP是一种模糊分层的TCP/IP协议，大大提高了数据传输效率！

       这是定义在pbuf.h中的关键结构体pbuf。通过指针next构建出了一个数据包的单向链表；payload指向的是现在这个结构体所存储的数据区域；tot_len是所有的数据长度，包括当前pbuf和后续所有pbuf；而len就是指当前pbuf的长度；type_internal有四种类型；ref代表当前pbuf被引用的次数。

       右边展示的pbuf_layer就是用来首部地址偏移，用来对应相应的结构体。

       PBUF_RAM采用内存堆，长度不定，一般用在传输数据；PBUF_POOL采用内存池，固定大小的内存块，所以分配速度快（一般字节，就是分配3个PBUF_POOL的内存池），一般用在中断服务中；PBUF_ROM和PBUF_REF都是内存池形式，而且只有pbuf没有数据区域，fabric ca 源码数据都是直接指向了内存区（PBUF_ROM指向ROM中，PBUF_REF指向RAM中）。

       左边第一幅对应PBUF_RAM；中间两幅对应PBUF_POOL；最后一幅对应PBUF_ROM和PBUF_REF。

       其中PBUF_RAM和PBUF_POOL相对更为常用。

       更多的函数，都可以在pbuf.c和.h中找到。pbuf_alloc()如果是PBUF_REF或者是PBUF_ROM，就会如上图所示，创建一个结构体指针p，然后会进入pbuf_alloc_reference；该函数中，会申请一个pbuf结构体大小的内存；然后调用pbuf_init_alloced_pbuf进行初始化，初始化可以如上图所示。

       如果是PBUF_POOL，会定义q和last两个pbuf结构体指针，q和last都初始化为NULL，rem_len（剩余长度）初始化为（用户指定需要构建的长度）；然后q会经过内存申请，qlen则是引用网页源码去rem_len和当前可申请的数据大小（PBUF_POOL_BUFSIZE_ALIGNED - LWIP_MEM_ALIGN_SIZE(offset)）取小值，然后同样经过pbuf_init_alloced_pbuf初始化q中的pbuf结构体；然后会把offset清零，就是说之后的pbuf都没有offset了，只有第一个链表的元素有offset；经过if判断并判断rem_len的大小，只要还有剩余就会回去循环继续执行上述操作，直到完成3个内存块的初始化。

       首先会计算payload_len和alloc_len，如果是传输数据，那么LWIP_MEM_ALIGN_SIZE(offset)就是，计算得到payload_len=，alloc_len=；然后进入判断payload和alloc的长度是否

       进入判断p是否为空，不为空证明还没有释放；进入while语句，每一次都--ref（引用次数）；然后类似链表删除，调用相应的pbuf类型的内存释放（内存堆或者内存池），直到p全部被释放。源码如下：

       这个就要看你使用的是什么类型，然后会根据类型来决定payload_len的大小，进行相应的cocoscreator项目源码payload指针指向数据区前的首部字段。

       这一章主要讲述了lwIP中重要的pbuf缓冲，具体有哪些数据构成，为之后的学习奠定基础，确定了pbuf除了所需传输的数据，还有哪些变量需要添加，如何申请对应的pbuf内存大小，以及对应的内存堆和内存池。

大屏适配的几种方式

       1. rem方案

       根据不同屏幕大小动态调整html根节点的fontsize。

       2. vw/vh方案

       依据设计稿计算相对百分比。

       3. scale 方案

       若设计稿为*（:9），存在两种方案：

       3.1 按宽度缩放

       3.2 动态计算网页的宽高比，决定根据宽度比率还是高度比率进行缩放

       4.相关开源组件库

       4.1 autofit.js

       autofit.js基于比例缩放原理，通过动态调整容器的宽度和高度来实现全屏填充，避免元素的挤压或拉伸。autofit.js提供了一种简单而有效的方法来实现网页的自适应设计，尤其适合需要在不同分辨率和屏幕尺寸下保持布局一致性的应用场景。

       安装：

       配置：

       源码地址

       4.2 v-scale-screen

       大屏自适应容器组件，适用于大屏项目开发，实现屏幕自适应。可根据宽度自适应、高度自适应、宽高等比例自适应，全屏自适应（会存在拉伸问题）。如果是React开发者，可以使用r-scale-screen。

       安装：

       配置：

       源码地址:

       4.3 FitScreen

       一种基于缩放的大屏自适应解决方案的基本方法，基于设计草图的像素尺寸，通过缩放进行适配，一切变得简单。

       支持vue2、vue3以及react，适用于任何框架，只需少量代码。

       安装：

       配置：

       源码地址:

REM，你这磨人的小妖精！

       移动端的崛起赋予前端开发者更大的舞台，同时也带来了挑战，其中最头疼的问题之一便是移动端适配。在众多方案中，REM适配因其灵活的自适应布局与CSS单位转换功能而备受青睐，然而，其兼容性问题也让人感到头疼。

       REM适配方案如同一个磨人的小妖精，让人又爱又恨。爱它是因为它能轻松实现响应式布局，使网站在不同设备上呈现良好视觉效果。恨它是因为移动设备的多样性和复杂性，要达到完美的兼容并非易事。

       尽管如此，对于REM适配的痴迷并未消退。本文将围绕这一话题展开讨论，并分享个人经验与使用代码。值得注意的是，随着移动端兼容性提升，已涌现出其他适配方案，本文将不涉及此范围。

       在进行REM适配时，区分安卓与iOS设备成为关键。很多人认为iOS设备的多倍屏是主要原因，但安卓设备同样存在多倍屏问题。区分设备类型有助于更精确地进行适配。

       核心代码中，`refreshRem`函数负责每次更新时的重置。页面最大宽度的设定能确保PC端也能获得良好的视觉效果。然而，部分安卓设备存在1rem与根节点font-size不一致的情况，这可能导致显示偏差。为解决这一问题，文章中提出在`bodyLoaded`后，通过比较实际视觉1rem与计算结果的偏差，若超过1%，则重新定义rem，确保其准确性。

       为了应对屏幕尺寸变化，监听`resize`事件是关键。定时器的使用避免了频繁计算，提高性能。针对横竖屏切换事件，尽管理论上可以监听，但实际中并不必要，因为`resize`事件已覆盖了所有场景。

       文章还分享了工具函数与CSS重置样式代码，旨在简化开发流程。此外，推荐了Fle-CLI这一全局构建工具，旨在减轻开发者构建配置的负担。

       总结而言，本文介绍的这套REM适配代码是个人在日常开发中积累的经验总结，虽非完美，但足以应对主流设备。配合自动化转换工具，开发过程更加便捷高效。

       最后，文章链接了源码地址，以便有兴趣的开发者参考与使用。