css单位有：px，em，rem，vh，vw，vmin，vmax，ex，ch 等等

1、px单位最常见，也最直接，这里不做介绍。

2、em：em的值并不是固定，它继承父级元素的字体大小，所以层数越深字体越大。

 <body style="font-size:16px;">

     hello - font-size:16px

     <div style="font-size:1.5em;">

         hello 01 - font-size:24px

         <div style="font-size:1.5em;">

             hello 02 - font-size:36px

         </div>

     </div>

 </body>

3、rem：rem是css3新增的一个相对单位，与em不同的一点是rem相对于根元素(html)字体大小。tip：浏览器默认字体大小是16px。

 <body>

     hello - font-size:16px

     <div style="font-size:1.5rem;">

         hello 01 - font-size:24px

         <div style="font-size:1.5rem;">

             hello 02 - font-size:24px

         </div>

     </div>

 </body>

4、vh 和 vw

在进行响应式布局时，我们常常会使用百分比来布局，然而CSS的百分比不总是解决每个问题的最佳方案，CSS的宽度相对于离它最近的父元素的宽度。 如果你想使用视口的宽度、高度而不是父元素的宽高，可以使用vh和vw单位。 1vh = viewportHeight /100; 1vw = viewportWidth /100; 使用vh、vw就可以保证元素的宽高适应不同设备。

5、vmin 和 vmax

vw和vh对应于viewport的width和height，而vmin和vmax分别对应于width、height中的最小值和最大值，例如如果浏览器的宽/高为1000px/600px，那么 1vmin = 600 /100; vmax = 1000 /100;

6、ex 和 ch

ex、ch单位与em、rem相似之处在于都依赖于font-size，但是ex、ch还依赖于font-family，基于font-specific来计算。

不同大小屏幕手机的一个自适应策略：

先引入viewport.js（执行viewport.init();），字体用rem单位（需 /100），需要自适应的图标加上icon-*这样的类名。

 var viewport = {

     viewportWidth : document.documentElement.clientWidth,

     calc : function() {

         var rootSize = this.viewportWidth / 750 * 100;

         document.documentElement.style['font-size'] = rootSize + 'px';

     },

     resetImageScale : function() {

         var scaleStr = this.viewportWidth / 750;

         var imageScaleStyle = document.createElement('style');

         var inertCss =

             '\n\

             [class^="icon"]{\n\

                 zoom:' + scaleStr + ';\n\

             }\n\

         ';

         imageScaleStyle.innerHTML = inertCss;

         document.head.appendChild(imageScaleStyle);

     },

     init : function() {

         viewport.calc();

         viewport.resetImageScale();

         window.addEventListener('resize', function(){

             viewport.calc();

             viewport.resetImageScale();

         });

     }

 };

css单位盘点的更多相关文章

  1. 你可能没注意的CSS单位

    扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...

  2. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  3. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  4. 七个你可能不了解的CSS单位

    我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...

  5. css单位分析、颜色设置与调色板

    CSS单位分析 px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在 ...

  6. CSS：CSS 单位

    ylbtech-CSS:CSS 单位 1.返回顶部 1. 尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如, ...

  7. rem — 一个低调的css单位

    原文  http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...

  8. css单位中px和em,rem的区别

    css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...

  9. CSS单位计算总结

    CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...

随机推荐

  1. HttpURLConnection类

    导语 java.net.HttpURLConnectin类是URLConnection类的抽象子类.它在处理协议为HTTP的URL时特别有效.具体而言,它通过它可以获取和设置请求方法,确定是否重定向, ...

  2. ActiveMQ在Linux中的安装

    1.下载相关activeMQ安装包 下载路径:http://activemq.apache.org/download.html 下载最新安装包,选择Linux版进行下载 2.解压重命名 (1)解压: ...

  3. PRINCE2特征（三）

    提到不确定性,可能很多从事项目管理相关工作的人都会感同身受,一系列临时性问题,比如:变更.延期.调整.计划赶不上变化.团队调整等的出现,都是项目中再正常不过的内容.但正常不等于合理,我们还是要去思考一 ...

  4. podfile The dependency `` is not used in any concrete target

    内容提要: podfile升级之后到最新版本,pod里的内容必须明确指出所用第三方库的target,否则会出现The dependency `` is not used in any concrete ...

  5. ffmpeg视频截图命令

    ffmpeg.exe -i xxx.mp4 -y -f image2 -t 2 -s 64*320 xxx.jpg

  6. console 输出信息美化

    不久前在一些前端的网站上看到的效果,以前觉得console只是拿来做做调试,不过现在看到别人网站的console美化效果,这个还可以作为一种网站个性来显示的.. 以%c开头,后面的文字就打印的信息,后 ...

  7. Zookeeper学习之：paxos算法

    paxos算法的重要性众所周知,它给如今的分布式一致性提供了迄今为止最好的解决方案.无论是Lamport自己的论文描述,还是网上的诸多资料,对paxos的描述都是及其简洁的,给人的感觉是paxos看似 ...

  8. webpack使用的心得

    1 . 我们需要使用打包工具,首先第一步就得 执行 npm install进行安装,可是很多时候 加载速度很慢,这个时候我们可以 用淘宝镜像源,参考地址: p.p1 { margin: 0.0px 0 ...

  9. FlumeNG 笔记

    环境:CentOS6.6 64位 + FlumeNG 1.6 请参考推荐文档: Flume-ng的原理和使用 - JunezChen Blog - SegmentFault  https://segm ...

  10. CDCE913产生任意频率

    1,上TI官网下载CDCE913的datasheet和配置软件clock Pro.如果只需要配置CDCE913成某一个固定频率,那么用clock Pro可以很方便快捷. TI的初衷应该就是通过I2C配 ...