rem移动端设计方案

rem设计方案

原理和思路

一套代码 一个布局适应所有移动端

<meta name = "viewport" content = "width=device-width, initial-scale = 1.0,minimum-scale = 1.0,maximum-scale = 1.0,user-scalable = no">
//user-scalable = no 禁止用户手指头放大缩小

以一个简单iPhoneX移动端界面为例

下面是需要注意的几点

​ 1.以最大像素为基础，720px，那么所有移动端屏幕都可以适用
​ 2.整体布局默认不设置宽度，默认100%自动填满
​ 3.父元素一般不设置高度，由子元素撑起来
​ 4.移动端不考虑放大，考虑缩小
​ 5.图片只设置width:100%,其余不用设置，自适应盒子的大小
​ 6.文字依然以rem为单位，等比例的放大，缩小
​ html的font-size 设置为整数，比较好计算 例如：50px 100px

​ 7.所有的布局均使用flex布局来用,不再使用width百分比，float布局了

下面是一段用来配合rem做移动端适配的js函数代码

​    // 立即执行函数
​    // 做移动端适配 配合rem
​    // 找到最大尺寸720px
​    // 当大于720px html的font-size设置为100px 几乎兼容所有的大显示器。
​    // 考虑问题，屏幕缩小的时候，让HTML的fon-size是一个动态的值，并且与视图窗口大小有关，这样就实现了响应式。
​     (function (window, document) {
​    //   因为UI标准的设计稿标准的一倍图以375px为标准，为了找到规律，尽可能小的误差，所以就写 viewWidth = 750px
​      var viewWidth = 750;
​      var pick = viewWidth / 100;
​      var mode = "resize";
​      function change() {
​        var view = document.documentElement.clientWidth || window.innerWidth;
​    // 如果视图窗口宽度大于720px
​        if (view >= 750) {
​          document.getElementsByTagName("html")[0].style.fontSize = 100 + "px";
​          return;
​        }
​    // 否则设置html的font-size为动态的值 = 视图窗口宽度 / 100px
​        document.getElementsByTagName("html")[0].style.fontSize =
​          view / pick + "px";
​      }
​      window.addEventListener(mode, change, !1);
​      window.document.addEventListener("DOMContentLoaded", change, !1);
​    })(window, document);
​    </script>




============