本文介绍了CSS中的变量定义与作用域，包括局部和全局变量，以及如何使用calc()进行动态计算。接着讲解了媒体查询的概念和应用，用于实现不同屏幕尺寸下的样式适配。此外，还探讨了几种响应式布局方案，如结合媒体查询和rem、flexible.js、vw以及px转换插件实现自适应设计。最后提到了DPR（设备像素比）对图像显示质量的影响。
一、变量 --变量名
1、变量的作用域
1）变量的作用域就是变量的作用范围；
2）在当前元素的选择器中定义的变量，只能在当前元素以及它的后代元素中使用，使用变量时，会先在当前元素中查找变量的值，如果没有定义就往上一级查找，直到找到根标签（:root）
2、全局变量
定义在根标签中的变量是全局变量（作用域为所有标签，即在当前元素以及所有后代元素中都可以使用）
3、定义变量以及使用变量 --变量名
1）定义变量
代码示例：
--primaryColor: rgb(78,211,69);
定义一个名为primaryColor的变量，变量值为rgb(78,211,69)
2）使用变量
代码示例：
color: var(--primaryColor);
将变量primaryColor的值作为color的属性值
二、计算函数 calc()
1、calc() 计算函数
代码示例：
width: calc(200px + 20px);
设置宽度为220px
width: calc(50% - 30px);
设置宽度为包含块宽度-50px
2、注意：
1）括号中的运算符两侧必须留空格，否则会失效！！！
2）括号中可以是像素也可以是百分比
三、媒体查询 @media screen and (){css};
1、什么是媒体查询？
通过检测用户当前使用的屏幕大小来写对应的css样式
2、最大宽度和最小宽度
max-width 最大宽度（包含最大宽度）
min-width 最小宽度（包含最小宽度）
2、如何使用媒体查询？
1）内嵌式
写在style标签内，类似于css样式的书写，代码示例：
@media screen and (min-width:1200px){css};
@media screen and (min-width:750px) and (max-width:1200px){css};
@media screen and (max-width:750px) {css};
表示如果屏幕尺寸>=1200px时，执行某些样式；
如果 750px<=屏幕尺寸<=1200px时，执行某些样式；
如果 屏幕尺寸<=750时，执行某些样式；
2）外联式
创建一个.css后缀的文件，将媒体查询写在文件里，再用link标签引入，并设置media属性为不同的条件（满足条件时才引入），代码示例：
<link rel="stylesheet" href="./index1200.css" media="screen and (min-width:1200px)">
<link rel="stylesheet" href="./index750_1200.css" media="screen and (min-width:750px) and (max-width:1200px)">
<link rel="stylesheet" href="./index750.css" media="screen and (max-width:750px)">
表示如果屏幕尺寸>=1200px时，引入第一个css文件；如果750px<=屏幕尺寸<=1200px时，引入第二个css文件；如果屏幕尺寸<=750px时，引入第三个css文件
2、注意：
书写媒体查询的条件时，后面书写的会覆盖前面书写的，比如上面的代码示例中，对于尺寸为750px的屏幕，如果第三个和第二个文件中有相同的属性，那么最终会展示第三个css文件中重复属性的样式
四、响应式单位 rem&em&vm
1、rem和em的含义
1）rem是一个响应式单位，会根据根元素(:root)的字体大小来的确定具体数值，1rem=1个根元素的字体大小
2）em是一个响应式单位，会根据元素自身的字体大小来的，1em=1个元素自身的字体大小，如果元素自身没有设置字体大小（默认就是没有的），会向上查找父元素的字体大小，如果还是没有会继续向上逐级查找，直到根元素（默认字体大小16px）
3）vm是一个响应式单位，他会根据屏幕的尺寸（宽度）来确定自身的具体数值，100vm = 1屏幕尺寸宽度
五、视口 viewport
1、视口关联的标签属性
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no",maximum-scale=1,minimum-scale=1>
1）meta：元数据元素
2）name="viewport"：这个元素和视口相关
3）width=device-width：将布局视口等同于视图视口
4）initial-scale=1：默认缩放为1
5）user-scalable=no：不允许用户缩放，这个属性在某些浏览器中无效！！！
6）maximum-scale=1：最大缩放为1
7）minimum-scale=1：最小缩放为1
8）注意：
在移动端是不允许用户进行缩放的，因此需要加上下面这条代码：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1" />
这串代码的作用是将布局视口和视图视口相等同（如果不加，会使用默认的980px的布局视口），并让用户无法进行缩放
2、移动端视口概念
移动端有三个视口的相关概念
1）布局视口
在移动端默认布局视口为980px，它是给页面布局的时候用的
2）视图视口
就是不同设备的视口
3）理想视口
当布局视口和视图视口相等时，这个视口就是理想视口（width=device-width）
六、meta元数据补充
除了视口相关联的元数据以外还有很多元数据，代码示例：
1、<meta charset="UTF-8">
设置字符编码为UTF-8
2、<meta name="keywords" content="电商,衣服,电脑,商城,手机"/>
设置网络关键字，给SEO搜索引擎优化使用
3、<meta name="description" content="这是一个电商网站"/>
设置网站的描述信息
七、自适应布局方案：媒体查询+rem
1、为什么需要自适应布局？
因为设计稿只有一份（比如说设计稿的尺寸为375px），一个元素w100+h100+fs24，如果屏幕变大，尺寸也需要变大，屏幕变小尺寸也跟着变小，为满足这个需求就需要用到自适应布局
2、自适应布局方案一：媒体查询+rem
步骤如下：
1）通过媒体查询来给不同尺寸的屏幕设置不同的字体大小
2）再用响应式单位rem取代px设置元素具体的尺寸，即可实现自适应布局
八、自适应布局方案：flexible+rem
1、自适应布局方案二：flexible+rem
步骤如下：
1）通过link标签引入js文件src="./flexible.js"，这个js文件会将屏幕分为10等分，它会自动给html设置一个字体大小（就是屏幕宽度的十分之一）
2）安装插件px to rem，这个插件作用是可以将书写的px值转化为对应的rem值，免去繁琐的计算
3）先写入测量好的px值，用rem取代px设置元素具体的尺寸，即可实现自适应布局
九、自适应布局方案：vw+rem
1、自适应布局方案三：vw+rem
步骤如下：
1）将font-size用vm单位取到合适的大小（100vm的值等同于屏幕的宽度像素值）
2）用rem取代px设置元素具体的尺寸，即可实现自适应布局
十、自适应布局方案：纯vw
1、自适应布局方案四：纯vw
步骤如下：
1）安装px2vm插件，这个插件作用是可以将书写的px值转化为对应的vm值，免去繁琐的计算
2）将font-size用vm单位取到合适的大小（100vm的值等同于屏幕的宽度像素值）
3）先写入测量好的px值，用vm取代px设置元素具体的尺寸，即可实现自适应布局
十一、DPR
1、物理像素
设备分辨率指的是物理像素，比如iphone6的设备分辨率为750*1334
2、逻辑像素
css像素就是逻辑像素，我们在vscode中写的1px就是1个逻辑像素
3、DPR
DPR = 物理像素 / 逻辑像素
DPR越大，图像显示越细腻
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
