px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，css3新加属性，chrome/firefox/IE9+支持。

(另外需注意chrome强制最小字体为12px，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。

html{font-size: 62.5%}  /* 16px * 62.5% = 10px */

body{font-size: 1.4rem;} /* 1.4rem * 12px = 16.8px */

本意设置body的字体大小为14px，可是在chrom中实际上却是16.8px，就是因为10px小于12px，所以采取了12px。

rem与em的区别：

  • rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小

  • em最多取到小数点的后三位

<style>

  html{ font-size: 20px; }

  body{

    font-size: 1.4rem;  /* 1rem = 28px */

    padding: 0.7rem;  /* 0.7rem = 14px */

  }

  div{

    padding: 1em;  /* 1em = 28px */

  }

  span{

    font-size:1rem;  /* 1rem = 20px */

    padding: 0.9em;  /* 1em = 18px */

  }

</style>

<html>

  <body>

    <div>

      <span></span>

    </div>

  </body>

</html>

在上面的代码中，我们将根元素（html）的字体大小font-size设为20px，body的字体大小设为1.4rem，那么转换为像素就是28px（20 × 1.4），接着我们又将div的padding设为1em，由于其基于父元素，所以转换为像素是28px ( 28 × 1），然后我们又将span的字体大小设为1rem，也就是20px，由于其自身设置了字体大小，所以padding设为1em，转换为像素是20px(20 × 1），而不是乘以其父元素的字体大小28px(28 × 1）。

注意：当元素自身设置了字体大小，那么如果它的其他css属性也使用em单位，则会基于它自身的字体大小。（就像上面例子的span的padding一样）

注：rem与em多在移动端中使用，一般需设置meta缩放比1:1

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

但在IOS10 safari 下官方规定了不能禁止用户缩放，就是说上述标签是无效的。

暂未找到正确的解决之道，本人采用监听事件来阻止默认行为，有一定作用，但并不能完全解决。

 window.onload = function () {

        document.addEventListener('gesturestart', function (e) {

            e.preventDefault();

        });

        document.addEventListener('dblclick', function (e) {

            e.preventDefault();

        });

        document.addEventListener('touchstart', function (event) {

            if (event.touches.length > 1) {

                event.preventDefault();

            }

        });

        var lastTouchEnd = 0;

        document.addEventListener('touchend', function (event) {

            var now = (new Date()).getTime();

            if (now - lastTouchEnd <= 300) {

                event.preventDefault();

            }

            lastTouchEnd = now;

        }, false);

    };

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。假如浏览器的高度为500px，那么1vh就等于5px（500px/100）。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

其它的单位还有：
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大约1/72寸

pc:pica，大约6pt，1/6寸

ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safari7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

css中的各种单位简述以及ios10下safari禁止缩放的问题的更多相关文章

  1. CSS中的各种单位

    单位 描述                                                                                               ...

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

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

  3. CSS中的尺寸单位

    绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...

  4. [css 实践篇]CSS中的尺寸单位

    绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...

  5. CSS中的自适应单位vw、vh、vmin、vmax

    1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...

  6. css中vw,vh单位对于UC的兼容性问题

    vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...

  7. css中font-size的单位总结：px、em、pt

    px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指 ...

  8. CSS 中的 em单位

    em的对应的像素值如何计算,一言以蔽之:em就是倍数当前元素font-size的倍数,其结果就是当前字体的像素值乘以em的值,至于font-size来自何处?有两个来源:继承自父元素和通过CSS直接设 ...

  9. [原创]css中a标签去掉锚点文本下划线

    我对博客的认识是:记录问题,解决问题,分享知识.如果有轮子,我不需要造轮子. 1.问题解决方式: 设置属性:text-decoration:none; 2.更多属性参数参考 text-decorati ...

随机推荐

  1. 谈初学Java历程

    学习Java一个月左右,本来很早就想好好静下心来写一点东西了.但由于不想手写,文档写了不知道放在哪好,所以一直拖着.最近注册了博客园,还是挺方便的. 即将大学毕业了,则面临了所以大学生所面临的问题,就 ...

  2. mysql导入导出sql文件

    window下 1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u dbuser -p dbname > dbname.sql2. ...

  3. sizzle分析记录：getAttribute和getAttributeNode

    部分IE游览器下无法通过getAttribute取值? <form name="aaron"> <input type="text" name ...

  4. 深入理解客户区尺寸client

    前面的话 关于元素尺寸,一般地,有偏移大小offset.客户区大小client和滚动大小scroll.前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区 ...

  5. 深入理解this机制系列第一篇——this的4种绑定规则

    × 目录 [1]默认绑定 [2]隐式绑定 [3]隐式丢失[4]显式绑定[5]new绑定[6]严格模式 前面的话 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅 ...

  6. 修复bootstrap daterangepicker中的3个问题

    最近项目中使用了一个基于Bootstrap的daterangepicker控件. 1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上. 具体描述: 1.点击打开日期选择框 2.选择一个日期范 ...

  7. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  8. ASP.NET 5 单元测试中使用依赖注入

    相关博文:<ASP.NET 5 使用 TestServer 进行单元测试> 在上一篇博文中,主要说的是,使用 TestServer 对 ASP.NET 5 WebApi 进行单元测试,依赖 ...

  9. 设计窘境：来自 Repository 的一丝线索，Domain Model 再重新设计

    写在前面 阅读目录: 疑惑解读 设计窘境 一幅图的灵感 为嘛还是你-Repository 后记 上一篇<No zuo no die:DDD 应对具体业务场景,Domain Model 重新设计& ...

  10. 1Z0-053 争议题目解析512

    1Z0-053 争议题目解析512 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 512.Which two statements correctly describe the r ...