移动端“响应式布局”’--rem

使用目的：为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位。

方法一：

1、在页面引入js，获取屏幕大小，更新rem基准。

  (function () {

      var currentWidth = document.documentElement.clientWidth || document.body.clientWidth

      nFont = currentWidth * 50 / 375;

      if (nFont > 50) {

        nFont = 50

      }

      getHtml = document.getElementsByTagName('html')[0]

      getHtml.style.fontSize = nFont + 'px';

    })();

2、设计稿除以100，得到实际尺寸。如（1920px -> 192rem）

方法二：

原理：rem是相对于根元素<html>，这就意味着，我们只需要在根元素确定一个px字号（一般是UI设计师提供--设计稿寄出宽度一般为750px或640px,基础字体一般为75px或75px），则使用在线rem转换网站，就可以将px转rem。

使用方法：（以设计稿为750px,基础字体为75px为例）

1、首先引入app.js

(function(win) {

        var docEl = win.document.documentElement;

        var time;

        function refreshRem() {

                var width = docEl.getBoundingClientRect().width;

                if (width > 540) { // 最大宽度

                        width = 540;

                }

                var rem = width / 5; // 将屏幕宽度分成10份， 1份为1rem

                docEl.style.fontSize = rem + 'px';

                ///rem用font-size:75px来进行换算

                // 40/75

                // 20/37.5

        }

        win.addEventListener('resize', function() {

                clearTimeout(time);

                time = setTimeout(refreshRem, 1);

        }, false);

        win.addEventListener('pageshow', function(e) {

                if (e.persisted) {

                        clearTimeout(time);

                        time = setTimeout(refreshRem, 1);

                }

        }, false);

        refreshRem();

})(window);

//getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，他返回的是一个对象，即Object,有6个属性 top 、bottom、right、left、width和height

//以前getBoundingClientRect()是IE特有的，目前FF3+，opera9.5+，safari 4，都已经支持这个方法。

//onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

//为了查看页面是直接从服务器上载入还是从缓存中读取，可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 true，否则返回 false

/**

 * Created by Administrator on 2017/6/16.

 */

2、先用px写，写完了就用在线工具，将px转成rem即可。

巴特西

移动端“响应式布局”’--rem

最新文章

热门文章