微信小程序的像素大小使用rpx，rpx换算px屏幕宽度/750。
传统的自适应布局有几种：
响应式，根据屏幕大小配置多个样式文件。
使用em,rem.rem是页面的font-size尺寸，不同的页面设置不同的font-size。
???(function winInitFontSize(){ ???????????window.onresize = initFontSize; ???????????function initFontSize(){ ???????????????var winWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width; ???????????????//rem的基数设置大一点，可以减少误差 ???????????????document.getElementsByTagName("html")[0].style.fontSize = ((winWidth > 750 ? 750 : winWidth)/750) * 100 + ‘px‘; ???????????} ???????????initFontSize(); ???????})();使用百分比或者flex，铺满屏幕，高度字体还使用px.
scale通过拉伸缩小页面自适应。直接写死viewport的宽度。这种方式不可以设置minimum-scale=1.0。
<meta name="viewport" content="width=375, user-scalable=no">
使用类似rpx的方式：
?width: calc((100vw / (750/16)) - 0.1px); ?height: calc((100vw / (750/30)) - 0.1px);
假如利用sass倒是可以设置变量，不用一条一条这样写。只是这种在浏览器中，有时会大得可怕。因为100是浏览器的宽度，而不是可使用的宽度。而将100vw写成100%会不起效果。可能100%是动态的，导致不起作用。
有新的收获了再来更新文档。
网页自适应的几种方式。
原文地址：http://www.cnblogs.com/wlxll/p/7978478.html