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>

移动端适配单位rem的更多相关文章

  1. 移动端适配（rem & viewport）--移动端开发整理笔记（四）

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  2. 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...

  3. H5移动端适配方案-rem

    为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...

  4. 移动端常用单位——rem

    移动端常用单位: ①px:像素大小,固定值 ②%:百分比 ③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位) ④r ...

  5. 移动端适配（rem单位定义方法）

    注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...

  6. 移动端Web适配单位rem的坑,oppo r9手机出现错位bug

    我们做了一个抽奖的H5活动页面,被一个oppo R9手机客户反馈,抽奖的转盘错位了.刷新了好几次都不行.网上百度一搜真的有部分安卓手机有坑.赶紧修复bug.分享完整的rem.js代码出来.各位看官自己 ...

  7. 移动端适配方案-rem(基础篇)

    常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...

  8. 简单介绍移动端CSS3单位rem的用法

    PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...

  9. 小tips：使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

随机推荐

  1. IntelliJ IDEA下的使用git

    1.git简介 git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  2. es6 generator函数

    es6 新增了Generator函数,一种异步编程的解决方案 回顾一下,es6 提供了新的遍历方法,for of ,适用于各种数据集合,统一了遍历操作,原生支持for of 集合的数据集合有.数组,字 ...

  3. web服务器负载均衡与集群基本概念一

    Web集群是由多个同时运行同一个web应用的服务器组成,在外界看来就像一个服务器一样,这多台服务器共同来为客户提供更高性能的服务.集群更标准的定义是:一组相互独立的服务器在网络中表现为单一的系统,并以 ...

  4. 华途软件受控XML转EXCEL

    公司加密系统用的是华途的产品.最近公司高层想要重新梳理公司信息安全管理情况,华途加密系统的梳理和优化是重中之重. 今天公司领导要求IT导出目前系统中所有软件.后缀的受控情况,然后IT吭哧吭哧地把华途软 ...

  5. 阿里云服务器,Sql Server 本地连接服务器端问题记录

    1.如果你是阿里云服务器,配置参数都整好了并且排除了防火墙问题(关闭了防火墙),依然没有连接上,那就先考虑这个问题 问题:阿里云服务器的SQLServer不允许远程连接 原因:因为除了服务器上的防火墙 ...

  6. 深入浅出KNN算法（一） KNN算法原理

    一.KNN算法概述 KNN可以说是最简单的分类算法之一,同时,它也是最常用的分类算法之一,注意KNN算法是有监督学习中的分类算法,它看起来和另一个机器学习算法Kmeans有点像(Kmeans是无监督学 ...

  7. Django项目结构介绍

    官网下载网址:https://www.djangoproject.com/download/ 安装(安装最新LTS版): pip3 install django==2.0.7 创建一个django项目 ...

  8. MongoDB 集合间关联查询后通过$filter进行筛选

    在前面的分享中,有讲解 “详解MongoDB中的多表关联查询($lookup)” 一节,其内容涵盖了常见的集合管理的需求.我们知道文档的选择都是通过$match进行匹配刷选.但这是文档间的匹配筛选,并 ...

  9. [SNOI2017]炸弹

    嘟嘟嘟 这题有一些别的瞎搞神奇做法,而且复杂度似乎更优,不过我为了练线段树,就乖乖的官方正解了. 做法就是线段树优化建图+强连通分量缩点+DAGdp. 如果一个炸弹\(i\)能引爆另一个炸弹\(j\) ...

  10. 记录一下不能使用let时如何创建局部变量(使用立即执行函数)

    记录一下阮老师提及的立即执行函数模拟let(以前根本没想到可以这样做啊!) // IIFE 写法 (function () { var tmp = ...; ... }()); // 块级作用域写法 ...