100字范文 > 从零开始学前端：标签渐变和媒体查询 --- 今天你学习了吗？（CSS：Day25）

从零开始学前端：标签渐变和媒体查询 --- 今天你学习了吗？（CSS：Day25）

时间：2024-04-19 03:17:30

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

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

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS：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>，html的字体大小多少，rem就相对于html的大小。fr：grid里面的单位vw：可视宽度（可以看到的宽度，与100%相比充满整个页面，而且不会产生滚动条）vh：可视高度

拓展：

如果只做pc端，那么静态布局（定宽度）是最好的选择；如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的宽高做不同的设计，响应式根据媒体查询做不同的布局。