响应式布局
优点：兼容不同设备分辨率，解决多设备显示兼容问题。
缺点：兼容设备工作量大，效率低下；代码冗余，加载时间长；一定程度上改变原网站的布局，会出现视觉混淆。
用法：
@media screen and (max-width:1000px){
background:red;
}该实例表明，当屏幕小于等于1000px时改变背景颜色为红色。
同理也可以写min-width:npx;
还有就是可以对水平方向或竖屏显示进行设置：
@media screen and (orientation:portrait){ //竖屏方向
}横屏为：landscape
怪异盒模型设置：
box-sizing:border-box;
怪异盒模型不会因为元素设置了边距，padding，margin，border而扩大整体元素的大小，而是进行内缩，整体元素大小并不会改变。
em:相对单位，相对于父元素的字体大小。如：div width:10em;
rem:相对单位，相对于根元素（HTML）字体大小, div width:10rem；
.div{
font-size:16px;
}
.div p{
font-size:2em; //2倍的父元素div的大小
}html{
font-size:10px;
}
.div2 p{
font-size:2rem;
}扩展JS部分适配屏幕代码：
<script>
document.documentElement.style.fontSize=document.documentElement.clientWidth/750*100 +'px'
</script>
//fontsize=当前设备的css布局宽度/物理分辨率（设计稿的宽度）*基准font-size
vw(view-width)与vh（view-height）
div{
width:100vw;
height:100vh;
}100vw是屏幕的宽，100vh是屏幕的高。
在没有滚动条时，100vw=width=100%
在有滚动条时，vw占满整个窗口，包括滚动条的空间；而100%是除了滚动条外，占满剩余的空间。
渐变
线性渐变
{background:liner-gradient( to top,red,green,yellow)}to bottom:默认方向
to left/to right 还可以两两组合：例如左上，右下，左下，右上
支持角度的写法：(0deg,red,green)
意义为从0度开始渐变。
径向渐变
background:radial-gradient( circle,red 0%,green 20%,purple 50%);
不同尺寸的渐变
-webkit-radial-gradient(60% 40%,closest-side,blue,green,yellow,black)
-webkit-是谷歌浏览器兼容的指定前缀
-moz-是火狐浏览器
