文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

关于 Rem 的适配！前端页面响应式开发必备技巧

2024-12-02 11:36

关注

本文转载自微信公众号「零零后程序员小三」，作者003 。转载本文请联系零零后程序员小三公众号。

哈喽大家好我是小三，作为全栈工程师当然是要了解前端的东西。最近学到了rem，分享下学习的心得。

我们作为前端初学者来说，是不是有一个疑惑，我们电脑屏幕大，但是手机屏幕小，那我在PC端页面写好的东西到了手机端岂不是很难看?

所以!我在这里将会给你们介绍关于rem的适配方案

关于rem的适配方案?

带着这三个疑问，我们一起来看看rem

适配的目的是什么?

肯定是为了适应在不同的设备下，我们写出来的效果差别不大，如果我们只按照PC端来开发，如果用户用手机打开这个页面，那肯定是用起来很难受。

而且，如果我们为了去适配某一台手机，而再去写一个样式，那岂不是工作量更大，更何况市面上的手机品类这么多，屏幕大小不一，什么刘海屏什么的，那工作量可想而知!

原理是什么

我们这就来看看。实现rem的原理是什么?

「一. 根据UI给我们的设计稿与设备宽度的大小比例，动态的计算然后去设置html的字体大小(font-size);然后页面大小根据一个公式去规范元素的大小」

「二. 根据设计稿元素的宽，高的取值，根据同比例换算为rem单位的值」

怎么做?

首先，我们以iphone6为例子，因为我们常用开发都是以iphone6作为移动端的例子来换算，这里为什么就需要您们自己去百度了。

less + @media(媒体查询) + rem

我们假设UI给我们的设计稿是750px的，然后呢我们把屏幕划分为15等份(看个人需求，15到20等份也是可以的)，然后每一份作为HTML的文字大小，然后750除以15也就是50px，那么当我们在宽度为375px的设备的时候，字体大小的换算就是375除上15等分，算出结果25px，然后用页面元素的大小除以不同HTML字体大小，你会发现比例还是一样的，

比如一个100乘100像素大小的盒子在750屏幕下，就是100除以50转换为rem的话是2rem乘2rem，

再比如，当我们想在375的屏幕下画一个100px的盒子，那就是4rem乘4rem

