移动端开发rem单位

1、用js计算

<script>

        (function (doc, win) {

          var docEl = doc.documentElement,

            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

            recalc = function () {

              var clientWidth = docEl.clientWidth;

              if (!clientWidth) return;

              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

            };

          if (!doc.addEventListener) return;

          win.addEventListener(resizeEvt, recalc, false);

          doc.addEventListener('DOMContentLoaded', recalc, false);

        })(document, window);

</script>

2、媒体查询 “@media”

@media only screen and (max-width: 320px){html{font-size: 9px;} }

@media only screen and (min-width: 320px) and (max-width: 352px){html{font-size: 10px;} }

@media only screen and (min-width: 352px) and (max-width: 384px){html{font-size: 11px;} }

@media only screen and (min-width: 384px) and (max-width: 416px){html{font-size: 12px;} }

@media only screen and (min-width: 416px) and (max-width: 448px){html{font-size: 13px;} }

@media only screen and (min-width: 448px) and (max-width: 480px){html{font-size: 14px;} }

@media only screen and (min-width: 480px) and (max-width: 512px){html{font-size: 15px;} }

@media only screen and (min-width: 512px) and (max-width: 544px){html{font-size: 16px;} }

@media only screen and (min-width: 544px) and (max-width: 576px){html{font-size: 17px;} }

@media only screen and (min-width: 576px) and (max-width: 608px){html{font-size: 18px;} }

@media only screen and (min-width: 608px) and (max-width: 640px){html{font-size: 19px;} }

@media only screen and (min-width: 640px){html{font-size: 20px;} }

秒客网

移动端开发rem单位

相关文章