关于移动端css用rem单位的情况

写移动端的页面有一些了

试用过的方法大概总结一下：

1、字号单位px，宽度写百分数，高度写定值px

2、在css中用@media写媒体查询，以iphone6 为分界，字号单位用rem，宽度写百分数，高度尽量用padding，不要给定值（防止用户在浏览器中自动调节字号大小，使页面错乱）

3、就是本文想说的重点方法，用js算一下基本字号的大小，字号，宽度和高度，所有单位都用rem换算。(假如，你想做一个以下的类似这样的手机活动页，花圈部位为可替换)


写法(如果设计图是640尺寸的，当js中设置除以6.4，那css中，如果字号在设计图中是24px，那么css就写成0.24rem除以100就ok了，如果宽度是100px；那就写width:1rem;)：

<script>
        var deviceWidth = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = deviceWidth / 6.4+ 'px';
 </script>

如果不想让图片随屏幕大小无线放大，还可以给一个限制如下

<script>
        var deviceWidth = document.documentElement.clientWidth;
        if(deviceWidth > 340){
            deviceWidth = 340;
        } else if(deviceWidth < 320){
            deviceWidth = 320;
        }
        document.documentElement.style.fontSize = deviceWidth / 6.4+ 'px';
</script>