1、px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

2、em是相对长度单位。相对于当前对象内文本的字体尺寸，em存在值继承问题。

浏览器的默认字体高都是16px，默认识别最小字体12px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

3、rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。
 
px,em,rem单位转换工具地址：http://pxtoem.com/
样式设计字体往往是14px为基准。
 
4、css中的1px并不等于设备的1px
在css中我们一般使用px作为单位，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，iPhone4(640*960)虽然是640px的分辨率，但其屏幕宽度（device-width）只有320px，只不过iPhone4S的像素密度是2。所以我们在设置1px边框时，其实都是2px。还有一个因素也会引起css中px的变化，那就是用户缩放。window对象有一个devicePixelRatio属性，设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。
开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
该meta标签的作用是让当前viewport的宽度等于设备的宽度，初始缩放比例为1倍，同时不允许用户手动缩放。initial-scale=1也有把viewport的宽度设为理想宽度的作用
动态改变meta viewport标签
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
或
<meta id="testViewport" name="viewport" content="width = 380">
<script>var mvp = document.getElementById('testViewport');mvp.setAttribute('content','width=480');</script>
5、三种1px像素边框解决方案： 
 
 
 
 
 <head>中加入脚本，动态计算html字体大小作为rem基准，同时添加<meta>属性

!function (a, b) {

            function c() {

                var b = f.getBoundingClientRect().width;

                b / i > 540 && (b = 540 * i);

                var c = b / 20;

                f.style.fontSize = c + "px", k.rem = a.rem = c

            }

            var d, e = a.document, f = e.documentElement, g = e.querySelector('meta[name="viewport"]'), h = e.querySelector('meta[name="flexible"]'), i = 0, j = 0, k = b.flexible || (b.flexible = {});

            if (g) {

                console.warn("");

                var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);

                l && (j = parseFloat(l[1]), i = parseInt(1 / j))

            } else if (h) {

                var m = h.getAttribute("content");

                if (m) {

                    var n = m.match(/initial\-dpr=([\d\.]+)/), o = m.match(/maximum\-dpr=([\d\.]+)/);

                    n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))

                }

            }

            if (!i && !j) {

                var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)), q = a.devicePixelRatio;

                i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i

            }

            if (f.setAttribute("data-dpr", i), !g)if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild)f.firstElementChild.appendChild(g); else {

                var r = e.createElement("div");

                r.appendChild(g), e.write(r.innerHTML)

            }

            a.addEventListener("resize", function () {

                clearTimeout(d), d = setTimeout(c, 300)

            }, !1), a.addEventListener("pageshow", function (a) {

                a.persisted && (clearTimeout(d), d = setTimeout(c, 300))

            }, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener("DOMContentLoaded", function () {

                e.body.style.fontSize = 12 * i + "px"

            }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {

                var b = parseFloat(a) * this.rem;

                return "string" == typeof a && a.match(/rem$/) && (b += "px"), b

            }, k.px2rem = function (a) {

                var b = parseFloat(a) / this.rem;

                return "string" == typeof a && a.match(/px$/) && (b += "rem"), b

            }

        }(window, window.lib || (window.lib = {}));
 
 
 
 
 
 
 
 
 

px,em,rem字体单位的更多相关文章

  1. px em rem 字体单位问题

    px:相对长度单位,相对于屏幕分辨率 em:相对长度单位,相对于body而言 rem:相对长度单位,相对于html根元素 注意:浏览器默认大小:16px;

  2. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  3. px em rem %作为单位使用

    博客地址 :https://www.cnblogs.com/sandraryan/ px 我们都很熟悉啦,但是固定大小无法适配各种屏幕. rem是CSS3新增的一个相对单位(root em,根em), ...

  4. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  5. px,em,rem的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

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

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

  7. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  8. 彻底弄懂px em rem

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  9. px em rem区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

随机推荐

  1. Android基础------SQLite数据库(二)

    1.操作SQLite数据库 1.1 execSQL() 可以执行insert.delete.update和CREATE TABLE之类有更改行为的SQL语句 1.2 rawQuery() 可以执行se ...

  2. JavaScript 垃圾回收总结

    JavaScript 是一门具有自动垃圾收集机制的编程语言,开发人员不必关心内存分配和回收的问题. 以下是对JavaScript的垃圾收集历程总结: 离开作用域的值将被自动标记为可以回收,因此将在垃圾 ...

  3. BZOJ4864 BeiJing 2017 Wc神秘物质（splay）

    splay维护区间最大值.最小值.相邻两数差的绝对值的最小值即可. #include<iostream> #include<cstdio> #include<cmath& ...

  4. html dom与javascript的关系 -我们用JavaScript对网页（HTML）进行的所有操作都是通过DOM进行的

    一,什么是DOM (参考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什么 DOM全称为The Document Object Model,应 ...

  5. 【题解】SDOI2009Bill的挑战

    这题好像状压的做法比较的无脑?但想记录一下容斥的做法,感觉自己对于容斥简直一无所知.这道题目容斥的解法我也是看了题解才会的.如有雷同,是我看的(*/ω＼*)我们可以首先枚举当前字符串与给定的哪 \(k ...

  6. [洛谷P2106]Sam数

    题目大意:问长度为$n$的$Sam$数有几个,$Sam$数的定义为没有前导零,相邻两个数字之差绝对值小于等于$2$的数 题解:发现转移方程一定,可以矩阵快速幂. 卡点:没有特判$n=1$的情况 C++ ...

  7. bzoj 1037: [ZJOI2008]生日聚会Party （dp)

    dp,但是要顺推容易点 const mm=; var f:..,..,..,..]of longint; n,m,kk,now,sum,i,j,k1,k2:longint; function max( ...

  8. CF939E：Maximize! ——题解

    http://codeforces.com/problemset/problem/939/E https://vjudge.net/problem/CodeForces-939E 给一个集合,每次两个 ...

  9. HDU3480：Division——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=3480 将一列数划分成几个集合,这些集合的并集为该数列,求每个数列的(最大值-最小值)^2的和的最小值. 简单的d ...

  10. BZOJ1597 土地购买 【dp + 斜率优化】

    1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 5466  Solved: 2035 [Submi ...