关于ydui移动端⾃适应的⽅案
1、注意
⽂字较多，看前请喝⽔；
2、rem是什么？
2.1、rem (font size of the root element) 是相对根元素 的字体⼤⼩变化⽽变化的css单位，实现强⼤的屏幕适配布局是它的优势；所以不同屏幕⼤⼩的终端，它的根元素 的字体⼤⼩是需要相应变化的，⼀般由 JS 控制或者 media query 控制；
本⽂不考虑 media query ⽅式，因为Android太多分辨率了，嗯~ 不说了…
2.2、既然 rem 是⼀个css单位，编写样式的时肯定得将设计图中的px转为rem，怎么转换取决于你的脚本怎么控制，于是有了本⽂；
3、需要解决的问题
3.1、如何根据不同⼤⼩的屏幕修改根元素 的字体⼤⼩？
3.2、写样式时，如何将设计MM给的图轻松转换为css对应的rem？
4、解决⽅案
4.1、ydui.flexible.js 是处理移动端 rem ⾃适应（可伸缩布局⽅案）的类库，⽆须第三⽅⼯具（如Sass/Less⽅法、Gulp、Sublime插件），轻松⼝算设计稿对应rem值；
4.2、ydui.flexible.js 源码：
/**
YDUI 可伸缩布局⽅案
rem计算⽅式：设计图尺⼨px / 100 = 实际rem 【例: 100px = 1rem，32px = .32rem】
*/
!function (window) {
/* 设计图⽂档宽度 */
var docWidth = 750;
焉知非福是什么意思var doc = window.document,
docEl = doc.documentElement,
resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’;
var recalc = (function refreshRem () {
var clientWidth = BoundingClientRect().width;
/* 8.55：⼩于320px不再缩⼩，11.2：⼤于420px不再放⼤ */
docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
return refreshRem;
})();
/* 添加倍屏标识，安卓为1 */
docEl.setAttribute(‘data-dpr’, window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
/* 添加IOS标识 /
doc.documentElement.classList.add(‘ios’);
/ IOS8以上给html添加hairline样式，以便特殊处理 */
if (parseInt(window.navigator.appVersion.match(/OS (\d+)(\d+)?(\d+)?/)[1], 10) >= 8)
doc.documentElement.classList.add(‘hairline’);
}
if (!doc.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded’, recalc, false);
}(window);
5、啰嗦⼏句
5.1、ydui.flexible.js 简单粗暴，建议对需要响应页⾯⼤⼩的任何元素都使⽤ rem 作为单位来定义（除第七点注明的⼀些CSS属性外）；啊啊啊，那字体字号不是会出现13、15px啦？那不是很奇葩？⽴马掏出我的测试JJ看看，嗯~还是⾮常美好的！
5.2、对于倍图，争议较多，因为如果要做到对应倍图的话，意味着图⽚都需要做三份，成本太⾼了，所以只取2倍图；
实在是⾮常低成本还原的⽅案，未尝不可；
当然也提供了data-dpr标识；
5.3、写死viewport，采⽤scale=1.0，IOS和安卓⼀视同仁；
实际使⽤时，百度地图或者第三⽅地图也是不⽀持⾼清⽅案的；
处理1像素边框采⽤ transform: scale(0.5); ⽅式实现，IOS8及以上直接使⽤0.5px边框；
_
5.4、图标⽅⾯，单⾊图标尽量使⽤ 字体图标；多⾊图标使⽤ 单张图⽚，不使⽤雪碧图（也没发现淘宝触屏版哪⾥⽤了雪碧图）；
5.5、对于 ⼤于320px且⼩于420px 宽度的设备进⾏ 等⽐缩放，其他宽度的设备 不做缩放处理；
若未设置页⾯最⼤宽和最⼩宽，字体过⼤或过⼩会导致页⾯丑陋，⽐如在pad或PC上，但实际⼿机尺⼨也不会过⼤或过⼩；
6、使⽤⽅法
6.1、在所有资源前加载 ydui.flexible.js；
小学二年级数学期末试卷在⼊⼝页⾯的 head 标签内引⼊（不建议在⼊⼝⽂件 main.js 中引⼊）；
6.2、把视觉稿中的px转换成rem；
rem计算⽅式：设计图尺⼨px / 100 = 实际rem 【例: 100px = 1rem，32px = 0.32rem】；
特别注意：是不需要再除以2的
6.3、⽆论设计图什么尺⼨，算法⼀致。但需修改 ydui.flexible.js 中 docWidth 变量为设计图宽度；默
认设计图⽂档宽度为750px；
7、⼀些不使⽤rem的CSS属性
7.1、包括但不限于：border-width、border-radius、box-shadow、transform、background-size；百度云盘资源搜索
8、与淘宝lib-flexible的区别
8.1、计算⽅⾯，淘宝把视觉稿分成100份来看待，为了以后兼容vh，vw单位，但是计算相对⿇烦；
有什么生意赚钱例如：设计图⽂档宽度为750px，按钮⾼度为80px，对应rem则为 80 / 75 ≈ 1.0666666667rem，不借助第三⽅⼯具的话，计算还是有⼀定难度；
8.2、处理字号⽅⾯，淘宝不推荐⽤rem作为字号单位，配合⽤data-dpr属性来区分不同dpr下的字体⼤⼩，但⼿写这些差异肯定不现实，得依赖第三⽅⼯具；
来⾃淘宝 lib-flexible：“针对OS 9_3的UA，做临时处理，强制dpr为1，即scale也为1，虽然牺牲了这些版本上的⾼清⽅案，但是也只能这么处理了”；情侣个性名字
8.3、采⽤动态修改 viewport 中 scale 的值达到缩放效果，但在PC上浏览就会出现轻度模糊；
东北四省你有病啊？不是移动端开发么？但个⼈调试代码还是在PC上，强迫症患者难受啊！
9、总结
9.1、编写样式时，只需将设计MM给的图中各元素尺⼨的 px 除以 100 得到 rem 写进你的样式⽂件⾥即可；
前提需保证 ydui.flexible.js 中 docWidth 变量与设计图宽度⼀致；
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论