移动端布局 rem

/*
    # 按照宽高比例设定html字体, width=device-width initial-scale=1版
    # @pargam win 窗口window对象
    # @pargam option{
      designWidth: 设计稿宽度,必须
      designHeight: 设计稿高度,不传的话则比例按照宽度来计算,可选
      designFontSize: 设计稿宽高下用于计算的字体大小,默认20,可选
      callback: 字体计算之后的回调函数,可选
    }
    # return Boolean;
    # ps:请尽量第一时间运行此js计算字体
*/
!function (win, option) {
  var count = 0,
      designWidth = option.designWidth,
      designHeight = option.designHeight || 0,
      designFontSize = option.designFontSize || 20,
      callback = option.callback || null,
      root = document.documentElement,
      body = document.body,
      rootWidth, newSize, t, self;
  //返回root元素字体计算结果
  function _getNewFontSize() {
    var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
    return parseInt( scale * 10000 * designFontSize ) / 10000;
  }
  !function () {
    rootWidth = root.getBoundingClientRect().width;
    self = self ? self : arguments.callee;
    //如果此时屏幕宽度不准确,就尝试再次获取分辨率,只尝试20次,否则使用win.innerWidth计算
    if( rootWidth !== win.innerWidth &&  count < 20 ) {
      win.setTimeout(function () {
        count++;
        self();
      }, 0);
    } else {
      newSize = _getNewFontSize();
      //如果css已经兼容当前分辨率就不管了
      if( newSize + ‘px‘ !== getComputedStyle(root)[‘font-size‘] ) {
        root.style.fontSize = newSize + "px";
        return callback && callback(newSize);
      };
    };
  }();
  //横竖屏切换的时候改变fontSize,根据需要选择使用
  win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    clearTimeout(t);
    t = setTimeout(function () {
      self();
    }, 200);
  }, false);
}(window, {
    designWidth: 750,
//  designHeight: 960,
  designFontSize: 100,
  callback: function (argument) {
    //console.log(argument)
  }
});

  

时间: 2024-10-25 20:12:34

移动端布局 rem的相关文章

移动端布局rem em

1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初始字体大小 优缺点:em就是为字体和行高而生的,有些时候子元素字体就应该相对于父元素,元素行高就应该相对于字体大小:而rem的有点在于统一的参考系 2.Rem布局原理 rem布局的本质是等比缩放,一般是基于宽度 3.比Rem更好的方案 vw -- 视口宽度的 1/100:vh -- 视口高度的 1/

移动端布局,字体使用rem不生效问题

本文参考连接:https://blog.csdn.net/qq_35484341/article/details/78248371 移动端布局是最让我感到头疼的一件事,一直都是逃避的心态,不想面对,但没办法,公司前端就我一个人,所有的问题迟早都要自己解决,所以不得不开始摸索,最快的办法就是看前辈们都是怎么解决的,但是有些办法不一定适合自己,要挨个试,才知道哪个方法好用,这次我就来记录一下移动端布局rem不生效的问题. 众所周知,rem是相对于html元素的font-size大小而言的,而em是相

移动端网页 rem 自适应布局

(function(doc , win){var DocElement = doc.documentElement;var RsizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';function ResetSize(){var deviceWidth = DocElement.clientWidth;if(!deviceWidth){return false;}DocElement.style.fo

rem与移动端布局

移动端布局痛点在:兼容各个分辨率的移动设备,同样是手机,iPhone4-iPhoneX分辨率范围就已经很广:如果使用px进行布局,显然会出现问题: 常见的像素单位px,em,rem中,em是相对于父元素font-size的单位,个人认为在使用中,em会比较混乱:rem相对的是根元素.HTML,便于根据屏幕分辨率进行布局: 目前移动端布局采用的方式:  “横向百分比 + 纵向rem”,同时使用flex布局,媒体查询: https://www.cnblogs.com/ysshuai/p/669433

vw结合rem实现移动端布局

继上一篇<媒体查询结合rem实现移动端布局>的改进! 还是以昨天写的页面为例 上一回说到了媒体查询结合rem做移动端布局,步骤如下 首先设置媒体查询,确定html中font-size值的变化 @media all and (max-width:320px){ html{font-size:12px;} } @media all and (min-width:321px) and (max-width:375px){ html{font-size:14px;} } @media all and

移动端布局之路-----rem布局

rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px. /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势:父元素文字大

移动端布局解决方案+神器

godcss 移动端布局终极解决方案+神器--- 让移动端布局开发更加容易 http:/www.github.com/godcss/ 介绍 godcss不是一个库,也不是一个框架.它是一个移动端布局开发解决方案.使用godcss可以让移动端布局开发更容易. 使用动态的HTML根字体大小和动态的viewport scale. 遵循视觉一致性原则.在不同大小的屏幕和不同的设备像素密度下,让你的页面看起来是一样的. 不仅便捷了你的布局,同时它使用起来异常简单.可能你会说 talk is cheap,s

移动端布局方案 网易

移动端布局: rem方案:页面中的任何元素都采用rem布局,包括字体. 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <me

移动端布局使用哪种单位比较好?

关于移动端布局使用哪种单位,每个人都有自己习惯使用的单位,这个也只是我个人的一点点浅见. 欢迎大家指点. 很多人在谈到写移动端页面的时候,都觉得很恼火.因为要写n套css样式.然后用媒体查询做适配. 一般这个时候我都表示自己懵懵哒,搞不懂为什么要写这么多套.可能是由于我经验不够,所以看不出来写这么多套有什么深意. 我认为在移动端可以做到适配不同的手机分辨率,如果只是保持整体缩放,没有设计上的差异可以不需要用到`media query`. 下面说说我习惯使用的单位:em,rem,% 1.em em