完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
完整高频题库阅读地址：https://febook.hzfe.org/
相关问题
- 介绍 meta 的 viewport 值
- rem 和 vw 的值是根据什么计算的
- 1px 显示问题
- 如何适配刘海屏
回答关键点
viewport 相对单位 媒体查询 响应式图片
移动端开发的主要痛点是如何让页面适配各种不同的终端设备，使不同的终端设备都拥有基本一致的视觉效果和交互体验。移动端常见的适配方案有以下几种，一般都是互相搭配使用。包括：
- 视口元信息配置
- 响应式布局
- 相对单位
- 媒体查询
- 响应式图片
- 安全区域适配
知识点深入
1. 相关概念
1.1 像素
分辨率（Resolution）
分辨率是指位图图像中细节的精细程度，以每英寸像素（ppi）衡量。每英寸的像素越多，分辨率就越高。
物理像素（Physical pixels）
物理像素是一个设备的实际像素数。
逻辑像素（Logical pixels）
是一种抽象概念。在不同的设备下，一个逻辑像素代表的物理像素数不同。CSS 像素是逻辑像素。
为了在不同尺寸和密度比的设备上表现出一致的视觉效果，使用逻辑像素描述一个相同尺寸的物理单位。在具有高密度比的屏幕下，一个逻辑像素对应多个物理像素。
设备像素比（Device Pixel Ratio）
当前显示设备的物理像素分辨率与 CSS 像素分辨率之比。
相关问题：图片或 1px 边框显示模糊
在移动端中，常见图片或者 1px 的边框在一些机型下显示模糊/变粗的问题。基于对像素相关的概念理解，可知 CSS 中的 1px 是指一个单位的逻辑像素。一个单位的逻辑像素映射到不同像素密度比的设备下，实际对应的物理像素不同。
因此，同样尺寸的图片在高密度比的设备下，由于一个位图像素需要应用到多个物理像素上，所以会比低密度比设备中的视觉效果模糊。
1.2 视口
视口（viewport）
视口一般是指用户访问页面时，当前的可视区域范围。通过滚动条滑动，视口可以显示页面的其他部分。在 PC 端上，<html> 元素的宽度被设置为 100% 时，等同于视口大小，等同于浏览器的窗口大小。通过 document.documentElement.clientWidth 或 window.innerWidth 可以获取视口宽度。CSS 布局基于视口大小进行计算。
由于移动设备尺寸较小，如果基于浏览器窗口大小的视口进行布局，会导致一些没有适配过移动设备样式的站点布局错乱，用户体验差。为了让移动端也能正常显示未适配移动设备的页面，从而引入布局视口和视觉视口的概念。
布局视口（layout viewport）
布局视口的宽度默认为 980px，通常比物理屏幕宽。CSS 布局会基于布局视口进行计算。移动设备的浏览器基于虚拟的布局视口去渲染网页，并将对应的渲染结果缩小以便适应设备实际宽度，从而可以完整的展示站点内容且不破坏布局结构。
视觉视口（visual viewport）
视觉视口是布局视口的当前可见部分。用户可以通过缩放来查看页面内容，从而改变视觉视口，但不影响布局视口。
最低0.47元/天 解锁文章
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
