持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
“金秋十月，我要连续30天更文，做劳模，拿手机摄影神器！点击查看活动详情 “即可成功参与
媒体查询的介绍
场景：手机屏幕大小不同，分辨率不同，如何设置不同的html标签
解决方案：需要使用媒体查询来设置差异化CSS样式
媒体查询是CSS3的新语法，媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
- 使用@media查询，可以针对不用的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面
- 目前针对很多苹果手机、安卓手机、平板等设备都用到多媒体查询
媒体查询主要是解决：移动端不同屏幕下的适配问题，通过媒体查询能够检测到视口的宽度，然后编写差异化的CSS样式，当某个条件成立时，就会执行对应的CSS样式。
媒体查询的基本语法
@定义一个媒体查询 媒体类型（设备） 关键字 媒体特性（检测的视口宽度）
@media mediatype and|not|only (media feature){
当符合条件时执行的CSS样式；
css-Code;
}
使用@media 开头
@ 之前在动画和字体见过，@表示的是定义，定义一个动画，和定义一个字体
这里表示定义一个媒体查询
mediatype 媒体类型
（设备）
将不同的终端设备划分成不同的类型，称为媒体类型
and not only 关键字
（将设备和检测视口宽度条件链接到一起）
将媒体类型 或 多个媒体特性 链接 到一起 做为 媒体查询的条件
media feature 媒体特性
（检测视口宽度）
必须有小括号包含
每个媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，注意他们要加小括号（暂且了解三个）
widht
宽度定死，然后媒体查询检测视口的宽度，当这其中的某个条件成立时，就执行对应的CSS样式
/* 视口宽度320px，根字号为32px */
@media screen and (width:320px) {
html {
font-size: 32px;
}
}
/* 视口宽度375px，根字号为37.5px */
@media screen and (width:375px) {
html {
font-size: 37.5px;
}
}
/* 视口宽度414px，根字号为41.4px */
@media screen and (width:414px) {
html {
font-size: 41.4px;
}
}
min-width （从小到大）
设备页面可见的最小宽度 页面宽度大于等于
max-width（从大到小）
设备页面可见的最大宽度 页面宽度小于等于
媒体查询综合写法
这句话的意思是： 媒体类型为：电脑屏幕 并且 媒体特性:最大宽度是800px 设置我们想要的样式
@media screen and (max-width：800px){
body{
background-color：pink； /*如果在屏幕上并且宽度小于等于800像素时，body的背景颜色就变成粉色*/
}
}
@media screen and (max-width：500px){
body{
background-color：red； /*如果在屏幕上并且宽度小于等于500像素时，body的背景颜色就变成红色*/
}
}
总结：媒体查询可以根据不同的屏幕尺寸来改变不同的样式
媒体查询现在的写法
媒体查询现在的写法：可以将将媒体类型和关键词省略
如何确定根字号大小
场景：想要屏幕有适配的效果，我们需要媒体查询里写上不同视口下的根字号大小，但是根字号大小是如何确定的？
解决方案：
- 根字号大小是根据视口大小来确定的
1、确定设计稿对应的设备的html标签字号 比如屏幕视口是375的，那么他的根字号就是37.5/2
查看设计稿宽度 → 确定参考设备宽度（视口宽度） → 确定基准根字号（1/10视口宽度）
html字号=视口宽度÷10
后面不用手写媒体查询来设置不同视口下根字号的大小，引入flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
如何确定rem单位的大小
场景：我们在书写代码时，根字号是根据视口的大小确定的，但是元素的rem值是需要我们计算来确定的。
解决方案：
- rem单位的尺寸
/* 视口宽度320px，根字号为32px */
@media screen and (width:320px) {
html {
font-size: 32px;
}
}
/* 视口宽度375px，根字号为37.5px */
@media screen and (width:375px) {
html {
font-size: 37.5px;
}
}
/* 视口宽度414px，根字号为41.4px */
@media screen and (width:414px) {
html {
font-size: 41.4px;
}
}
div {
/* 我的需求：我想在视口是375的大小下，我的盒子大小为40px */
width: 1.06rem; rem=60/37.5
height: 1.06rem; rem=60/37.5
background-color: pink;
}
手写媒体查询的弊端和解决方案
弊端：以上我们学习的媒体查询也只是检测了三个视口，并且分别设置了根字号，但是手机设备多，屏幕尺寸不统一，视口不仅仅只有这三个
解决方案为：使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
rem+媒体查询适配方案技术使用（市场主流）
适配目标
1、让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
2、使用媒体查询根据不同设备按比例设置html字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
技术方案
- flexible.js
使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
flexible.js是手淘开发出的一个用来适配移动端的js框架
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
只要是用rem做适配，在工作中我们不需要手动写媒体查询来检测视口宽度，直接引入flexible.js就行
