移动端响应式布局总结

rem方案

这个属于兼容性最好的方案,但是在2022年的今天，基本上主流浏览器都支持vw,vh,所以这个方案其实可以淘汰了，但是耐不住太经典了，还是有了解的必要的，此外，这个方案要说还有什么优点的话，那就是灵活性。可以自主换算单位、

这是阿里巴巴团队对于这个方案的详细解释，想详细了解的可以看看#移动端适配总结 这个是我自己写的对于这个方案的简单实现，可以帮助理解原理。实际项目如果想用请直接使用: flexible.js+postcss-pxtorem

 function refreshRem() {
            const dpr = window.devicePixelRatio.toFixed(0);
            // 创建meta标签，并让布局视口等于可视视口
            // 然后进行缩放，让布局视口等于物理像素的大小
            // 物理像素大小 = device-width(可视视口，也叫屏幕分辨率) * dpr
            let metaEl = document.querySelector('meta[name="viewport"]');
            if (!metaEl) {
                metaEl = document.createElement('meta');
                metaEl.setAttribute('name', 'viewport');
                window.document.head.appendChild(metaEl);
            }
            metaEl.setAttribute('content',`width=device-width,initial-scale=${1/dpr}, maximum-scale=${1/dpr}, minimum-scale=${1/dpr}, user-scalable=no`);
             // 获取文档对象(根元素）
            const docEl = document.documentElement;
            // 获取视图容器宽度
            const docWidth = docEl.clientWidth;
            // rem 取值为视图容器宽度的100分之一大小
            const rem = docWidth / 100 * dpr;
            // 设置 rem 大小
            docEl.style.fontSize = rem + 'px';
            docEl.setAttribute('data-dpr', dpr);
 }
 refreshRem();

viewport方案

这个就很容易理解了，什么都不用做就可以直接使用vw,vh

在iphone6下，1vw = 375 / 100 = 3.75px 这就有带来一个困扰，换算太麻烦了，比如二倍(750px)设计图上的一个100px方块，要转换成px,就是100 / (750 / 375) = 50px，转换成px还算简单，二倍图就除以2就行了(同理三倍图就除以三)，vw呢， 就是50px / 3.75px = 13.3vw,也就是在除2的基础上在除以3.75。这就难算了。

那有没有不用操心这些东西的做法？当然有！！！,自己算太难了，那就让别人帮我们算呗。这就是需要用到大名鼎鼎的postCSS平台下的一个插件postcss-px-to-viewport,有了它我们就不用自己换算单位。具体怎么使用看文档就行了，非常easy