详解px单位html5响应式方案

移动端h5响应式 方案 最近这几年用得最多的最多的就是rem方案了。这个需要计算根元素的font -s ize来实现响应式。

但这种方案也有一个缺点，那就是font-size不为整数的时候一些字体使用rem单位会导致字体显示的大小有问题，对视觉还原要求比较高的项目来说这还是令前端开发挺头疼的一件事的。

解决前端响应式无非就是在不同的设备下可以 正常 展示，这里介绍一种不需要rem方式的响应式方案。直接使用px，这里说的是基于750px的设计稿。设计稿中你量出来是多少px，样式中

直接写多少px。这样是不是很快捷，也不需要rem 换算 。

transform transform-ori gin

这里其实就是用到了transform的scale缩放页面大小来实现响应式。

核心代码：
&nbs p;

let screenMatch = () => {
            document.body.style.set PR o PE rty('visibil IT y', '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  -t ransform-origin", "0 0");
            page.style.setProperty("-webkit-trans From ", "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-transf rom ", "scale("+ _scale + ")");
                document.body.style.setProperty('visibility', 'visible')
            }, 100);

        }
        screenMatch();
        window.onresize = screenMatch;

上述代码中id为page的是整个页面元素 开始 的跟节点，body下的第一个元素。这里body/ht ML 要设置min-h ei ght:100%;height:100%;

其实我们在小程序中也可以使用px单位，但是小程序中使用transform的时候会有一些字体锯齿的bug，最后换了zoom属性就好了，同时使用-webkit-zoom做兼容。核心代码跟h5的差别不大同样放的是缩放大小。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是 为你收集整理的 详解px单位html5响应式方案 全部内容，希望文章能够帮你解决 详解px单位html5响应式方案 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于详解px单位html5响应式方案的详细内容...