PC端和移动端 自适应和响应式布局的要点

PC端和移动端 自适应和响应式布局的要点

1.手机端自适应js代码

<script>

    function resize() {

        var oHtml = document.getElementsByTagName("html")[0];

        var screenW = document.documentElement.offsetWidth || document.body.offsetWidth;

        var initW = 1920;

        oHtml.style.fontSize = 100 * screenW / initW + "px";

    }

    window.addEventListener("resize", function() {

        clearTimeout(b),

            b = setTimeout(resize, 0)

    }, !1);

    var b = null;

    resize();

</script>

其中initW 参数记得修改为设计图的大小尺寸

2.设置body里font-size=100px; 之后每100px可以用1rem来代替实现

3.pc端浏览器窗口的缩小化可以使用：

• rem来控制大小
• 百分比控制大小
• 根据一定最小宽度进行样式改变

4.移动端的改变多用以下方法：

• rem控制
• 百分比控制
• 最大宽度最小宽度和高度等