移动端rem布局 和 meta标签 content="width=750"里面用px布局的区别？

Question

meta 标签里面 content="width=750" 里面用 px 布局也可以自动缩放，rem 布局也可以，两者有什么区别？怎么可以看到效果，淘宝用 rem 肯定是有原因的。今天被要求 content 写成 750 里面用 px 直接写，这样会出现什么问题？

Answer 1

rem是相对于html的字体的大小的，如果html的fontSize:10px， 那么1rem就等于10px；所以说整个页面都用rem布局，如果当屏幕大了，你只需要改html的fontSize是多少，整个页面就可以跟着放大或者缩小了。一般写移动端页面都会根据宽度来设置html的fontSize的大小。用一个闭包函数就可以解决自适应移动端页面的写法。

<script type="text/javascript">
      (function (win,doc) {        function setSize() {
          doc.documentElement.style.fontSize=20*document.documentElement.clientWidth/375+'px';
        }
        setSize();
        win.addEventListener('resize',setSize,false)
      })(window,document)  </script>

把这个放在页面head中就可以了