APP开发中的总结（前端）

最新推荐文章于 2022-08-30 10:03:05 发布

原创最新推荐文章于 2022-08-30 10:03:05 发布 · 1.6w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #APP #border #object-fit #字体

前端技术类专栏收录该内容

2 篇文章

订阅专栏

博主分享APP开发项目收获。包括APP中像素取值为2倍，Android和iOS对border支持有差异及兼容方法；商品列表图片用img标签和object-fit:cover实现正方形效果；还给出手机自适应字体代码避免失真，后续会持续更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚做完一个app开发的项目，在开发中收获颇多！

1、在APP中，像素（PX）取值是2倍的取值，因此，我们在开发中2px在APP中写为1px;

可border：1px solid #000;在Android中不支持border：0.5px solid #000;Ios支持。针对这个兼容可采用：

2、商品列表图片，img标签显示正方形效果的做法（可使图片不会压缩，可像背景图一样显示）：

使用img标签的宽度和高度是一致的，另外需要用到一个关键的css属性——object-fit:cover；

直接上图

3.手机自适应字体-避免失真

(function(doc, win) {
       var docEl = doc.documentElement,
           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
           recalc = function() {
               var clientWidth = docEl.clientWidth;
               if(!clientWidth) return;
               docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; //其中“20”根据你设置的html的font-size属性值做适当的变化
           };

       if(!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
   })(document, window);

4.后期会持续更新！