傻瓜式移动端适配——媒体查询和rem

一、当只有两套设计图的情况下，一套pc 一套移动端

（一般为了用户体验更好，不会只有一套设计图）

1、禁止移动端缩放，且让屏幕layout viewpoint 横向css像素=屏幕横向的dips（定值）

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">
           

2、动态设置html的字体大小以使用rem

乘以100让1rem = 100px，而不是 1rem=0.5px 字体大小如果小于12px（谷歌浏览器最小字体，小于12的强制设为12，所以需要乘以100）计算容易出错

问题代码: 无法实时响应移动端窗口变化来更新rem，必须刷新窗口

function setFontSize(){

          if (document.documentElement.clientWidth < 1200) {

              document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';

              //clientWidth是当前屏幕的大小 document.documentElement.style.fontSize 是html元素的字体大小 决定rem的单位大小

          }

      }

      window.onresize = setFontSize(); //调整大小时设置值一次

      window.onload = setFontSize(); //刷新时也要设置值一次

           

//不行 事件必须是匿名函数！

解决方法：

window.onresize = function() {

            if (document.documentElement.clientWidth < 1200) {

              document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';

            }

        };

        window.onload = function () {

            if (document.documentElement.clientWidth < 1200) {

              document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';

            }

        };
           

3、媒体查询动态查询屏幕大小加载不同的css模块 

@media screen and (max-width:1200px){

    ...css代码

} //当屏幕最大为1200px时，即屏幕小于1200px时 =>运用移动端的css方案

@media screen and (min-width:1200px){

    ...css代码

} //当屏幕最小为1200px时，即屏幕大于1200px时 =>运用pc端的css方案