移动端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中就可以了

Answer 2

width=750px我理解为强行把各个浏览器的宽都变成750px，在切页面的时候全部都是取设计稿的实际像素值，也就是说一般固定750px之后给你的设计稿宽度也应该是750px，比如元素用定位的时候设计稿中元素左边是多少像素那left就是多少像素。rem则可以通过less来编译，我也是个新手，就我目前用下来的情况就是rem做那种元素铺满整个屏幕的情况下比较实用，固定宽在做项目的时候由于每个手机屏幕的高度不同需要有一个最小的内容区域，而rem则不需要。

Answer 3

安利一个工具，楼主试试
http://imochen.github.io/hotcss/

Answer 4

手机端默认一个rem = 16px 因为考虑到不同平台的差异性,所以根据起大小做匹配兼容性会好一些

Answer 5

区别应该是在Android和IOS上吧，rem的方法一般Android上把dpr当做是1，不进行缩放，IOS上根据dpr进行缩放，而固定宽度的是根据设备宽度缩放，所以无论Android上还是IOS上都会缩放

Answer 6

以前遇到过一个问题当指定content宽度的时候; 有的安卓机点击input的时候会把整个页面放大; 原因也就是这样无法设置缩放比例