前端与移动开发----移动web开发----Rem适配

Rem适配

今天内容的前提:

今天的知识点是我们以后在工作中移动端项目开发最常用的,而且要配合我们前面所学的知识点(less + 媒体查询)

今天的知识点听懂不难,应用也不难,就是公式总结的时候稍微有一点点复杂.

1. 回顾整个移动端学哪些知识

• 流式布局(百分布局) : 实现网页中布局效果的

• 伸缩布局(弹性布局): 实现网页中布局效果的

• 响应式布局(媒体查询): 实现网页布局的,一个网页在不同设备中布局效果有差异

• Rem: 不是布局, rem是在操作网页中最后的适配的(解决同一个元素在不同设备中大小变化)

  1. 因为不同的设备,像素密度不一样,导致元素的大小就应该有大小的区别
  2. 我们之前的写的代码,很多情况下我们都将元素的大小设置为固定的px,这样的移动端页面并不是最优秀的
  

2. 知识点-Rem介绍

• 为什么要学rem?

  为了解决移动端页面中盒子大小,文字大小...元素的适配
  

• rem是什么?

  rem: 就是一个相对单位 , rem 相对是 页面中根标签 html中的文字大小
  em: 也是一个相对单位而已
  

• rem是基于什么实现适配效果的?

  1. 告诉我根标签中文字大小 
  2. 通过媒体查询的方式告诉我哪个台设备中的文字大小
  

• **如何通过具体的代码实现rem适配

1. 我们在实际移动开发中,美工提供的设计图一定是比移动设备还要大的(常见的尺寸是 640px)

2. 我们怎么能够将一个比移动设备还要大的设计图适配到移动设备中呢?

   • 第一个公式: 计算UI图片中每一个元素具体的 rem值

     元素rem值 = 当前元素测量大小 / (当前UI宽度/ 人为的倍数(份数))

   • 第二个公式: 计算每台移动设备中根标签的文字大小

     根标签中文字大小 = 当前移动设备的宽度 / 人为的倍数(份数)
     猛击下载rem适配资源

     如有不足，请多指教，
     未完待续，持续更新！
     大家一起进步！