<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <!--

     px、em、rem、vh、vw、vmin、vmax

     px:绝对单位(无论何种设备,均使用同等大小)

     em:相对于父类单位(上一级父类)

     rem:相对于根目录大小(html)

     vh:无论何种设备,相对于设备的百分比计算，viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

     vw:和上面的描述一样，viewpoint height，视窗高度，1vh等于视窗高度的1%。

     vmin:和上面的一样，vw和vh中较小的那个。

     vmax:和上面的一样，vw和vh中较大的那个。

     %:百分比

     in:寸

     cm:厘米

     mm:毫米

     pt:point/大约1/72寸

     pc:pica/大约6pt,1/6寸

     ex：

     取当前作用效果的字体的x的高度，

     在无法确定x高度的情况下以0.5em计算

     (IE11及以下均不支持，

     firefox/chrome/safari/opera/

     ios safari/android browser4.4+等均需属性加么有前缀)

     ch:

     以节点所使用字体中的“0”字符为基准，

     找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,

     ios safari 7.1+,android browser4.4+支持)

     支持度:

         IE9+局部支持

         chrome/firefox/safari/opera支持

         iOS safari 8+支持

         Android browser4.4+支持

         chrome for android39支持

   -->

 <!--

         局部bug:

         Chrome默认是:12px.

         不会小于10px(无论怎么设置)

         -->

 <style>

     html {

         font-size: 10px;

     }

     .first {

         font-size: 1rem;

         /*

             0.5rem相对于跟目录的2倍,当设置在body上时.

         */

         /*

             设置在跟目录上,1rem相对于原大小

         */

         /*

                 设置在父类上时,子类也会跟着改变

         */

     }

     .two {

         font-size: 1em;

         /*em相对于父元素的大小: 1em=原大小、2em=父类的两倍大小

           */

     }

     .three {

         /* font-size: 1vh; */

         font-size: 5vw;

         /* 12*5 */

     }

     .four {

         font-size: 72px;

     }

 </style>

 <!-- <script>

     var ele = document.getElementsByTagName("html")[0],

         var size = document.body.clientWidth / 320 * 20;

     ele.style.fontSize = size + "px";

 </script> -->

 <!--

     手机端设备像素比例:3\2\1

   -->

 <!--

       ps切图以最高高度保持一致

     -->

 <body>

     <header>

         <div class="first">

             我10px大小,就不变小宰了我啊

             <div class="two">

                 我跟着他,就不变大

             </div>

         </div>

     </header>

     <section>

         <div class="three">

             哈哈,我.. vh

         </div>

         <div class="four">

             哈哈,px在此

         </div>

     </section>

     <section>

         <div class="five"></div>

         <div class="six"></div>

     </section>

     <section>

     </section>

     <section></section>

     <section></section>

     <footer></footer>

 </body>

 </html>

css网页单位的更多相关文章

  1. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  2. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  3. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  4. 移动H5开发入门知识，CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  5. H5移动端开发入门知识以及CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  6. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  7. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  8. div+css网页标准布局实例教程（一）

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  9. CSS的单位 及 css3的calc() 及 line-height 百分比

    CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...

随机推荐

  1. thinkphp的where方法的使用

    1.Thinkphp中where()条件的使用 总是有人觉得,thinkphp的where()就是写我要进行增加.查询.修改.删除数据的条件,很简单的,其实我想告诉你,where()是写条件语句的,但 ...

  2. CodeForces 734E Anton and Tree

    $dfs$缩点,树形$dp$. 首先将连通块缩点,缩点后形成一个黑白节点相间的树.接下来的任务就是寻找一个$root$,使这棵树以$root$为根,树的高度是最小的(也就是一层一层染色).树形$dp$ ...

  3. Python3 文件读写r，w，a

    # Author;Tsukasa ''' f = open('yesterday','w') #文件句柄...注意open分为‘r’读模式,‘w’写模式(d会先创建文件或者覆盖文件),‘a’为追加模式 ...

  4. python之IO model

    一.事件驱动模型 在介绍协程时,遇到IO操作就切换,但什么时候切换回来,怎么确定IO操作结束? 很多人可能会考虑使用“线程池”或“连接池”.“线程池”旨在减少创建和销毁线程的频率,其维持一定合理数量的 ...

  5. Valid Palindrome（LintCode）

    Valid Palindrome Given a string, determine if it is a palindrome, considering only alphanumeric char ...

  6. 洛谷——P2708 硬币翻转

    P2708 硬币翻转 题目背景 难度系数:☆☆☆☆☆(如果你看懂了) 题目描述 从前有很多个硬币摆在一行,有正面朝上的,也有背面朝上的.正面朝上的用1表示,背面朝上的用0表示.现在要求从这行的第一个硬 ...

  7. Knockout.js(二)：监控数组属性（Observables Arrays）

    如果想发现并响应一个对象的变化,就应该使用监控属性(observables),如果想发现并响应一个集合的变化,就需要使用监控属性数组(observableArray).在很多情况下,它都非常有用,比如 ...

  8. BZOJ 3790 神奇项链（manacher+DP+树状数组）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3790 [题目大意] 问最少用几个回文串可以构成给出串,重叠部分可以合并 [题解] 我们 ...

  9. 【动态规划去除冗余】NOIP2010-乌龟棋

    [题目大意] [思路] 最简单的思路是五维数组,但是当前走到的步数由已经取到的卡片决定,所以只需要四维.本来想要改一个滚动数组的,但是好像没有滚起来,算了(ノ｀Д)ノ. 在学校要晚自习到21:15,回 ...

  10. [BalkanOI2016]Cruise

    题目大意: 平面直角坐标系内有n个点,每个点有一个点权. 你从原点p出发,走若干个点然后回到原点. 两个点之间只能笔直走,你的收获为你的路径围起来的区域内的所有店权和除以路径长度. 问最大收益. 思路 ...