1.1 响应式布局
-
一个项中有多种布局方案,会根据设备的大小显示出不同的布局
-
响应式的关键点:要知道设备什么时候发生改变
-
媒体查询就能检测设备的大小
-
媒体查询的语法
-
@media 你要检测的设备类型 关键字 (条件){ 满足该条件执行的语句 }
-
min-width:大于等于
-
max-width:小于等于
-
-
/* 横屏 */ @media all and (orientation:landscape){ body{ background-color: red; } } /* 竖屏 */ @media all and (orientation:portrait){ body{ background-color: green; } }
1.2 渐变
-
线性
-
从一个方向变到另一个方向
-
background-image:linear-gradient(方向,颜色1,颜色2。。。)
-
如果加了浏览器的前缀,方向词不能写to,写的起点
-
如果不加前缀,方向词需要些to。写的是终点
-
写方向的时候
-
用方向词书写
-
用角度写,角度单位是deg
-
-
重复渐变
-
在渐变单词之前写repeating
-
在颜色的后面写百分比
-
-
-
径向
-
从一个点想四周扩散
-
background-image:radial-gradient(起点,颜色1,颜色2。。。)
-
写了起点就要带前缀
-
不写起点,默认是中心点,可以不带前缀
-
写起点的时候
-
可以用方向词写
-
写坐标点
-
-
重复渐变
-
在渐变单词之前写repeating
-
在颜色的后面写百分比
-
-
形状
-
正方形:默认圆形,只能呈现出圆形
-
长方形:默认椭圆形,可以更改成圆形
-
通过下面2个单词可以更改渐变的形状,写在颜色词前面即可
-
circle=====圆
-
ellipse====椭圆
-
-
大小
-
closest-side:最近边
-
farthest-side:最远边
-
closest-corner:最近⻆
-
farthest-corner:最远⻆,默认值
-
-
1.3 浏览器的内核与前缀
-
谷歌chrome==》内核webkit==》前缀-webkit-
-
火狐firefox==》内核gecko===》前缀-moz-
-
苹果safari===》内核webkit==>前缀-webkit-
-
欧鹏opera==》内核blink==》前缀-o-
-
IE===》内核trident==》前缀-ms-
-
edge==》内核webkit==》前缀-webkit-
1.4 隐藏滚动条
::-webkit-scrollbar{
display:none
}