HTML5学习笔记(2.0)

响应式布局

优点：兼容不同设备分辨率，解决多设备显示兼容问题。

缺点：兼容设备工作量大，效率低下；代码冗余，加载时间长；一定程度上改变原网站的布局，会出现视觉混淆。

用法：

@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-是火狐浏览器