在如今这个移动设备百花齐放的时代，移动端适配成了开发者们绕不开的难题。不同的手机屏幕尺寸、分辨率，就像不同形状和大小的容器，而我们的网页内容就像是要装进去的水，得让水完美地适配这些容器。今天咱们就来聊聊怎么用 viewport、rem 与 flexible.js 这三个“法宝”来解决多屏兼容的问题。
一、viewport 是什么
viewport 简单来说，就是浏览器上用来显示网页的那一块区域。在移动端，因为屏幕大小各不相同，如果不做处理，网页可能会显示得乱七八糟。viewport 就像是一个“取景框”，我们可以通过设置它的属性，让网页在不同屏幕上都能有合适的显示效果。
示例（HTML 技术栈）
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置 viewport 属性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Viewport 示例</title>
</head>
<body>
<h1>这是一个使用 viewport 的网页</h1>
</body>
</html>
这里的 content 属性里，width=device-width 表示让 viewport 的宽度等于设备的宽度；initial-scale=1.0 是设置初始的缩放比例为 1；maximum-scale=1.0 和 minimum-scale=1.0 分别限制了最大和最小缩放比例；user-scalable=no 则禁止用户手动缩放页面。
应用场景
当我们开发移动端网页时，希望网页能在不同尺寸的手机上都能有一致的显示效果，就需要使用 viewport 来进行适配。比如一些电商类的移动端页面，商品展示、详情页等都需要在各种手机上清晰展示，这时候 viewport 就派上用场了。
技术优缺点
优点：
- 简单易用，只需要在 HTML 的
<meta>标签里设置几个属性，就能对网页的显示进行初步的适配。 - 兼容性好，几乎所有的移动端浏览器都支持 viewport 属性。
缺点：
- 只能进行一些基本的缩放和布局调整，对于一些复杂的页面布局，单纯使用 viewport 可能无法满足需求。
注意事项
- 在设置 viewport 属性时，要根据实际需求来调整各个参数的值。比如，如果需要用户可以手动缩放页面，就不能设置
user-scalable=no。 - 不同的浏览器可能对 viewport 属性的支持略有差异，在开发过程中要进行充分的测试。
二、rem 是什么
rem 是一个相对单位，它是相对于根元素（<html> 元素）的字体大小。使用 rem 作为单位来设置元素的尺寸，就可以根据根元素的字体大小动态调整元素的大小，从而实现多屏适配。
示例（CSS 技术栈）
/* 设置根元素的字体大小 */
html {
font-size: 16px;
}
/* 使用 rem 单位设置元素的尺寸 */
.box {
width: 10rem; /* 相当于 16px * 10 = 160px */
height: 5rem; /* 相当于 16px * 5 = 80px */
background-color: lightblue;
}
在这个示例中，我们先设置了根元素 <html> 的字体大小为 16px，然后在 .box 类中使用 rem 单位来设置元素的宽度和高度。这样，当根元素的字体大小发生变化时，.box 元素的尺寸也会相应地改变。
应用场景
在设计响应式布局时，使用 rem 单位可以让元素的尺寸随着屏幕大小的变化而自适应。比如，在不同尺寸的手机上，导航栏、按钮等元素的大小可以根据屏幕大小自动调整，保证用户体验的一致性。
技术优缺点
优点：
- 具有良好的可扩展性，通过改变根元素的字体大小，可以轻松实现整个页面布局的缩放。
- 代码简洁，只需要在根元素上设置字体大小，其他元素使用 rem 单位即可。
缺点：
- 需要根据不同的屏幕尺寸动态调整根元素的字体大小，否则可能会出现布局错乱的问题。
- 对于一些旧版本的浏览器，可能存在兼容性问题。
注意事项
- 在使用 rem 单位时，要确保根元素的字体大小设置合理。可以根据设计稿的尺寸来确定初始的根元素字体大小。
- 要考虑不同设备的屏幕分辨率和 DPI，避免在高分辨率屏幕上元素显示过小或过大。
三、flexible.js 是什么
flexible.js 是手淘团队开发的一个用于移动端适配的 JavaScript 库。它的主要作用是根据设备的屏幕宽度动态调整根元素的字体大小，从而实现基于 rem 的布局适配。
示例（Javascript 技术栈）
// flexible.js 代码
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// 设置页面的缩放比例
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px';
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize);
}
}
setBodyFontSize();
// 设置根元素的字体大小
function setRemUnit() {
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
// 监听窗口大小变化，重新设置根元素的字体大小
window.addEventListener('resize', setRemUnit);
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit();
}
});
// 检测 0.5px 支持
if (dpr >= 2) {
var fakeBody = document.createElement('body');
var testElement = document.createElement('div');
testElement.style.border = '.5px solid transparent';
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines');
}
docEl.removeChild(fakeBody);
}
}(window, document));
在 HTML 文件中引入这个 flexible.js 文件后，它会自动根据设备的屏幕宽度动态调整根元素的字体大小。
应用场景
当我们需要在不同尺寸的移动端设备上实现统一的布局效果时，使用 flexible.js 可以大大简化开发过程。比如，开发一个移动端的新闻客户端，不同手机上的文章列表、图片展示等都能通过 flexible.js 实现自适应布局。
技术优缺点
优点：
- 自动适配不同屏幕尺寸，开发者只需要使用 rem 单位进行布局，不需要手动调整根元素的字体大小。
- 兼容性好，能够在大多数移动端浏览器上正常工作。
缺点：
- 依赖 JavaScript，如果用户禁用了 JavaScript，可能会导致布局错乱。
- 对于一些特殊的屏幕尺寸，可能需要进行额外的调整。
注意事项
- 在引入 flexible.js 时，要确保它在其他 CSS 和 JavaScript 文件之前引入，以保证根元素的字体大小能正确设置。
- 要注意 flexible.js 与其他 JavaScript 库的兼容性，避免出现冲突。
四、三者结合解决多屏兼容
我们可以将 viewport、rem 和 flexible.js 结合起来，实现更加完美的移动端适配。具体步骤如下：
- 在 HTML 文件中设置 viewport 属性，确保网页在不同设备上有合适的显示区域。
- 使用 rem 单位来进行页面布局，让元素的尺寸能够根据根元素的字体大小动态调整。
- 引入 flexible.js 库，让它根据设备的屏幕宽度自动调整根元素的字体大小。
示例（HTML + CSS + JavaScript 综合技术栈）
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置 viewport 属性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>移动端适配示例</title>
<style>
/* 使用 rem 单位设置元素的尺寸 */
html {
/* 这里的字体大小会被 flexible.js 动态调整 */
font-size: 16px;
}
.container {
width: 20rem;
margin: 0 auto;
background-color: lightgray;
}
.item {
width: 5rem;
height: 5rem;
background-color: lightgreen;
margin: 1rem;
}
</style>
<!-- 引入 flexible.js -->
<script src="flexible.js"></script>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
在这个示例中，我们先设置了 viewport 属性，然后使用 rem 单位进行页面布局，最后引入 flexible.js 库。当页面在不同尺寸的设备上打开时，flexible.js 会自动调整根元素的字体大小，从而让页面布局自适应不同的屏幕。
应用场景
适用于各种移动端网页的开发，无论是电商、新闻、社交等类型的网站，都可以通过这种方式实现多屏兼容。
技术优缺点
优点：
- 能够实现高度的自适应布局，在不同尺寸的移动端设备上都能有良好的显示效果。
- 开发效率高，只需要按照设计稿使用 rem 单位进行布局，剩下的适配工作交给 flexible.js 完成。
缺点：
- 对于一些复杂的布局，可能需要进行额外的调整和优化。
- 依赖 JavaScript 和 viewport 属性，在一些特殊的浏览器环境下可能会出现兼容性问题。
注意事项
- 在开发过程中，要进行充分的测试，确保页面在各种常见的移动端设备上都能正常显示。
- 如果需要对某些元素进行特殊的适配处理，可以结合媒体查询等技术来实现。
五、文章总结
通过使用 viewport、rem 与 flexible.js，我们可以有效地解决移动端多屏兼容的问题。viewport 为我们提供了一个合适的显示区域，rem 让我们能够根据根元素的字体大小动态调整元素的尺寸，而 flexible.js 则自动根据设备的屏幕宽度调整根元素的字体大小，实现了布局的自适应。在实际开发中，我们要根据具体的需求和场景，合理运用这三种技术，同时注意它们的优缺点和注意事项，这样才能开发出在各种移动端设备上都能完美显示的网页。
评论