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. RecycleView 实现多布局

    最近的一个新需求,简单描述下吧: 需求: 目标样式如图所示,我们需要根据需求动态添加网关和设备. 目标有了下面就是怎么实现了.首先我们选用的是RecycleView 那么主要目标就成了 在recycl ...

  2. C文件读写

    0. 文件操作相关函数 1.  文件分为字符方式读写,字节方式(二进制方式)读写 fprintf / fscanf FILE * file; //全局定义 void save(Book books[] ...

  3. 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法（非简单设置为【经典】模式）。

      ×   检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...

  4. Activity详解生命周期(Android)

    Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器)之 ...

  5. 页内多个input全选不干扰且只用一段代码。

    //html内容 <body> <div id="d1"> <input type="checkbox" class=" ...

  6. UEFI模式安装Win10和Linux双系统

    最近心血来潮,想装一个Linux.Windows双系统,吸取上次安装的经验,这次一定都要使用UEFI模式启动,需要注意的是必须是支持此种启动模式的系统(一般解压之后都有efi文件夹不需要刻录),这次遇 ...

  7. JUC学习笔记--Thread多线程基础

    实现多线程的两种方法 java 实现多线程通过两种方式1.继承Thread类 ,2.实现Runnable接口 class Newthead extends Thread{ public void ru ...

  8. ubuntu修改163软件源

    cd /etc/apt cat sources.list sudo su root sudo echo '' > sources.list nano sources.list 复制163软件源 ...

  9. Material Design

    4.适应性设计 底层设计系统包括了交互和空间两部分.每一个设备都能反映出同一底层系统的不同侧面.每一设备的界面都会按照大小和交互进行调整.只有颜色,图标,层次结构和空间关系保持不变. 它不仅仅为了好看 ...

  10. spring batch资料收集

    spring batch官网 Spring Batch在大型企业中的最佳实践 一篇文章全面解析大数据批处理框架Spring Batch Spring Batch系列总括