媒体查询

@Media

视口 viewpoint

.约束<html>的大小

.显示内容，和浏览器窗口大小一致；不包括底部的状态栏和顶部的菜单栏和地址栏

.在<head>引入视口 viewport

.VS Code创建的html页面默认已提供；其它开发环境注意确认是否有

<meta name="viewport" content="width=device-width, initial-scale=1.0">

类别	说明
width	视口宽度
initial-scale	初始缩放比例，默认1
minmum-scale	最小缩放比例
maxmum-scale	最大缩放比例
user-scalable	是否缩放yes[默认]\|no

.是苹果公司为了解决移动端浏览器的页面渲染而提出的方案，后来被其它移动设备公司采用，即：浏览器的宽度=设备屏幕的宽度

.通常只使用前面两个属性

.用户缩放行为：微信扫码响应，QQ浏览器不响应；无论是否允许缩放，都能缩放[流氓浏览器]

.width指浏览器的屏幕宽度；通常认为和设备宽度保持一致，不做区分，特别是移动端[你在移动端对浏览器进行过最大最小化操作吗？]

.device-width指设备屏幕的宽度，对于特定的设备，宽度是固定的

.如果修改视口大小为300，则真机调试的结果也为300，所以默认情况下，设置浏览器的宽度等于设备屏幕的宽度

<meta name="viewport" content="width=300, initial-scale=1.0">

[]获取视口大小 - 缩放浏览器、最大化、最小化，结果相应变化

let w = document.documentElement.clientWidth;
let h = document.documentElement.clientHeight;
console.log(w, h);

[]真机调试-移动端视口

.开发环境中，切换为移动设备后，调试的视口大小和真机测试不一致

.使用上述代码，在华为某真机上，微信扫码显示为宽高为400*745；浏览器输入地址查看为360*597[真机调试需要手机和电脑处于同一个WIFI内]

.查看屏幕大小：真机上，微信扫码为400*867[宽度一致，高度不一致，是因为视口高度+上方的标题栏+下方的状态栏=屏幕宽度]；浏览器输入地址查看360*780[原理相同]；之所以微信扫码结果比浏览器宽度大，是因为浏览器有40px的滚动条；所以移动端开发，通常会指定最小宽度为320px

let sw = window.screen.width;
let sh = window.screen.height;

移动端容器最小尺寸

min-width: 320px;

断点 breakpoint

利用断点 breakpoint 划分尺寸

尺寸断点 breakpoint 应以实际内容为主，如根据导航条灵活指定

通常以Ipnone6（375*667）为标准进行设计图的设计

类别	说明	备注
large	>1200
normal	<1200	iPad横版 1024*768
medium	<992	iPad竖版 768*1024
small	<768	iPhone6/7/8 375667 iPhoneX 375812
tiny	<576

调试

使用开发者工具查看各断点预置

上部灰色区域是系统预置断点；下部蓝色区域是自定义断点

鼠标移入查看各断点

断点预置

超大屏

普通屏

平板

移动大屏

移动普通屏

移动迷你屏

语法

需要指定媒体类型 mediaType 和媒体特性 mediaFeature

@media screen and (max-width: 1200px) {
  // CSS样式
}

mediaType：all 所有设备、screen 屏幕、print 打印、speech 屏幕阅读器/发声设备等；默认是屏幕 screen

mediaFeature：适配当前媒体尺寸的样式；通常指定一个区间

.max-width：尺寸小于或等于 <= 当前值时，样式生效

.min-width：尺寸大于或等于 >= 当前值时，样式生效

.使用关键字确定区间：AND、NOT、ONLY等；关键字两端需要空格同其它分隔开来

.通常根据尺寸响应；还可以根据比例响应 aspect-ratio，不过使用较少

.使用关系运算符：<=、>=等等；可读性更好；请在Can I Use查看 media query 中范围 range 的支持情况

媒体查询通常写在原有样式|基础样式的最后面

媒体查询同样具有优先和重叠等特性，所以要特别注意顺序

@media (width>=768px) {
  a {
    background-color: #f40;
  }
}

相当于

@media (min-width: 768px) {
  a {
    background-color: #089;
  }
}

其它使用

@media (768px <=width <=1024px) {
  a {
    background-color: #f40;
    color: #fff;
  }
}

桌面优先 Desktop First

优先满足桌面端，然后逐步减小尺寸

使用max-width，从默认的大尺寸向小尺寸过渡

//默认是大尺寸 large... ...

//normal... ...
@media screen and (max-width: 1200px) {
}

//medium... ...
@media screen and (max-width: 992px) {
}

//small... ...
@media screen and (max-width: 768px) {
}

移动优先 Mobile First

优先满足移动端，逐步增加尺寸

使用min-width，从默认的小尺寸向大尺寸过渡

//默认是小尺寸 small... ...

//normal... ...
@media screen and (min-width:768px) {
}

//medium... ...
@media screen and (min-width:992px) {
}

//large... ...
@media screen and (min-width:1200px) {
}

//2K - 2048x1152 2048x1536
@media screen and (min-width:2048px) {
}

其他使用

//使用关键字
@media screen AND (min-width:768px) AND (max-width:992px) {

}

