从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day25）

复习：从零开始学前端：grid布局和音频和媒体查询 — 今天你学习了吗？（Day24）

文章目录

• 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day25）
• • 前言
  • 第二十五节课：标签渐变和媒体查询
  • • 一、CSS3渐变
    • • 1.线性渐变
      • 2.径向渐变
    • 二、多媒体查询
    • • 1.为什么需要多媒体查询
      • 2.多媒体查询的类型
      • 3.多媒体查询属性

前言

马上结尾了嗷~

第二十五节课：标签渐变和媒体查询

一、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的字体大小多少，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官网 — 今天你学习了吗？（Day26）

------叠叶与高节，俱从毫末生。