学习em rem vh vw与响应式布局

em原理与应用
em用在什么地方？
em制作一组响应式的按钮组件
em定义字号
rem定义字号
em实现响应式布局

1、em原理与应用

当前页面中的元素字号的计算的依据em(在html标签处找)
em:浏览器文本的默认字号的相对关键字，通常是16px。
1em=16px

用em值设定字体大小，EM值大小是动态的，当定义或继承FONT-SIZE属性时，1EM等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px.所以通常1EM=16px. 如果你设置了body元素的字体大小为20px,那1em=20px.那个1就是当前em大小的倍数。

em可以自动适应用户的字体，em是个非常有用的CSS单位。

一个流行的技巧是设置body元素的字体大小为62.5%，等于10px.通过计算基准大小10px的倍数，这样有6px=0.6EM.
body{
font-size:1.6em;/* 1.6em=16px */}

2、em用在什么地方？

+设置响应式的文本字号
font-size是可以被继承的。
当前H2的字号，继承自它的祖先元素body,html
想改变H2的字号大小

html{ font-size:20px; 也可以写成font-size:1.25em;
h2:默认就是1.5em  这里等于30px
}
body div:first-of-type{
    font-size:1em;
    width:10em;
    height:8em;
    background-color:lightgreen;
}

因为盒子的大小使用em，所以只需要设置盒子的font-size就可以动态的设置大小了。

3、em制作一组响应式的按钮组件

.btn{background-color:#1e9fff
color:#fff
border:none;
outline:none;
}
<body>
<button class="btn">button</button>
<button class="btn">button</button>
<button class="btn">button</button>
<body>
.btn:hover{
    opactiy:0.8;  透明度
    cursor:pointer;  鼠标手型
    box-shadow：0 0 3px #888;  阴影
    transiton:0.3s; 延时
 如果 想设置三个大小不同的按钮，只需要为这三个按钮指定不同的字号就可以了。
 sytle
 .small{font-size:10px; }
 .normal{font-size：16；}
 .larger{font-size:22}
 sytle
}

4、em定义字号

<style>
body{font-size:20px；或者
font-size:1.25em;
}
</style>

font-size具有继承性，h2 font-size 1.5em/30px 所以，span的font-size也是30px.
<h2>php.cn<span>php中文</span> </h2>
em:动态性和继承性，但是也有缺点
我们非常的需要一个固定值的em，它不应该它自身和祖先的字号大小而变动。
用rem就可以解决这个问题。rem就是一个固定值的em.

5、rem定义字号

html{此时1em=20px font-size:1.25em }
em的初始值就是用户代理的值，默认就是16px
当前font-size属性出现在了html中
html叫根元素，一个页面中它是唯一的且是最大的包含块
所以，在html中定义的em大小，可看成一个常量（固定值）
html的所有后代元素，如果想引用html中的字号，就不能再用em了。
因为em具有继承性。
此时，我们用一个新的关键字来引用根元素中的字号大小font-size的值
这个关键字就是rem
h2 span{1rem=1*20px font-size:1rem;}

6、em实现响应式布局

html{font-size:0.75em;
}
.panel{font-size:1rem;
padding:1em;
边框不要用em/rem,一定要用px
border-radius: 0.5em;
background-color:#999;
margin:2em;
}
.panel h2{ 以后的字号，强烈推荐使用rem设置。
    font-size:1.2rem;
    margin:1em 0;
}
.panel p{1.1rem=13.2px=12*1.1 
    font-size:1.1rem
    缩进2个字符。
    text-indent:2em;
    line-height:2;
        }
屏幕宽度>=800px,字号放大到4px  
@media screen and(min-width:800){
    14/16=0.875em
html{font-size:0.875em;
    .panel{background-color:wheat;
    }
}
屏幕宽度>=1000px,字号放大到16px.
@media screen and(min-width:1000){
    14/16=0.875em
html{font-size:1em;
    .panel{background-color:lightcyan;
    }
}
屏幕宽度>=1200px,字号放大到16px.
@media screen and(min-width:1200){
    14/16=0.875em
html{font-size:1.25em;
    .panel{background-color:lightskyblue;
    }
}
<div class=panel> <h2>内容</h2>
</div>

2、视口单位：vh/vw

除了字号用REM，其它地方都可以用EM.或者希望得到一个可测试的固定值用REM.
视口：可视窗口，浏览器窗口中用于显示文档的可视区域。视口不包括地址栏，工具条，菜单栏，状态栏。

vh：视口的”初始包含块”的高度的百分之一（1/100）
VW:视口的“初始包含块”的宽度的百分比（1/100）
这个主要用于移动端布局。

视口单位：vmin vmax

css可以自定义变量

—color：#0f00;
—a-border:1px solid;

css预处理器，用JS来编译CSS代码，less,sass