CSS 笔记（十四）：常用单位 & 适配方案（移动端）

CSS 笔记（十四）：常用单位 & 适配方案（移动端）

常用单位

像素

默认情况下，视口的水平和垂直方向由很多小方格组成，有多少个小方格就有多少个像素，特点在于不论视口的大小如何改变，像素的大小总是固定的

百分比

百分比是一个相对单位，总是以当前元素的父元素作为参考，特点如下：

• 子元素宽度参考父元素宽度
• 子元素高度参考父元素高度
• 子元素的内边距和外边距均参考父元素的宽度
• 边框属性不能以百分比为单位

em

em 是一个相对单位，总是以当前元素的字体大小为参考，如果此元素未设置字体大小，那么参考祖先元素的字体大小，若所有祖先元素都没有设置字体大小，那么参考浏览器默认的字体大小，示例如下：

fontSize = 12px

10em = 10 * fontSize = 120px

rem

rem 是一个相对单位，总是以根元素（html）的字体大小为参考，如果根元素未设置字体大小，那么参考浏览器默认的字体大小（16px），示例如下：

rootFontSize = 15px

> 10rem = 10 * rootFontSize = 150px

不论当前元素的祖先元素是否设置了字体大小，rem 所参考的也是根元素的字体大小

vw/vh

vw/vh 是一个相对单位，总是以视口的大小为参考，示例如下：

ViewportWidth = 700

> 10vw = 0.1 * ViewportWidth = 70

ViewportHeight = 1000

> 50vh = 0.5 * ViewportHeight = 500

vmin/vmax

vmin/vmax 是 vw/vh 的衍生单位

• vmin = min(vw, vh)
• vmax = max(vw, vh)

应用在移动端中旋转屏幕后保持元素大小不变

视口

视口即为显示内容的区域，在 PC 端，视口大小即为可视区域的大小，在移动端，视口大小是固定的 980px

由于过去绝大多数网页的版心都是 980px，所以乔布斯为了让网页可以在移动端完美展示，所以将手机端的视口定义为了 980px，谷歌模仿了 iOS 系统的解决方案，不过，通常情况下移动端的物理尺寸远小于视口大小，所以系统默认将视口尺寸等比例缩小以容纳所有内容，如此一来将导致页面的显示效果并不理想，此时可以使用 meta 标签替换默认的 980px，示例如下：

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

说明如下：

属性	说明
width	视口宽度
initial-scale	初始缩放比例
maximum-scale	允许用户缩放的最大比例
minimum-scale	允许用户缩放的最小比例
user-scalable	用户是否可以手动缩放

适配方案（移动端）

通常情况下，我们使用媒体查询技术来实现在不同大小的可视区域展示不同的元素大小

优点如下：

• 简单
• 调整屏幕宽度时，不刷新页面即可响应
• 适合 PC 端和移动端共用一套代码时

缺点如下：

• 难以维护
• 为了兼顾大屏幕或高清设备从而造成资源浪费（不同屏幕大小的图片）
• 为了兼顾展示效果从而损失 PC 端和移动端各自独特的交互方式

媒体查询适用于相对简单的网页，而对于相对复杂的网页，通常采用 PC 端和移动端独立开发/维护的方式，此时，如果在移动端的浏览器访问网页，那么可以将网页从 PC 端版本自动跳转到移动端版本，示例如下：

function isPC() {
    let userAgentInfo = navigator.userAgent;
    if (/iphone/i.test(userAgentInfo) || /android/i.test(userAgentInfo)) {
        return false;
    }
    return true;
}

if (!isPC()) {
    location.href = "http://m.xxx.com";
}

上述示例中，我们通过 window 全局对象的 navigator 属性的 userAgent 属性得到用户代理信息，然后利用正则表达式判断用户以 PC 端访问还是移动端访问，如果不是 PC 端，那么通过修改 window 全局对象的 location 属性的 href 属性实现页面跳转

实际上，即使将 PC 端和移动端独立开发，由于移动端存在很多的屏幕尺寸，所以我们必须在移动端适配，通常情况下，设计师将为我们提供大小为 750(w) 或 1125(w) 的 UI 图片，必须将 UI 图片中的所有元素等比缩放，才能等比还原 UI 设计图，示例如下：

UI-WIDTH = 750px
SCREEN-WIDTH = 375px

num = 7.5

ui-size = UI-WIDTH / num = 100px
sc-size = SCREEN-WIDTH / num = 50px

element-after-size = element-before-size / ui-size * sc-size

步骤如下：

1. 将 UI 图片的宽度分为 num 份，求出每一份的大小 (ui-size)
2. 将屏幕的宽度也分为 num 份，求出每一份的大小 (sc-size)
3. 每一个元素的尺寸除以 ui-size，再乘 sc-size 求出元素缩放后的尺寸

在实际应用中，我们可以将各个屏幕的 sc-size 利用媒体查询保存到根元素的 font-size 属性中，计算各个尺寸时使用原始 UI 图片的尺寸除以 ui-size 并以 rem 作为单位即可实现等比缩放，示例如下：

UI-ELEMENT-WIDTH = 150px

html {
    font-size: 50px
}

element-after-size = (UI-ELEMENT-WIDTH / ui-size)rem

由于市场上的手机屏幕大小繁多，为了减少代码量，可以使用 JavaScript 实时计算屏幕的 sc-size 并作为根目录 font-size 的取值，示例如下：

document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

上述方式的缺点在于，如果切换了屏幕尺寸，必须刷新页面，此外，可以利用 Less 或 Sass 保存 ui-size 和计算尺寸，示例如下：

@ui-size: 100rem;

.box {
    width: 500 / 100;
    height: 80 / 100;
}

另外，必须注意的是，物理像素和逻辑像素不同时导致的效果误差，之前，移动端的物理像素和逻辑像素的比例相同，在乔布斯之后，iPhone4 开始，苹果公司推出的 retina 视网膜屏在尺寸未变化的情况下，物理像素的数量却多了一倍，从而导致同样是 1 个逻辑像素，iPhone3 将利用 1 个物理像素显示，而 iPhone4 将使用 4 个物理像素，所以在 iPhone4 上显示的线条将更粗，所以出现了效果误差，为了解决此问题，必须利用 JavaScript 将原始尺寸缩小特定的倍数，示例如下：

let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
document.write(text);

在上述示例中，window 全局对象的 devicePixelRatio 属性可以获取设备物理像素和逻辑像素的比例，然后计算出缩放倍数，从而通过 meta 标签的 initial-scale 缩放

综上所述，最完美的移动端适配方案如下所示：

• JavaScript

let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
document.write(text);
document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

• Less

@ui-size: 100rem;

.box {
    width: 500 / 100;
    height: 80 / 100;
}