移动端rem距离单位的使用

前端开发 作者: 2024-08-20 06:45:01
在做移动端开发的时候大家肯定会遇到适配问题,手机的屏幕大小有非常多的类别,使用传统的px距离单位已经无法满足我们的需要,于是rem便横空出世,他与百分比定位是比较像的,但是也是有一定的区别,在这里就跟
1rem = 100px
(function(doc,win) {
  var docEl = doc.documentElement,resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",recalc = function() {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    if (clientWidth > 750) {
      docEl.style.fontSize = "100px"; // 修正一下大于750的字体大小为100px
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
    }
    /*
     * 100 -> html,body {  font-size:100px; }
     * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
     * 根据具体情况改变这两个数值
     */
  };

if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt,recalc,false);
    doc.addEventListener("DOMContentLoaded",false);
})(document,window);
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65375.html