移动端适配单位rem

时间：2021-10-22 21:52:19

0 写在前面

　　本周惊喜地发现，其他各个老师的软工班（罗杰老师班和欧阳老师班）的软工项目的alpha版本都已经发布了！（然而我们软工项目还没开始写代码…逃…）

　　十分好奇的我第一时间下载了一些他们的产品进行体验，由于我是在手机上打开的他们的项目，一些基于web端开发的产品在前端效果上看起来有些古怪。进而发现，可能是在各个项目组的开发过程中，没有将移动端的适配问题考虑在内。

　　由于手机网络的普及，越来越多的用户开始使用移动端产品，因此在产品的开发和设计时，有必要考虑移动端的适配问题。

　　今天我讲通过这篇文章来记录一下移动端适配单位rem的学习笔记。

1 基本知识点

  • 逻辑像素： CSS像素

  • 物理像素：设备出厂时即被设定好的（也叫设备像素）

  • 设备像素比dpr = 物理像素/CSS像素

2 rem & em

  • em：

    • font-size的值 相对于父级字体大小

    • width，height的值 相对于自身字体大小

    • 谷歌浏览器限制最小字体大小为12px若设置低于12px则字体大小按12px计算

  • rem:相对于跟标签html的font-size值

3 屏幕尺寸

  • 640 * 1136 -> 物理像素

    • eg: iphone5 dpr = 2

    • 一个div在设计稿里的实际宽度200px -> 100px

  • 320 * 568 -> CSS像素

  • 一列占：320 / 16 (总列数：自己设置) = 20px (每列占的CSS像素)

  • 一个div元素所占列数 = 100px / 20px = 5rem

4 总结

  • 元素适配宽度 = 元素所占列数rem

  • 一列的宽度 = 屏幕实际宽度 / 总列数

  • 元素实际列数 = 元素在设计稿里的宽度 / 一列的宽度

5 示例代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>rem</title>

     <style>

         html{

             font-size: 20px;

         }

         div{

             /* CSS像素 ：逻辑像素*/

             height: 90px;

             width: 90px;

             background-color: red;

             /* 物理像素：设备出厂时即被设定好的（也叫设备像素） */

             /* 设备像素比dpr = 物理像素/CSS像素 */

         }

         .demo{

             font-size: 16px;

         }

         .demo .em{

             /* 相对于父级字体大小 */

             font-size: 2em;

             width: 3em;

             height: 3em;

         }

         .demo .rem{

             font-size: 2rem;

             width: 5rem;

             height: 5rem;

             background-color: aqua;

         }

     </style>

 </head>

 <body>

     <!--

         rem&em

         em：1. font-size的值 相对于父级字体大小

             2. width height的值 相对于自身字体大小

         注意：谷歌浏览器限制最小字体大小为12px若设置低于12px则字体大小按12px计算

         rem:相对于跟标签html的font-size值

     -->

     <!--屏幕尺寸

         640 * 1136 -> 物理像素

         eg: iphone5 dpr = 2

         一个div在设计稿里的实际宽度200px -> 100px

         320 * 568 -> CSS像素

         一列占：320 / 16 (总列数：自己设置) = 20px (每列占的CSS像素)

         一个div元素所占列数 = 100px / 20px = 5rem

         1. 元素适配宽度 = 元素所占列数rem

         2. 一列的宽度 = 屏幕实际宽度 / 总列数

         3. 元素实际列数 = 元素在设计稿里的宽度 / 一列的宽度

     -->

     <div class="demo">

         <p class="em">好好学习</p>

         <div class="rem">天天向上</div>

     </div>

 </body>

 </html>

相关文章