<script>
 /**
    * ================================================
    *   设置根元素font-size
    * 当设备宽度为375(iPhone6)时,根元素font-size=16px; 
    × ================================================
    */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  
  var refreshRem = function () {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px';//这样每一份也是16px,即1rem=16px
  };

if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);
</script>

移动端rem适配(375)设计稿相关推荐

  1. ui设计移动端字体适配_UI设计稿中常见的单位及移动端适配

    一.pt 在我们的设计稿中,经常看到以pt单位来标注的稿子,那么pt究竟是个什么单位?其实pt是用于印刷行业用来表示字体大小的单位,也叫做磅,用过word设置字体的应该不会陌生,它是一个绝对长度,为1 ...

  2. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  3. 【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题

    [问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 参考文章: (1)[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 (2) ...

  4. 移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...

  5. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  6. 移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同

    移动端 H5 分屏页面适配问题 单位问题 肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...

  7. 移动端 REM 适配

    在使用 vant 完成移动端项目时, 如果需要使用 rem 单位实现适配 ( Vant 中的样式默认使用 px 单位), 推荐使用 lib-flexible (设置 rem 基准值) 和 postcs ...

  8. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  9. Vue移动端项目——Vant 移动端 REM 适配

    Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 ...

  10. vue中使用第三方UI库的移动端rem适配方案

    需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...

最新文章

  1. 2010年暑假送给大学生30句话
  2. window.onload 不执行
  3. 深入理解python之self
  4. dataTables插件使用
  5. 休闲食品行业如何数字化升级,腾讯云和卫龙辣条一起打了个样
  6. 终于在VirtualBox中装好了Mac OS的虚拟机了!(
  7. Spring IoC、DI、Bean和自动装配的理解
  8. 用Java读取pdf中的数据
  9. 安装Firefly错误-Unable to find vcvarsall.bat
  10. 高并发解决方案相关面试题
  11. 信息学竞赛学不学计算机史,关于信息学奥赛不得不知道的事
  12. 外卖行业现状分析_2019年中国外卖行业市场现状与发展趋势分析
  13. Ubuntu 锁屏后键盘无法输入密码
  14. 作为一个程序员对特修斯之船的理解
  15. [Eigen中文文档] 归约、访问者和广播
  16. Unity 中遮挡层级
  17. 【Unity大气散射】GAMES104:3A中如何实现大气散射
  18. 读《图解密码技术》(三):密钥、随机数和应用技术
  19. Actionbar 溢出菜单背景色设置
  20. “好像”还是“好象”

热门文章

  1. 手机进程设置多少个最好_手机打开,开发者选项中的这4个设置,性能瞬间提升一倍,不卡顿...
  2. arcgis快速生成图框_arcgis图框的制作
  3. linux4g内存图,linux 支持4G内存
  4. knx ets5安装
  5. 计算机网络基础——CS架构与BS架构、OSI七层协议、tcp/ip五层模型讲解
  6. win10联网进入msn页面,信号出现感叹号
  7. ESP32开发学习 LVGL Littlevgl 使用文件系统
  8. 存款利息的计算,有1000元,想存五年,可按照五种办法存:
  9. scikit 线性回归_使用scikit学习线性回归学习和体育运动nba数据数据科学
  10. Ethernet/IP介绍