美文网首页
rem 手机屏幕适配

rem 手机屏幕适配

作者: 吖蛋黄 | 来源:发表于2018-04-02 09:57 被阅读0次

手机端屏幕适配解决方案(含屏幕旋转):



function adapt(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();
  document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
  var st = document.createElement('style');
  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
  st.innerHTML = portrait + landscape;
  head.appendChild(st);
  return defaultFontSize
};
var defaultFontSize = adapt(640, 100);



danhuan 阅读笔记 2018.04.02
文章:https://mp.weixin.qq.com/s/JIRN56acxvJgmzk1Fjj6LA


好好生活,勤劳又勇敢,美丽又可爱!



相关文章

  • 了解真实的『REM』手机屏幕适配

    了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...

  • rem 手机屏幕适配

    手机端屏幕适配解决方案(含屏幕旋转): danhuan 阅读笔记 2018.04.02文章:https://m...

  • 手机屏幕适配方案 ( REM )

    REM 简介 rem 是屏幕适配中得到重用的长度单位。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等...

  • 根据手机屏幕大小适配rem

  • rem 屏幕适配

    屏幕适配方法

  • 2018-06-01

    rem Rem实现响应适配时,只要将转rem的px与初始屏幕宽度(即根据屏幕宽度变化的根元素字体大小)关系对应好,...

  • 移动Web

    屏幕适配 rem适配 1、设置 设置页面元素宽度单位为 rem 或 em注:此方案比较灵活,我们的案例将采用这种方...

  • 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在...

  • 简单-了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在...

  • 前端开发常用单位px,rem,em区别

    首先,px是最常用的单位,一般用于PC端开发,而rem能等比例适配所有屏幕,通常用于响应手机端。 rem是相对于根...

网友评论

      本文标题:rem 手机屏幕适配

      本文链接:https://www.haomeiwen.com/subject/sujthftx.html