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. 信息中心网络 ，Information-centric networking， ICN

  2. STL sort 函数实现详解

    作者:fengcc 原创作品 转载请注明出处 前几天阿里电话一面,被问到STL中sort函数的实现.以前没有仔细探究过,听人说是快速排序,于是回答说用快速排序实现的,但听电话另一端面试官的声音,感觉不 ...

  3. openssl用法详解

    OpenSSL 是一个开源项目,其组成主要包括一下三个组件: openssl:多用途的命令行工具 libcrypto:加密算法库 libssl:加密模块应用库,实现了ssl及tls openssl可以 ...

  4. 微信小程序-关于重定向问题

    关于微信的重定向问题 wx.redirectTo(OBJECT) 参数 参数 类型 必填 说明 url 串 是 需要跳转的应用内页面的路径 成功 功能 否 接口调用成功的回调函数 失败 功能 否 接口 ...

  5. Android组件化和插件化开发

    http://www.cnblogs.com/android-blogs/p/5703355.html 什么是组件化和插件化? 组件化开发就是将一个app分成多个模块,每个模块都是一个组件(Modul ...

  6. MVC中得到成员元数据的Description特性描述信息公用方法

    #region 从类型成员获取指定的Attribute T特性集合 /// <summary> /// 从类型成员获取指定的Attribute T特性集合 /// </summary ...

  7. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  8. mysql数据库远程访问指定数据库设置

    grant all privileges on huarenwang.* to 'huarenwang'@'%' IDENTIFIED BY 'huarenwang'; on后面的是指定的数据库to后 ...

  9. datagrid

    <!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Aria ...

  10. form表单的属性标签和练习

    form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...