Flexible适配方案 最早的文章，是15年阿里手淘团队的移动端适配方案。 设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变)。 前端开发人员通过一套适配规则自动适配到其他的尺寸。 先了解一些基本概念 视窗viewpor ...
分类：
移动开发 时间：
2018-12-29 18:38:50
阅读次数：
256
本文只以移动设备为例说明。 注意：设计师以iphone6为标准出设计稿的话，1rpx=0.5px=1物理像素。Photoshop里面量出来的尺寸为物理像素点。所以可以直接使用标注尺寸数据。 【像素Pixel】像素是图像的基本采样单位，它不是一个确定的物理量，因为像素点的物理大小是不确定的。如图: 【 ...
分类：
其他好文 时间：
2018-12-20 14:37:12
阅读次数：
2228
此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果链接在文章底部贴出。 在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了 ...
分类：
Web程序 时间：
2018-11-29 20:15:38
阅读次数：
205
1.rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。 无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。 微信小程序同时也支持rem尺寸单位， ...
分类：
微信 时间：
2018-11-27 12:28:40
阅读次数：
168
前言： 最近自己写的wap老项目要嵌入别人家的app里，然后就OMG的了，适配出了问题，网页上一切正常的，自家app也没问题，咋个嵌入app就出问题了？于是陷入了深思。。。 以前为了遵循设计稿（750），用了祖传代码： 注：一下所有关于像素的计算都是以iphone6(375px)为例，帮助理解 其实 ...
分类：
其他好文 时间：
2018-11-23 14:19:28
阅读次数：
183
一、准备 界面：模拟器（iphone6标准）、编辑器、调试器； 编译：普通编译、添加编译模式（调试某个页面）、 详情（选择开发版本、是否验证合法域名） 二、代码构成 最简单的小程序 1、JSON 配置 1.1小程序配置 app.json 用来对微信小程序进行全局配置 小程序配置 https://de ...
分类：
微信 时间：
2018-11-20 16:28:45
阅读次数：
238
今天要给大家分享的是SVGSprites(也叫雪碧图)，所谓雪碧图，当然就不是我们常喝的雪碧饮料（Sprites）哦，哈哈～ 当下流程的移动端，手机型号太多太多，今天工作项目中突然发现还有同事在使用以前大家曾经包括现在还很熟悉的CSS图片精灵，被我们的测试MM找来说图片在iphone6、iphoneplus、i
分类：
其他好文 时间：
2018-11-05 20:03:25
阅读次数：
210
1、引入阿里的 lib-flexible 库，它会自动根据移动端设备的缩放比自动设置meta viewport标签，然后自动设置html根元素的font-size值，然后我们还是要根据一般iphone6的比例来自己计算成rem。2、采用vw单位，vue项目中可以使用 postcss-px-to-vi ...
分类：
移动开发 时间：
2018-11-05 10:11:40
阅读次数：
232
1.在client_index.html文件中添加如下代码： 2.创建image文件夹，添加引导图的图；创建css文件夹，引入mui.min.css、mui.css；创建js文件夹，引入mui.js文件、mui.min.js文件等。 3.添加引导页面 guide.html，代码如下： 注意：要将gu ...
分类：
移动开发 时间：
2018-10-31 11:23:48
阅读次数：
422
1. 尽量采用flex 布局，指定flex-direction是row( 从左到右）还是column （从上到下） 特别要记得写 flex-wrap: wrap; 不然超出屏幕部分不会换行 2. 美工设计是按Iphone6, 750px*1334px的尺寸设计。切图的尺寸对应wxss里的rpx， 1 ...
分类：
微信 时间：
2018-10-21 10:19:19
阅读次数：
1330
