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. 在Eclipse中使用建立使用Gradle做依赖管理的Spring Boot工程

    前述: Gradle存在很长时间了,以前只知道Maven和ivy ,最近才知道有这个存在,因为以后要用这个了; 所以,要先学会怎么用这个工具,就从建立一个简单工程开始! 实际上以前是见过Gradle的 ...

  2. maven配置和下载

    下载链接:http://maven.apache.org/docs/ 以maven3.0.4为例,eclipse以kepler为例 环境变量的配置 1.系统变量-新建-变量名:MAVEN_HOME-变 ...

  3. 高介分类：核方法与支持向量机（SVM）

        数据模型:并不是简单地二维数据,多个维度或者对象的数据聚合起来      {           persion1's attr1:value1,...,persion1's attrN:va ...

  4. web.xml加载顺序

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  5. 【BZOJ-2938】病毒 Trie图 + 拓扑排序

    2938: [Poi2000]病毒 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 609  Solved: 318[Submit][Status][Di ...

  6. 源码编译安装postgresql

    依赖的库:libreadline-dev,zlib1g-dev 安装:下载解压源码包,然后 ./configure,make,make install即可.. 注意不能在root账户下跑server, ...

  7. centos 安装lnmp

    1:查看环境 cat /etc/redhat-release 2:关闭防火墙 chkconfig iptables off 3:配置CentOS 6.0 第三方yum源(CentOS默认的标准源里没有 ...

  8. TYVJ1035 棋盘覆盖

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 给出一张n*n(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少1*2的多米诺骨牌进行掩 ...

  9. shell命令find

    概述 find命令的工作方式:沿着文件层次结构向下遍历,匹配符合条件的文件,并执行相应的操作. 选项 -print:指明打印出匹配文件的文件名(路径).当使用-print时,'\n'作为用于分隔文件的 ...

  10. lucene+IKAnalyzer实现中文纯文本检索系统

    首先IntelliJ IDEA中搭建Maven项目(web):spring+SpringMVC+Lucene+IKAnalyzer spring+SpringMVC搭建项目可以参考我的博客 整合Luc ...