[移动端]视口与媒体查询

视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度

当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。

例：用户将浏览器窗口放大了200%，这时浏览器窗口中的CSS像素会随着视觉视口的放大而放大，这时一个CSS像素会跨越更多的物理像素。

所以，布局视口会限制你的CSS布局而视觉视口决定用户具体能看到什么。

我们可以通过调用window.innerWidth / innerHeight来获取视觉视口大小。

理想视口

idealviewport 理想视口: 为浏览器定义的可完美适配移动端的理想 viewport，固定不变，可以认为是设备视口宽度。比如 iphone 7 为 375px, iphone 7p 为 414px。

布局视口在移动端展示的效果并不是一个理想的效果，所以理想视口(ideal viewport)就诞生了：网站页面在移动端展示的理想大小。

上面在介绍CSS像素时曾经提到页面的缩放系数 = CSS像素 / 设备独立像素，实际上说页面的缩放系数 = 理想视口宽度 / 视觉视口宽度更为准确。

所以，当页面缩放比例为100%时，CSS像素 = 设备独立像素，理想视口 = 视觉视口。

我们可以通过调用screen.width / height来获取理想视口大小。

为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理。

视口适配 Meta viewport

元素表示那些不能由其它HTML元相关元素之一表示的任何元数据信息，它可以告诉浏览器如何解析页面。

我们可以使用元素的viewport来帮助我们设置视口、缩放等，从而让移动端得到更好的展示效果。

viewport的适配

viewport属性解析

| Value | 可能值 | 描述 |

| — | — | — |

| width | 正整数或device-width | 以pixels（像素）为单位， 定义布局视口的宽度。 |

| height | 正整数或device-height | 以pixels（像素）为单位， 定义布局视口的高度。 |

| initial-scale | 0.0-10.0 | 定义页面初始缩放比率。 |

| minimum-scale | 0.0-10.0 | 定义缩放的最小值；必须小于或等于maximum-scale的值。 |

| maximum-scale | 0.0-10.0 | 定义缩放的最大值；必须大于或等于minimum-scale的值。 |

| user-scalable | 一个布尔值（yes或者no） | 如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。 |

注意

device-width就等于理想视口的宽度，所以设置width=device-width就相当于让布局视口等于理想视口。

由于initial-scale = 理想视口宽度 / 视觉视口宽度，所以我们设置initial-scale=1;就相当于让视觉视口等于理想视口。

这时，1个CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。

获取窗口大小API

---

| API | 作用 |

| — | — |

| window.innerHeight | 获取浏览器视觉视口高度（包括垂直滚动条） |

| window.outerHeight | 获取浏览器窗口外部的高度。表示整个浏览器窗口的高度，包括侧边栏、窗口镶边和调正窗口大小的边框 |

| window.screen.Height | 获取获屏幕取理想视口高度，这个数值是固定的，`设备的分辨率/设备像素比 |

| window.screen.availHeight | 浏览器窗口可用的高度 |

| document.documentElement.clientHeight | 获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距 |

| document.documentElement.offsetHeight | 包括内边距、滚动条、边框和外边距 |

| document.documentElement.scrollHeight | 在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度。测量方式与clientHeight相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条 |

媒体查询 @media

---

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media mediatype and|not|only (media feature) {

CSS-Code;

}

媒体类型

| 值 | 描述 |

| — | — |

| all | 用于所有设备 |

| print | 用于打印机和打印预览 |

| screen | 用于电脑屏幕 |

| speech | 应用于屏幕阅读器等发声设备 |

可以给不同的媒体设定不同的值

媒体功能

| 值 | 描述 |

| — | — |

| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |

| color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |

| color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |

| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率 |

| device-height | 定义输出设备的屏幕可见高度 |

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
droid开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！