移动端适配

介绍百分比,em,rem

  • 百分比的情况比较复杂:主要分5种情况
    1. withpaddingmarginrightleft相对于父元素的width。
    2. heighttopbottom相对于父元素的height。
    3. font-size相对于父元素的font-size。
    4. line-height相对于自身的font-size。
    5. border-radiusbackground-sizetransform: translate()transform-originzoomclip-path相对于自身宽/高
  • em 表示自身字体尺寸的倍数(不是相对于父元素)
  • rem Equal to the computed value of font-size on the root element.相当于根元素的计算值

适配方案

  • 首先一定要加上为了让页面可视宽度与手机可视宽度相同

  • 我们试着让1rem=页面宽度的一半

function init (){
  var style = document.createElement('style')
  var pageWidth = document.documentElement.clientWidth;
  style.innerHTML = 'html{font-size :' + pageWidth/2 + 'px !important;}'
  document.head.appendChild(style);
}
window.onresize=function(){
  init()
}
window.onload=function(){
  init()
}

demo

这样做虽然可以将rem做成类百分比。但是,当你遇到除不尽的尺寸的时候,写起来会很麻烦。而且,如果设计稿有定高的模块的时候,你还得额外计算屏幕宽度的影响。所以这样做是很麻烦的,所以我们试着让1rem与设计稿联系起来,假设我们设计稿宽度是750。那么我们可以这样写。

function init (designWidth){
  var style = document.createElement('style')
  var pageWidth = document.documentElement.clientWidth;
  style.innerHTML = 'html{font-size :' + pageWidth/designWidth + 'px !important;}'
  document.head.appendChild(style);
}
window.onresize=function(){
  init(750)
}
window.onload=function(){
  init(750)
}

这样写就能让1rem等于设计稿的1px。但是还是会出现问题,浏览器font-size的最小单位是12px,假设你在iphone6下面开发,html的font-size.5px但是会被强制成12px。这样你做的就是无用功了。所以我们还需要一个rem2px的变量来放大我们的font-size

//设计稿的尺寸750
//设置之后1rem=设计稿的40px
function init (desginWidth,rem2px){
    var style = document.createElement('style')
    var pageWidth = document.documentElement.clientWidth;
    style.innerHTML = 'html{font-size :' + 40*pageWidth/desginWidth + 'px !important;}'
    document.head.appendChild(style);
}
window.onload=function(){ init(750,40) }

我个人比较喜欢将rem2px设置成40,有人会好奇,为什么不是20。还是因为最小font-size的限制,如果rem2px为20在ipad下面很容易突破12px的限制。

  • 到目前为止还不算完,因为rem其实是一个计算值,在 html 的 fontSize 设置为 px 的情况下1rem = 1 * (htmlFontSize / 16) * defaultFontSize一般浏览器的默认值是16,但是如果用户主动设置了defaultFontSize就会出现偏差,这种情况我们可以用百分比来绕过去。
function init (designWidth,rem2px){
    var d = window.document.createElement('div');
    d.style.width = '1rem';
    d.style.display = "none";
    var head = window.document.getElementsByTagName('head')[0];
    head.appendChild(d);
    var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
    d.remove();
  /*
    到这里是为了获得defaultFontSize系统默认字体
  */
    document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
}

这样设置在defaultFontSize为16与我们第三步没什么区别

Reference

了解真实的rem

除了上面方法

  • 使用Flexible实现手淘H5页面的终端适配
    如何设置手淘的flexible也给一个类似的方案
    如何设置手淘的flexible

你可能感兴趣的:(移动端适配)