从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(CSS:Day25)
复习:从零开始学前端:grid布局和音频和媒体查询 — 今天你学习了吗?(CSS:Day24)
文章目录
前言
马上结尾了嗷~
第二十五节课:标签渐变和媒体查询
一、CSS3渐变
css渐变可以上你在两个或多个指定的颜色之间显示平稳的过渡,使用background-image属性来设置渐变属性
渐变类型可分为两种:
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 右它们的中心定义
注意:一个线性渐变,你必须至少定义两种颜色节点。
1.线性渐变
语法:
background-image:linear-gradient(color1.color2);
默认的方向就是:颜色从上往下渐变的
我们也可以通过一个参数(方位词)改变方向:)(top,right,bottom,left)
background-image:linear-gradient(to left.color1,color2);
也可以是斜对角:
backgground-image:linear-gradient(yto bottom right,color1,color2);
除了方位名词之外还可以使用角度
语法:
background-image:linear-gradient(0deg,pink,skyblue);
可以设置其占比:
background-image:linear-gradient(0deg,pink 20%,skyblue 80%);
重复线性渐变:
background-image:repeating-linear-gradient(red,yellow 10%, green 20%);
2.径向渐变
径向渐变:渐变的中心是center(表示在中心点),渐变的形状是ellipese(表示椭圆形)
background-image:radial-gradient(shape at poisition,start-color,…,last-color);
和线性渐变很像
background-image:radial-gradient(ellipse at bottom,pink 50%,skyblue 50%);
二、多媒体查询
在我们之前所学的布局,都是则很难对我们pc端,但是我们生活中使用的最多的还是我们的移动端。所以我们今天来看看移动端的常见布局。
常见的页面布局方式:
- 静态布局:px布局。
- 弹性布局:flex布局。
- 流式布局(Liquid Layout):主要划分区域的尺寸使用百分数(搭配min-width、max-height属性使用)。
- 自适应布局(Adaptive Layout):即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。(@media)
- 响应式布局(Responsive Layout):检测窗口大小利用bootstrap布局。
长度单位:
- px:px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
- %:根据父元素的宽度稳定。
- em:子元素字体大小的em是相对于父元素字体大小,div父级字体大小多少号,em就相对于父元素字体的大小改变,2em表示是父元素字体的2倍。
- rem:rem是全部的长度都相对于根元素
<html>
,html的字体大小多少,rem就相对于html的大小。 - fr:grid里面的单位
- vw:可视宽度(可以看到的宽度,与100%相比充满整个页面,而且不会产生滚动条)
- vh:可视高度
拓展:
- 如果只做pc端,那么静态布局(定宽度)是最好的选择;
- 如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
- 如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的宽高做不同的设计,响应式根据媒体查询做不同的布局。
1.为什么需要多媒体查询
当我们在网上看网页的时候,它会随着窗口的大小改变布局,自适应布局。
- 网页可以根据不同的设备或窗口呈现出不同的效果。
- 使用响应式布局,可以使一个网页适用于所有设备。
- 响应式布局的关键就是
媒体查询
。 - 通过媒体查询,可以为不同的设备或则设备不同的状态来分别设置样式。
2.多媒体查询的类型
语法:@media 媒体类型{ }
媒体类型:
- all ------ 适应所有设备。
- print ------ 打印设备。
- screen ------ 带屏幕的设备(手机,电脑)
- speech ------ 屏幕阅读器
3.多媒体查询属性
- width ------ 视口的宽度
- height ------ 视口的高度
- min-width ------ 视口的最小宽度【视口大于指定宽度生效】
- max-width ------ 视口的最大宽度【视口小于指定宽度生效】
关键字:
- and就是‘和’的意思,前后两个条件都达到时
- only,唯一
语法: @media (only)屏幕 and 条件 { 选择器 }
@media only screen and (min-width:500px) and (max-width:700px) {
/* 大于500小于700 */
body {
background-color: red;
}
}
预习:从零开始学前端:jQuery官网 — 今天你学习了吗?(CSS:Day26)
------叠叶与高节,俱从毫末生。