//使用关系运算符；省略screen
@media (width<=768px) {
  body {
    background-color: #f40;
  }
}

//使用比例-较少使用
@media (min-aspect-ratio:1/1) {
  body {
    background-color: #f40;
  }
}

@media (min-aspect-ratio:16/9) {
  body {
    background-color: #890;
  }
}

.xxx-device-width和xxx-width不一样；对桌面端而言[不开启toggl device选项]，设备宽度是固定的，并不会响应媒体查询

.开发者视图中，切换设备时，改变的就是对应设备的设备宽度；不切换设备，改变的是浏览器的宽度

实现 Implementation

.媒体查询的不同运用

外部样式

.link - 在 HTML 中根据媒体尺寸动态引入 link 对应的外部CSS文件

<link rel="stylesheet" media="screen and (min-width:1201px)" href="./media_large.css">
<link rel="stylesheet" media="screen and (max-width:1200px)" href="./media_medium.css">
<link rel="stylesheet" media="screen and (max-width:992px)" href="./media_normal.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./media_small.css">

. @import - 在主样式文件 app.css 引入响应的CSS文件

@import url(./css/media_large.css);
@import url(./css/media_medium.css) only screen and (max-width:1200px);
@import url(./css/media_normal.css) only screen and (max-width:992px);
@import url(./css/media_small.css) only screen and (max-width:768px);

内部样式

. 同一个 <style> 直接编辑内部样式

body {
  background-color: #f2f3f4;
}

@media screen and (max-width: 1200px) {
  body {
    background-color: #908;
  }
}

@media screen and (max-width: 992px) {
  body {
    background-color: #890;
  }
}

@media screen and (max-width: 768px) {
  body {
    background-color: #f40;
  }
}

. 不同的<style> 编辑内部样式

<style>
  body {
    background-color: #f2f3f3;
  }
</style>

<style media="(max-width:1200px)">
  body {
    background-color: #908;
  }
</style>

<style media="(max-width:992px)">
  body {
    background-color: #890;
  }
</style>

<style media="(max-width:768px)">
  body {
    background-color: #f40;
  }
</style>

内联样式

特定元素的媒体查询 - <picture>

<picture>
  <source srcset="https://picsum.photos/400/300?random=0" media="(max-width:768px)">
  <img src="https://picsum.photos/800/600?random=0" alt="">
</picture>

案例 Cases

[] 画廊

.内部样式

.默认是大屏，>1200px，显式4列

.≤1200px，显式3列

.≤992px，显式2列

.≤768px，显式1列

<div class="wrap">
  <img src="./imgs/1.jpg" alt="">
  <img src="./imgs/2.jpg" alt="">
  <img src="./imgs/3.jpg" alt="">
  <img src="./imgs/4.jpg" alt="">
  <img src="./imgs/5.jpg" alt="">
  <img src="./imgs/6.jpg" alt="">
</div>

方案1：使用 grid 实现 - 桌面优先

.wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media screen and (max-width: 1200px) {
  .wrap {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .wrap {
    grid-template-columns: repeat(1, 1fr);
  }
}

方案 2：使用%实现 - 移动优先；采用了 float，记得清除浮动

.wrap img {
  float: left;
  width: 100%;
  aspect-ratio: 16/9;
}

@media (min-width:768px) {
  .wrap img {
    width: 50%;
  }
}

@media (min-width:992px) {
  .wrap img {
    width: 33.3%;
  }
}

@media (min-width:1200px) {
  .wrap img {
    width: 25%;
  }
}

其它方案：请参考grid万能的自适应布局 gird布局

[] 小尺寸时使用普通小图；大尺寸时，使用高清大图

体会 <picture>、<img> 和 background-image 的特点

[] 汉堡菜单1、汉堡菜单2、汉堡菜单3

主导航nav、logo、和 ham

传统方式下：大尺寸下，只显示 nav 和 logo，隐藏 ham；小尺寸时，再显示 ham

改进：大尺寸下，ham的h5指定结构但是内容为空，小尺寸下才设计ham的具体内容，这样就不需要先隐藏再显示。适合开始弹性布局的flex-start和结束flex-end

如果使用space-between则0元素也会被分隔 [好大的坑！！！]

[] 面向桌面端；移动端没有hover；且100vh默认是包含底部操作栏

@media (hover: hover) {
  body{
    height: 100vh;
  }
  a {
    color: #f40;
  }
}

[] 标签和媒体查询的使用

<picture> - 组合标签；指定不同的备选图片以适应不同的设备；如果都不满足就使用 <img> 指定的内容

<picture>
  <source srcset="https://picsum.photos/400/300?random=0" media="(max-width:768px)">
  <img src="https://picsum.photos/800/600?random=0" alt="">
</picture>

<link
  rel="preload"
  href="bg-image-narrow.png"
  as="image"
  media="(max-width: 600px)" />
<link
  rel="preload"
  href="bg-image-wide.png"
  as="image"
  media="(min-width: 601px)" />

<link rel="stylesheet" href="main.css" />

[] 设备查询 - 打印时，隐藏不需要打印的元素或显示特定内容

隐藏汉堡菜单

@media print {
  .ham {
    display: none;
  }
}