cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:html5页面rem布局适配分析

html5页面rem布局适配分析

2018-02-12 17:43:18 来源:www.cvmachine.com 【

html5页面rem布局适配分析

rem 布局适配方案

主要方法为:

  1. 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小;
  2. css 中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为 rem 为单位的值;
  3. 设计稿中的字体使用 px 为单位,通过媒体查询稍作调整。

1 动态设置 html 标签 font-size 大小

精简通用版本:

!(function(win, doc){
 function setFontSize() {
  // 获取window 宽度
  // zepto实现 $(window).width()就是这么干的
  var winWidth = window.innerWidth;
  // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
  
  // 640宽度以上进行限制 需要css进行配合
  var size = (winWidth / 640) * 100;
  doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
 }

 var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

 var timer = null;

 win.addEventListener(evt, function () {
  clearTimeout(timer);

  timer = setTimeout(setFontSize, 300);
 }, false);

 win.addEventListener("pageshow", function(e) {
  if (e.persisted) {
   clearTimeout(timer);

   timer = setTimeout(setFontSize, 300);
  }
 }, false);
 // 初始化
 setFontSize();

}(window, document));

高配精确版本:

(function(WIN) {
  var setFontSize = WIN.setFontSize = function (_width) {
    var docEl = document.documentElement; 
    // 获取当前窗口的宽度
    var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect().width;

    // 大于 1080px 按 1080
    if (width > 1080) { 
      width = 1080;
    }

    var rem = width / 10;
    console.log(rem);

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

    // 误差、兼容性处理
    var actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)["font-size"]);
    if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
      var remScaled = rem * rem / actualSize;
      docEl.style.fontSize = remScaled + 'px';
    }
  }

  var timer;

  function dbcRefresh() {
    clearTimeout(timer);
    timer = setTimeout(setFontSize, 100);
  }

  //窗口更新动态改变 font-size
  WIN.addEventListener('resize', dbcRefresh, false);
  //页面显示时计算一次
  WIN.addEventListener('pageshow', function(e) {
    if (e.persisted) { 
      dbcRefresh() 
    }
  }, false);
  setFontSize();
})(window)


//对H5活动推过页面,宽高比例有所要求,可适当调整

function adjustWarp(warpId = '#warp') {

  const $win = $(window);
  const height = $win.height();
  let width = $win.width();

  // 考虑导航栏情况
  if (width / height < 360 / 600) {
    return;
  }

  width = Math.ceil(height * 360 / 640);

  $(warpId).css({
    height,
    width,
    postion: 'relative',
    top: 0,
    left: 'auto',
    margin: '0 auto'
  });

  // 重新计算 rem
  window.setFontSize(width);
}

2 通过 CSS3媒体查询设置 rem

简单易用 缺乏灵活度 请看demo 你懂的

@media screen and ( min-width: 320px){html{font-size:50px}}
@media screen and ( min-width: 360px){html{font-size:56.25px}}
@media screen and ( min-width: 375px){html{font-size:58.59375px}}
@media screen and ( min-width: 384px){html{font-size:60px}}
@media screen and ( min-width: 400px){html{font-size:62.5px}}
@media screen and ( min-width: 414px){html{font-size:64.6875px}}
@media screen and ( min-width: 424px){html{font-size:66.25px}}
@media screen and ( min-width: 480px){html{font-size:75px}}
@media screen and ( min-width: 540px){html{font-size:84.375px}}
@media screen and ( min-width: 640px){html{font-size:100px}}

根据个人项目需求和产品设计可适当修改,以上demo写法并不唯一固定。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持申博开户。


本文地址:http://www.cvmachine.com/a/question/96750.html
Tags: HTML5 详解 页面
编辑:申博开户网
188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet 澳门彩票 unibet unibet Ladbrokes Ladbrokes 12bet 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网
推广内容
推荐阅读
热门推荐
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部