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的字体大小设为1rem,那么转换为像素就是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. Web方式预览Office/Word/Excel/pdf文件解决方案

    最近在做项目时需要在Web端预览一些Office文件,经过在万能的互联网上一番搜索确定并解决了. 虽然其中碰到的一些问题已经通过搜索和自己研究解决了,但是觉得有必要将整个过程记录下来,以方便自己以后查 ...

  2. OAF_VO系列4 - Row Imp的分析(概念)

    20150706 Created By BaoXinjian

  3. Preventing CSRF in Java web apps---reference

    reference from:http://ricardozuasti.com/2012/preventing-csrf-in-java-web-apps/ Cross-site request fo ...

  4. zookeeper入门必读

    (如果感觉有帮助,请帮忙点推荐,添加关注,谢谢!你的支持是我不断更新文章的动力.本博客会逐步推出一系列的关于大型网站架构.分布式应用.设计模式.架构模式等方面的系列文章) 今天我想谈谈zookeepe ...

  5. 批处理备份和恢复mysql数据库

    备份 set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%" md "D: ...

  6. Spring、Spring依赖注入与编码剖析Spring依赖注入的原理

    Spring依赖注入 新建PersonIDao 和PersonDao底实现Save方法: public interface PersonIDao { public void save(); } pub ...

  7. jquery中append与appendTo方法区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  8. github代码搜索技巧

    github是一个非常丰富的资源,但是面对这丰富的资源很多人不知到怎么使用,更谈不上怎么贡献给他,我们需要使用github就要学习使用他的方法,学会了使用的方法,接受了他的这种观点我们才会慢慢的给他贡 ...

  9. 你可能不知道的web api

    简介 作为前端工作者,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法.用处以及浏览器 ...

  10. windows开机提示文件损坏

    今早按部就班的开机,然后准备吃热干面,很多时候事情都是同步进行的... 然后眼前出现这样一个界面 心情果断灰暗下来,按照提示一步步操作,点enter进入高级选项,试过了安全模式启动.最后一次正确配置启 ...