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. 字节、字、bit、byte的关系

    字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte) 1字节=8位(1 byte = 8bit)  一个字的字长为16 一个字节的字长是8 bps ...

  2. jQuery form表单序列化为JSON对象！

    /* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...

  3. vue-router

    官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本) ...

  4. WPF学习系列 绘制旋转的立方体

    我是一年经验的web程序员,想学习一下wpf,比较喜欢做项目来学习,所以在网上找了一些项目,分析代码,尽量能够做到自己重新敲出来 第一个项目是 中间的方块会不停的旋转. 第一步,新建wpf项目 第二步 ...

  5. awk命令速查

    awk与sed.grep一样都是为了加工数据流而做成的文本加工过滤器命令.awk会事先把输入的数据根据字段单位进行分割.在没有制定分割单位的情况下,以输入数据中的空格或Tab为分隔符.与sed相比,它 ...

  6. ElasticSearch中bulkProcesser使用

    初次接触es,可能对增删改查很熟悉,以为能为得心应手,本次应用场景为 数据库变更一条记录,会触发更新es中的数据,每秒并发大概30条左右,测试环境一切工作正常(数据量较少),上线后发现日志中很多类似于 ...

  7. CentOS 7网卡网桥、绑定设置

    一.网卡桥接设置: 1.网卡配置文件: [root@localhost /]# vim /etc/sysconfig/network-scripts/ifcfg-enp8s0 TYPE=Etherne ...

  8. shell脚本自动拉起启动程序

    一.我们先看看编写的shell脚本的内容,该shell的作用主要是实现监控某个程序崩溃之后就自动重启该进程. while true do procnum=` ps -ef|grep "tes ...

  9. kvm初试0

    1.安装ubuntu 14 2.更新apt-get源 deb http://mirrors.sohu.com/ubuntu/ trusty main restricted universe multi ...

  10. vue2.0---模板语法

    ***插值 #文本 数据绑定最常见的形式就是双大括号的形式: <div id="app">{{message}}</div> 只要绑定的属性message上 ...