移动端适配了解 ｜ 青训营笔记

woananya
164 阅读3分钟

移动端适配了解 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天。

一、什么是响应式设计

响应式设计：Responsive Web Design（RWD）
自适应设计：Adaptive Web Design（AWD）
通常认为，RWD 是 AWD 的子集。两者对比（大概就是一套代码与多套代码区别） image.png
响应式设计的四个层次：

  • 同一页面在不同大小和比例时观感舒适；
  • 同一页面在不同分辨率上观感合理;
  • 同一页面在不同操作方式（如鼠标和触屏）下，体验统一；
  • 同一页面在不同类型的设备（手机、平板、电脑）上，交互符合习惯。

二、渐进增强 vs 优雅降级

-渐进增强（progressive enhancement）：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
-优雅降级（graceful degradation）：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

三、像素

设备独立像素DIP = CSS 像素 = 逻辑像素
设备像素px = 物理像素

物理像素，又称为设备像素。显示屏是由一个个物理像素点组成的，1334 x 750表示手机分别在垂直和水平上所具有的像素点数。通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，单位是pt

设备像素比 DPR = 物理像素 / 设备独立像素 DPR（Device Pixel Ratio）
苹果公司将 dpr > 1 的屏幕称为视网膜屏幕。在视网膜屏幕中，以 dpr = 2 为例，把 4(2x2) 个像素当 1 个像素使用，这样让屏幕看起来更精致，但是元素的大小本身却不会改变：

image.png

四、适配方案

最早移动端屏幕 CSS 像素适配方案是CSS媒体查询。确保页面元素大小的与屏幕大小保持一定比例。 也就是：按比例还原设计稿。

image.png

  • 宽度（width）、间距（maring/padding）支持百分比值，但默认的相对参考值是包含块的宽度；
  • 高度（height）百分比的大小是相对其父级元素高的大小；
  • 边框（border）不支持百分值；
  • 边框圆角半径（border-radius）支持百分比值，但水平方向相对参考值是盒子的宽度，垂直方向相对参考值是盒子的高度；
  • 文本大小（font-size）支持百分比值，但相对参考值是父元素的font-size的值；
  • 盒阴影（box-shadow）和文本阴影（text-shadow）不支持百分比值；

首先，支持百分比单位的度量属性有其各自的参照基准，其次并非所有度量属性都支持百分比单位。所以我们需要另辟蹊径。

rem 适配方案

rem（font size of the root element），定义就是，根据网页的根元素来设置字体大小，和 em（font size of the element）的区别是，em 是根据其父元素的字体大小来设置，而rem 是根据网页的根元素（html）来设置字体大小。

vw 适配方案

百分比适配方案的核心需要一个全局通用的基准单位，rem 是不错，但是需要借助 Javascript 进行动态修改根元素的 font-size，而 vw/vh的出现则很好弥补 rem 需要 JS 辅助的缺点。

  • 1vw 等于 window.innerWidth 的数值的 1%

  • 1vh 等于window.innerHeight 的数值的 1%

avatar
文章
阅读
粉丝