然后我们看看代码

  1.   
  2.     "UTF-8" />  
  3.     "X-UA-Compatible" content="IE=edge" />  
  4.     name="viewport" content="width=device-width, initial-scale=1.0" />  
  5.     Document  
  6.       
  7.   
  8.   
  9.   
  10.     "box1">
  
  •     "box2">
    •   
  •   

    • 我们先看看750屏幕

    再看看375的移动端

    然后可以发现

    100乘100 px元素在750屏幕下 就是100/50 转换为rem 是2rem2rem 比例是 1比1

    375屏幕下 html字体大小为25 则2rem=50px 此时宽和高都是50 但比例还是1比1

    最后得出公式：

    设计稿宽值也就是页面元素值=A =>(已知)

    html的字体大小值=B

    划分的份数=C =>(已知)

    rem的值 = X

    X = A / B / C

    B = A / C

    @media +flexble.js + rem

    使用flexible.js能轻松搞定各种不同的移动端设备兼容自适应问题。

    用起来也是特别的简单，我们只需要引入这个东西，原理还是将设备划分等份 不同的设备 比例还是一致的

    然后自己需求设置屏幕大小，我的是这样的

    1.  
    2.     "UTF-8" /> 
    3.     "X-UA-Compatible" content="IE=edge" /> 
    4.     name="viewport" content="width=device-width, initial-scale=1.0" /> 
    5.     Document 
    6.     "./flexible/flexible.js"> 
    7.          
    8.  
    9.  
    10.  
    11.     
       
    12.  

    下面是我去网上查找到的js文件，需要的可以自行下载使用

     

    1. (function(win, lib) { 
    2.     var doc = win.document; 
    3.     var docEl = doc.documentElement; 
    4.     var metaEl = doc.querySelector('meta[name="viewport"]'); 
    5.     var flexibleEl = doc.querySelector('meta[name="flexible"]'); 
    6.     var dpr = 0; 
    7.     var scale = 0; 
    8.     var tid; 
    9.     var flexible = lib.flexible || (lib.flexible = {}); 
    10.  
    11.     if (metaEl) { 
    12.         console.warn('将根据已有的meta标签来设置缩放比例'); 
    13.         var match = metaEl.getAttribute('content').match(/initial-scale=([\d.]+)/); 
    14.         if (match) { 
    15.             scale = parseFloat(match[1]); 
    16.             dpr = parseInt(1 / scale); 
    17.         } 
    18.     } else if (flexibleEl) { 
    19.         var content = flexibleEl.getAttribute('content'); 
    20.         if (content) { 
    21.             var initialDpr = content.match(/initial-dpr=([\d.]+)/); 
    22.             var maximumDpr = content.match(/maximum-dpr=([\d.]+)/); 
    23.             if (initialDpr) { 
    24.                 dpr = parseFloat(initialDpr[1]); 
    25.                 scale = parseFloat((1 / dpr).toFixed(2)); 
    26.             } 
    27.             if (maximumDpr) { 
    28.                 dpr = parseFloat(maximumDpr[1]); 
    29.                 scale = parseFloat((1 / dpr).toFixed(2)); 
    30.             } 
    31.         } 
    32.     } 
    33.     if (!dpr && !scale) { 
    34.         var isAndroid = win.navigator.appVersion.match(/android/gi); 
    35.         var isIPhone = win.navigator.appVersion.match(/iphone/gi); 
    36.         var devicePixelRatio = win.devicePixelRatio; 
    37.         if (isIPhone) { 
    38.             // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 
    39.             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 
    40.                 dpr = 3; 
    41.             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { 
    42.                 dpr = 2; 
    43.             } else { 
    44.                 dpr = 1; 
    45.             } 
    46.         } else { 
    47.             // 其他设备下，仍旧使用1倍的方案 
    48.             dpr = 1; 
    49.         } 
    50.         scale = 1 / dpr; 
    51.     } 
    52.     docEl.setAttribute('data-dpr', dpr); 
    53.     if (!metaEl) { 
    54.         metaEl = doc.createElement('meta'); 
    55.         metaEl.setAttribute('name', 'viewport'); 
    56.         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 
    57.         if (docEl.firstElementChild) { 
    58.             docEl.firstElementChild.appendChild(metaEl); 
    59.         } else { 
    60.             var wrap = doc.createElement('div'); 
    61.             wrap.appendChild(metaEl); 
    62.             doc.write(wrap.innerHTML); 
    63.         } 
    64.     } 
    65.  
    66.     function refreshRem() { 
    67.         var width = docEl.getBoundingClientRect().width; 
    68.         if (width / dpr > 540) { 
    69.             width = 540 * dpr; 
    70.         } 
    71.         var rem = width / 10; 
    72.         docEl.style.fontSize = rem + 'px'; 
    73.         flexible.rem = win.rem = rem; 
    74.     } 
    75.     win.addEventListener('resize', function() { 
    76.         clearTimeout(tid); 
    77.         tid = setTimeout(refreshRem, 300); 
    78.     }, false); 
    79.     win.addEventListener('pageshow', function(e) { 
    80.         if (e.persisted) { 
    81.             clearTimeout(tid); 
    82.             tid = setTimeout(refreshRem, 300); 
    83.         } 
    84.     }, false); 
    85.     if (doc.readyState === 'complete') { 
    86.         doc.body.style.fontSize = 12 * dpr + 'px'; 
    87.     } else { 
    88.         doc.addEventListener('DOMContentLoaded', function(e) { 
    89.             doc.body.style.fontSize = 12 * dpr + 'px'; 
    90.         }, false); 
    91.     } 
    92.  
    93.     refreshRem(); 
    94.     flexible.dpr = win.dpr = dpr; 
    95.     flexible.refreshRem = refreshRem; 
    96.     flexible.rem2px = function(d) { 
    97.         var val = parseFloat(d) * this.rem; 
    98.         if (typeof d === 'string' && d.match(/rem$/)) { 
    99.             val += 'px'; 
    100.         } 
    101.         return val; 
    102.     } 
    103.     flexible.px2rem = function(d) { 
    104.         var val = parseFloat(d) / this.rem; 
    105.         if (typeof d === 'string' && d.match(/px$/)) { 
    106.             val += 'rem'; 
    107.         } 
    108.         return val; 
    109.     } 
    110. })(window, window['lib'] || (window['lib'] = {})); 

     

     

    来源：零零后程序员小三内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    关于 Rem 的适配！前端页面响应式开发必备技巧

    后端开发前端页面2024-12-02
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