挪动端h5回应式计划方案近期这几年用得数最多的数最多的便是rem计划方案了。这个必须测算根元素的font-size来完成回应式。
但这类计划方案也是有1个缺陷，那便是font-size不为整数金额的情况下1些字体样式应用rem企业会致使字体样式显示信息的尺寸有难题，对视觉效果复原规定较为高的新项目来讲这還是令前端开发开发设计挺头疼的1件事的。
处理前端开发回应式不过便是在不一样的机器设备下能够一切正常展现，这里详细介绍1种不必须rem方法的回应式计划方案。立即应用px，这里说的是根据750px的设计方案稿。设计方案稿中你量出来是是多少px，款式中
立即写是多少px。这样是否很便捷，也不必须rem换算。
- transform
- transform-origin
这里实际上便是用到了transform的scale放缩网页页面尺寸来完成回应式。
关键编码：
let screenMatch = () => {
document.body.style.setProperty('visibility', 'hidden')
let page = document.getElementById("page");
let _scale = window.outerWidth/750;
page.style.setProperty("transformOrigin", "0 0");
page.style.setProperty("transform", "scale("+ _scale + ")");
//适配ios8
page.style.setProperty("-webkit-transform-origin", "0 0");
page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
setTimeout(() => {
page.style.setProperty("transformOrigin", "0 0");
page.style.setProperty("transform", "scale("+ _scale + ")");
//适配ios8
page.style.setProperty("-webkit-transform-origin", "0 0");
page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
document.body.style.setProperty('visibility', 'visible')
}, 100);
}
screenMatch();
window.onresize = screenMatch;
上述编码中id为page的是全部网页页面元素刚开始的跟连接点，body下的第1个元素。这里body/html要设定min-height:100%;height:100%;
实际上大家在小程序流程中还可以应用px企业，可是小程序流程中应用transform的情况下会有1些字体样式锯齿的bug，最终换了zoom特性就行了，另外应用-webkit-zoom做适配。关键编码跟h5的区别不大同市样放的是放缩尺寸。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。