em与rem之间的区别：

  • 共同点：
  1. 它们都是像素单位
  2. 它们都是相对单位
  • 不同点：
  1. em大小是基于父元素的字体大小
  2. rem大小是基于根元素(html)的字体的大小

实例：

<!DOCTYPE html>

<html lang="en" style="font-size: 50px">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            line-height: 1;

        }

        .container {

            font-size: 25px;

        }

        .em {

            font-size: 2em;

        }

        .rem {

            font-size: 2rem;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="em">AAAAA</div>

        <div class="rem">AAAAA</div>

    </div>

</body>

</html>

rem适配方案:

  • 核心原理：宽度和高度都能做到适配（等比缩放）
  • 通过控制 html 元素上的字体大小去控制页面上所有以rem为单位的基准值，控制尺寸
  • 核心换算公式：当前rem基准值 = 预设基准值 / 设计稿宽度 * 当前设备的宽度
  • 技术：媒体查询

实例:

  • 预设基准值： 100px
  • 设计稿宽度：640px
  • 假设的设备：640px， 414px，  320px
  • 注意：由于媒体查询代码是从上往下执行的，所以代码书写顺序要从小到大(如果不的话，可以选择其他方案，例如：min-width 和 max-width 都设置)
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>rem适配</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        /* 假设的设备 320 414 640 */

        @media (min-width: 320px) {

            html {

                font-size: 50px;

            }

        }

        @media (min-width: 414px) {

            html {

                font-size: 64.6875px; /* 100/640*414 */

            }

        }

        @media (min-width: 640px) {

            html {

                font-size: 100px;

            }

        }

        /* rem适配 */

        header {

            width: 100%;

            height: 1rem;

            line-height: 1rem;

            font-size: 0.32rem;

            text-align: center;

            background: green;

            color: #fff;

        }

    </style>

</head>

<body>

    <header>购物车</header>

</body>

</html>

em与rem之间的区别以及移动设备中的rem适配方案的更多相关文章

  1. px em 和rem之间的区别

    背景: px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. e ...

  2. px、em、pt之间的区别与互相转换

    关于px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文(原网址已失效,这是其他站点) 这里引用的是Jor ...

  3. rem、px、em之间的区别以及网页响应式设计写法

    个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...

  4. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  5. rem、em、px之间的转换

    rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...

  6. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  7. CSS中常用的字体单位：px、em、rem和%的区别

    在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...

  8. CSS3中的Rem值与Px之间的换算

    bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...

  9. CSS3 中的 rem 值与 px 之间的换算

    想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...

随机推荐

  1. python3汉诺塔简单实现代码

    小时候喜欢玩汉诺塔,今天用python实现简单的汉诺塔功能 代码: def hannoi(n,x,y,z): if n==1: print(x,'-->',z) else: hannoi(n-1 ...

  2. JAVA大数的一些操作

    参考: https://www.cnblogs.com/tonyyy/p/10433460.html https://www.cnblogs.com/wkfvawl/p/9377441.html (d ...

  3. 【转】Spring全家桶

    Spring框架自诞生以来一直备受开发者青睐,有人亲切的称之为:Spring 全家桶.它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflo ...

  4. python爬虫之获取页面script里面的内容

    这是网页上的script 我要获取的是00914这个数字  直接使用正则表达式即可 运行结果: 源码: import re from bs4 import BeautifulSoup from url ...

  5. java为什么学JavaScript？

    就现在的趋势来说,Spring无疑是一家独大的,它有太多利益 现在在Java EE开发中,Spring已经成为和Java核心库一样的基础设备,所以说假如想成为一个合格的Java程序员,Spring必定 ...

  6. 【UVA1303】Wall（凸包）

    点此看题面 大致题意: 给你一个多边形,要求建一面墙使得墙上的点至少离多边形每个顶点\(R\)的距离,求最短的墙长. 考虑\(R=0\) 考虑当\(R=0\)时,所求的答案显然就是求得的凸包的周长. ...

  7. 项目：git+gitlab+jenkins+ansible上线网站

    项目需求 1. 在gitlab中创建一个项目 nginxinstall2. 编写playbook,实现一键部署nginx.部署一个静态测试页.测试部署结果要求: 部署nginx 端口:83 运行身份: ...

  8. loj 2955 「NOIP2018」保卫王国 - 树链剖分 - 动态规划

    题目传送门 传送门 想抄一个短一点ddp板子.然后照着Jode抄,莫名其妙多了90行和1.3k. Code /** * loj * Problem#2955 * Accepted * Time: 26 ...

  9. Elasticsearch由浅入深（七）搜索引擎：_search含义、_multi-index搜索模式、分页搜索以及深分页性能问题、query string search语法以及_all metadata原理

    _search含义 _search查询返回结果数据含义分析 GET _search { , "timed_out": false, "_shards": { , ...

  10. LeetCode 561：数组拆分 I Array Partition I

    文章全部来自公众号:爱写bug 算法是一个程序的灵魂. Given an array of 2n integers, your task is to group these integers into ...