首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css移动端适配最佳实践

移动端适配,在移动端里经常有遇到,在不同分辨率移动端设备精确还原UI设计稿,这是一个令人抓狂的问题,好在有flex,box布局解决了自适应很大一部分问题。...在开始本文之前主要介绍几种笔者常用的适配方案 1、设置meta标签的initial-scale,mininum-scale,maxinum-scale缩放比 2、rem适配,利用根设置基础单位 3、vw...+calc,结合rem适配 正文开始... meta缩放比 (function () { let timer = null; function flexable() { const... 这种方案在早期移动端rem适配用得比较多 vw适配 vw是视口单位...scale,假设设计稿是750的,那么我们的targetWidth就是375,设计稿量的尺寸就是10px,网页上所写的元素也是10px,因为scale=1,随着不同分辨率scale的值也会发生变化 rem适配

91920

移动端最佳适配解决方案

移动端最佳适配解决方案 移动端rem的适配已经淘汰了,目前大家使用的都是viewport。lib-flexible作者也在github明确地表示lib-flexible这个解决方案可以放弃使用了。...等于视图单位的1%的高度 如果设计稿的视图为375px 那么1vw 等于 3.75px 在配置开始之前 我们依然需要一个vue-cli项目 在项目的index.html 我们需要在head标签中添加如下代码...对于rem的适配该库是至关重要的。本篇文章使用viewport适配则不再需要。 要使用viewport适配 我们必须安装postcss-px-to-viewport这个包。...在文件中写入如下代码: //postcss.config.js module.exports = { plugins: { 'postcss-px-to-viewport': {...我们只需要改动这行代码即可 const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ?

1.3K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【设计模式】适配器模式 ( 类适配代码模板 | 对象适配代码模板 | 适配器模式示例 )

    适配器模式 ( 类适配器 ) 代码模板 II . 适配器模式 ( 对象适配器 ) 代码模板 III . 适配器模式 代码示例 I . 适配器模式 ( 类适配器 ) 代码模板 ---- 1 ....声明适配器 ( 类适配器 ) : ① 适配器 实现 用户目标接口 : 适配器 需要实现 用户目标接口 , 在实现的接口方法中 , 需要将实际操作 委托给 被适配者 ; ② 适配器 实现 用户目标接口 代码实现说明...被适配者 的方法呢 , 这里 适配器 通过 继承 被适配者 , 获取调用 被适配者 方法的资格 ; ④ 适配器 继承 被适配代码实现说明 :Adapter 适配器继承了 Adaptee 被适配者...适配器模式 ( 对象适配器 ) 代码模板 ---- 1 ....声明适配器 ( 类适配器 ) : ① 适配器 实现 用户目标接口 : 适配器 需要实现 用户目标接口 , 在实现的接口方法中 , 需要将实际操作 委托给 被适配者 ; ② 适配器 实现 用户目标接口 代码实现说明

    39210

    兼容 - 纯代码完美适配 iPhoneX

    前言 本文主要针对适配 iPhoneX列出一些关键点,仔细阅读可完美适配 iPhoneX,其中还有一些是适配 iOS11的, 话不多少,开始正餐。 iPhoneX概况一览 ?...从图中我们可以看出: status bar 从20 变成了 44 导航条高度依然是 44 顶部的总体高度变成 88 安全区域距离页面底部需要保留 34pt,系统自带的 Tabbar已经适配好了...,但是自己的页面书写代码就要注意了,以前可以触底的,现在要保留34pt 距离了。...没有适配 iPhoneX的触底页面 旧工程如何在iphoneX全屏显示 只需要在LaunchImage中添加一个尺寸为1125 × 2436的启动图,并且工程使用LaunchImage加载启动图的,而不是使用...#define kTopHeight (kStatusBarHeight + kNavBarHeight) 适配中遇到的其他问题 Pushde的时候列表/页面发生向下偏移 这是一个 iOS11适配的问题

    4.5K20

    代码调试最佳实践

    翻译:CSDN/苏本如(id:CSDNnews),英文作者:Julia Evans 相信很多开发者对于代码调试最难的地方是什么依然云里雾里,而且这不仅仅是初学者需要面临的问题——本文中就来探讨下何为代码调试的最佳指南...以下为译文: 昨天我和一些朋友一起调试代码,他们做程序员这一行都不太久,我向他们展示了一些代码调试技巧。 今天早上我在想,我应该如何教授他们学习代码调试?...确实有时候一个bug不是我写的代码造成的!但一般来说,在一个已经验证的库和我上个月编写的代码之间,通常是我上个月编写的代码才是真正的问题所在 。...Xcode可以在你遇到断点时播放声音(并且代码不停止而继续执行下去)。我把它们放在代码中的某个位置,然后听嗡嗡的叮当声来指示代码中发生的错误”(欲知详情,请查看上面提到的推文)。...我觉得下面这一点很正确: 可调试的代码并不一定干净,而充斥着检查或错误处理的代码很少能让人愉快地阅读。

    96610

    首次适应算法最佳适应算法和最差适应算法

    关于首次适应算法最佳适应算法和最差适应算法,先看一下百度百科的解释,已经说出了三者的最大区别。...首次适应算法(first-fit): 从空闲分区表的第一个表目起查找该表,把最先能够满足要求的空闲区分配给作业,这种方法的目的在于减少查找时间。...最佳适应算法(best-fit):从全部空闲区中找出能满足作业要求的,且大小最小的空闲分区,这种方法能使碎片尽量小。...最差适应算法(worst-fit):它从全部空闲区中找出能满足作业要求的、且大小最大的空闲分区,从而使链表中的节点大小趋于均匀。...找到第二个空闲区288k>112k,分配给112k,剩余176k空闲区 为426k分配空间: 依次找寻,找到第一个大于426k的空闲区; 未找到,此作业将等待释放空间 最佳适应算法

    7.4K10

    代码审查之最佳实践

    图片来自 https://xkcd.com/1513/ 本文谈论了以下话题: 代码审查之为什么、查什么、何时查 准备好被审查的代码 代码审查的执行 代码审查实例 动机 之所以要执行代码审查(code reviews...分享知识会在几方面上帮到开发团队: 一次代码审查可以将 增、删、改 等功能性改动清楚明了地传达给团队成员,以便其开展后续的工作 审查者可以学习到提交者所使用的某种技术或算法。...易读的代码更容易复用、bug 较少,也更不易过时 意外错误 (如错别字) 及结构错误 (像是无效代码、逻辑或算法错误、性能或架构上的关注点) 经常更容易被旁观者清的挑剔审查者找出来。...在某些需要监管的环境中,即便是微小的调整也需要代码审查。 代码审核不分尊卑长幼:作为团队中最资深的人也并不意味着其代码就不需要审查。...这块代码需要集成测试吗? 有时,仅靠单元测试无法充分验证代码,特别是代码和外部系统或配置存在交互时。 代码注释,以及 commit message。

    1.1K20

    代码调试的最佳指南

    相信很多开发者对于代码调试最难的地方是什么依然云里雾里,而且这不仅仅是初学者需要面临的问题——本文中就来探讨下何为代码调试的最佳指南。 ?...今天早上我在想,我应该如何教授他们学习代码调试?我在Twitter上发了一条推文说,我从来没有见过任何好的调试代码的指南。...确实有时候一个bug不是我写的代码造成的!但一般来说,在一个已经验证的库和我上个月编写的代码之间,通常是我上个月编写的代码才是真正的问题所在 。 ?...Xcode可以在你遇到断点时播放声音(并且代码不停止而继续执行下去)。我把它们放在代码中的某个位置,然后听嗡嗡的叮当声来指示代码中发生的错误”(欲知详情,请查看上面提到的推文)。...我觉得下面这一点很正确: 可调试的代码并不一定干净,而充斥着检查或错误处理的代码很少能让人愉快地阅读。

    1.1K40

    编写优雅代码最佳实践

    Robert Martin曾说过"在代码阅读中说脏话的频率是衡量代码质量额唯一标准"。同时,代码的写法应当使别人理解它所需的时间最小化,也就是说我们写的代码是给人看的而不是给机器看的。...那么,如何编写优雅代码呢?可以从思想层面和具体技巧层面来优化代码,思想层面指的是遵循面向对象设计原则,本期介绍的是具体技巧。 1. 代码总是越短越好吗? assert((!...bucket.isOccupied()); } 减少代码行数是一个好目标,但是让阅读代码的事件最小化是个更好的目标。 2....不要使用容易误解的名字 results = Database.all_objects.filter("year<=2011") 上面这行代码结果现在包含哪些信息?...因此,我们可以用一个更加自我说明的名字,例如: void releaseRegistryHandle(registryKey key); 13.为代码中的瑕疵写注释 // TODO:采用更快算法或者当代码没有完成时

    1.6K200

    Python代码重构的最佳实践

    代码重构(Code Refactoring)是一种优化代码结构和可读性的方法,通过改进代码设计,使其更容易理解和维护,同时不会改变代码的外部行为。...重构是提高代码质量的重要手段,特别是在长期项目中,代码重构可以显著提高项目的可维护性和可扩展性。本文将详细介绍Python中的代码重构方法,涵盖重构的基本原则、常见的重构技术、工具和实际应用示例。...重构的基本原则 保持代码行为不变:重构不应该改变代码的外部行为,只是优化内部结构。 小步前进:逐步进行小的改动,每次重构后运行测试确保没有引入新的问题。...持续重构:将重构作为日常开发的一部分,而不是等到代码质量变得无法维护时再进行大规模重构。 编写测试:在重构之前,确保有足够的单元测试覆盖代码的功能,这样可以在重构后验证代码的正确性。...常见的重构技术 提取函数(Extract Function) 将代码块提取到独立的函数中,以提高代码的可读性和复用性。

    18810

    React 代码共享最佳实践方式

    虽然现在React已将其放弃中,但Mixin的确曾是React实现代码共享的一种设计模式。...而React团队觉得组件的最佳写法应该是函数,而不是类,由此产生了React Hooks。 React Hooks 的设计目的,就是加强版函数组件,完全不使用"类",就能写出一个全功能的组件。...Hook 优缺点 优点 更容易复用代码; 清爽的代码风格; 代码量更少; 缺点 状态不同步(函数独立运行,每个函数都有一份独立的作用域) 需要更合理的使用useEffect 颗粒度小,对于复杂逻辑需要抽象出很多...hook 总结— 除了Mixin因为自身的明显缺陷而稍显落后之外,对于高阶组件、render props、react hook而言,并没有哪种方式可称为最佳方案,它们都是优势与劣势并存的。...只有切合自身业务的方式,才是最佳方案。

    3K20

    编写优雅代码最佳实践

    Robert Martin曾说过"在代码阅读中说脏话的频率是衡量代码质量额唯一标准"。同时,代码的写法应当使别人理解它所需的时间最小化,也就是说我们写的代码是给人看的而不是给机器看的。...那么,如何编写优雅代码呢?可以从思想层面和具体技巧层面来优化代码,思想层面指的是遵循面向对象设计原则,本期介绍的是具体技巧。 1. 代码总是越短越好吗? assert((!...bucket.isOccupied()); } 减少代码行数是一个好目标,但是让阅读代码的事件最小化是个更好的目标。 2....不要使用容易误解的名字 results = Database.all_objects.filter("year<=2011") 上面这行代码结果现在包含哪些信息?...因此,我们可以用一个更加自我说明的名字,例如: void releaseRegistryHandle(registryKey key); 13.为代码中的瑕疵写注释 // TODO:采用更快算法或者当代码没有完成时

    42020

    代码阅读方法与最佳实践

    “他山之石、可以攻玉”,通过仔细阅读并学习本文,可以快速地提高读者代码阅读的技能与技巧,进而从现有的优秀代码算法、构架、设计中汲取营养,提高自身的开发与设计能力。...我们只有通过编写代码才能交付真正满足用户需求的东西:代码才是现实的、实在的、踏实的。...由此及彼地类比,我们可以容易理解到:编写伟大代码的方式是阅读代码,阅读大量的代码:高品质的代码、低品质的代码; 汇编语言代码、C 代码、C++代码、Java 代码、PHP代码、Go 代码、Kotlin...代码、TypeScript 代码、Haskell代码、Lisp 代码,千里之外的陌生人所写的代码,以及我们自己上周刚刚编写的代码。...就像阅读高品质的散文能够丰富词汇、激发想像力、扩展思维一样,分析设计良好的软件系统的内部结构可以学到新的构架模式、数据结构、编码方法、算法、风格和文档规范、应用程序编程接口(API),甚至新的计算机语言

    71820

    回溯算法最佳实践:合法括号生成

    关于回溯算法,我们前文 回溯算法套路框架详解 反响非常好,读本文前应确保读过那篇文章,这样你就能够进一步了解回溯算法的框架使用方法,本文可作为回溯算法最佳实践。...下面就来手把手实践一下回溯算法框架。 回溯算法思路 明白了合法括号的性质,如何把这道题和回溯算法扯上关系呢?...算法的复杂度是多少呢?这个比较难分析,对于递归相关的算法,时间复杂度这样计算[递归次数]x[递归函数本身的时间复杂度]。...backtrack就是我们的递归函数,其中没有任何 for 循环代码,所以递归函数本身的时间复杂度是 O(1)。 但关键是这个函数的递归次数是多少?...我们前面怎么分析动态规划算法的递归次数的?主要是看「状态」的个数对吧。其实回溯算法和动态规划的本质都是穷举,只不过动态规划存在「重叠子问题」可以优化,而回溯算法不存在而已。

    76310

    如何选择最佳的最近邻算法

    人工神经网络背景 KNN是我们最常见的聚类算法,但是因为神经网络技术的发展出现了很多神经网络架构的聚类算法,例如 一种称为HNSW的ANN算法与sklearn的KNN相比,具有380倍的速度,同时提供了...在本文中,我将演示一种数据驱动的方法,通过使用出色的an-benchmarks GitHub存储库,确定哪种ANN算法是自定义数据集的最佳选择。 ?...在此数据集上,scann算法在任何给定的Recall中具有最高的每秒查询数,因此在该数据集上具有最佳算法。 ? 总流程 这些是在自定义数据集上运行ann-benchmarks代码的步骤。...3.更新datasets.py以处理您的自定义DataFrame 我们需要更新ANN基准代码,编写我们的新的DataFrame处理代码。...总结 总之,通过使用ann-benchmarks,并编写一些自定义的代码,我们可以 在自己的自定义数据集上测试大量的ANN算法,以缩小筛选范围,以进一步探索。

    1.9K30

    贪心算法(三)——最佳合并模式

    外排序算法是将多个有序文件合并成一个有序文件的过程。 2. 在一次合并的过程中,两个文件中的所有记录都需要先从文件中读入内存,再在内存中排序,最后将排序的结果写入文件中。 3....这个问题可以用哈夫曼算法解决。 哈夫曼算法 思路 若要使得带权外路径长度最小,可以将权值大的节点尽量靠近根节点,这样路径短一些;而权值小的节点可以适当远离根节点,因为权值小,外路径稍微长一点也没事。...伪代码 用一个优先权队列存储所有的初始节点; 从队列中选出两个权值最小的节点,将它们的和作为它们的根节点,并放入队列中; 循环这个过程,直到队列中只有一个节点为止,此时具有最小带权路径的扩充二叉树构造完毕...代码实现 /** * 构造二叉树的节点类 */ class TreeNode{ int val; TreeNode left; TreeNode right; TreeNode

    1.8K100

    代码还可以这么复用——适配器模式

    对象适配器中,适配器类通过在类中实例化一个适配者类的对象,并将其封装在客户所需功能的接口里,达到最终的适配目的。 03 适配器模式代码实例 Jungle曾经在一个项目里多次使用了适配器模式。...pathPlanner->calculate(); } private: DxfParser *dxfParser; PathPlanner *pathPlanner; }; 客户端代码示例及效果...Controller *controller = new Adapter(); controller->pathPlanning(); system("pause"); return 0; } 上述代码运行结果如下...: 04 适配器模式总结 优点: 将目标类和适配者类解耦,引入一个适配器类实现代码重用,无需修改原有结构; 增加类的透明和复用,对于客户端而言,适配者类是透明的; 对象适配器可以把不同适配适配到同一个目标...(对象适配器); 缺点: 对编程语言的限制:Java不支持多重继承,一次最多只能适配一个适配者类,不能同时适配多个适配者类; 适用环境: 系统需要使用一些现有的类,但这些类的接口不符合系统需要,或者没有这些类的源代码

    27530

    十款性能最佳的压缩算法

    本文会为你介绍6种不同的无损数据压缩算法,以及4种基于深度学习的图像/视频压缩算法。 6款无损数据压缩算法 无损压缩算法通常被用于归档或其他高保真目的。...这些算法能够让你在确保文件可被完整恢复的同时减少文件大小。有很多种无损压缩算法供你选择。下面介绍6种常用的算法。 1. LZ77 LZ77算法发布于1977年。...首个基于MLP的算法于1988年被提出,目前已经被应用到: 二进制编码——标准的双符号编码 量化——限制从连续集到离散集的输入 特定领域内的转换——像素级的数据变更 MLP算法利用分解神经网络上一步的输出来确定最佳的二进制码组合...当解码的时候,算法基于这些特征来重建图像。和基于CNN算法相比,基于GAN的压缩算法通过消除对抗损失能够产生更高品质的图像。 总结 压缩算法能够帮助你优化文件大小。不同的算法有不同的结果。...本文简述了6种静态的无损压缩算法以及4种基于深度学习的压缩算法。当然,如果这些算法都不适用于你的场景,你可以查看这篇文章来寻找适合你场景的算法算法有很多,总有一款适合你!

    6.9K10
    领券