<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. 刚刚,Python 3.10 正式发布了,我发现了一个可怕的功能..
  2. Flume TailDir 基本流程
  3. PHP GD库---之商详合成分享图片
  4. oracle使用存储过程做铺底数据
  5. 《每日一题》62. Unique Paths 不同路径
  6. 关于“携号转网” 还有许多你不知道的事
  7. 面向对象——类设计(五)
  8. 《白帽子讲Web安全》注入攻击
  9. Ms08067攻防训练平台内测-100个免费邀请码
  10. 生成缩略图 java_java实现生成缩略图
  11. 生物信息_odds_ratios、Likelihood_Ratios、发病率、frequency
  12. cym : BaseQuickAdapter.setOnItemChildClickListener失效点击没反应
  13. 【论文阅读CVPR2019】Text2Scene: Generating Compositional Scenes from Textual Descriptions
  14. 腾讯系互联网券商富途证券将赴美IPO,最高融资3亿美元...
  15. Simulink仿真设置和Scope示波器的使用[方案]
  16. Db2 license
  17. kdj指标主要看哪个值_终于有人把KDJ指标讲通透了,简单实用,建议收藏
  18. JavaScript制作动画
  19. jquery可爱的小黑猫
  20. VPP学习(二)VPP安装

热门文章

  1. ROS学习笔记之——amcl源码的解读
  2. Linux系统进程优先级——计算方式
  3. 7月31日 细雨霏霏 不是我的泪
  4. 瀚高数据库和mysql区别,瀚高数据库----select用法
  5. 未检测到正确安装的网络适配器_网络适配器图标出现黄色感叹号的解决办法
  6. 2022韦莱韬悦人力资源管理季刊
  7. TCP/IP(3)——IPV6
  8. 【专利】如何画专利结构图纸
  9. 以太网速率怎么手动设置_交换机如何配置速率和双工模式
  10. python编程快速上手办公自动化_关于疯狂填词(Mad Libs)程序的解答