移动端适配

最新推荐文章于 2023-07-03 17:56:21 发布

Absurd_people

最新推荐文章于 2023-07-03 17:56:21 发布

阅读量276

点赞数

分类专栏： HTML+CSS3 文章标签：前端

原文链接：https://juejin.cn/post/6953091677838344199

版权

HTML+CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

为什么会有移动端适配？

随着科技的发展，越来越多的移动设备被生产出来，不同的设备之间设备的逻辑分辨率也是不同的，如果我们在移动端开发中，由于设备的逻辑分辨率不同，如果使用传统的px进行布局，会发现，在不同的设备上，元素的大小是不固定的，所以就需要就行适配。

移动端适配的目的

让拥有不同屏幕大小的终端设备拥有一致的 UI 界面，让拥有更大屏幕的终端展示更多的内容

移动端适配的相关概念

viewport

viewport 即视窗、视口，用于显示网页部分的区域，在 PC 端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视口、视觉视口、理想视口，它们在屏幕适配中起着非常重要的作用。

1. 布局视口

布局视口是网页布局的基准窗口。在 PC 上，布局视口就等于当前浏览器的窗口大小；在移动端，布局视口被赋予一个默认值，这个值通常比该设备的逻辑分辨率大很多，这保证 PC的网页可以在手机浏览器上呈现，但这样网页元素就会显得非常小，用户可以手动对网页进行放大查看。

布局视口可以通过 document.documentElement.clientWidht/clientHeight 来获取布局视口的大小。

编辑

2. 视觉视口

视觉视口是指用户通过屏幕真实看到的区域。视觉视口默认等于当前浏览器的窗口大小（包括滚动条宽度）。可以通过调用 window.innerWidth/innerHeight 来获取视觉视口大小。

当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。例如：用户将浏览器窗口放大了 200%，这时浏览器窗口中的 CSS像素会随着视觉视口的放大而放大，这时一个 CSS像素会跨越更多的物理像素。所以，布局视口会限制你的 CSS布局而视觉视口决定用户具体能看到什么。

编辑

3. 理想视口

布局视口在移动端展示的效果并不是一个理想的效果，所以理想视口就诞生了：网站页面在移动端展示的理想大小。如上图，在浏览器调试移动端时页面上给定的像素大小就是理想视口大小，其实也就是逻辑分辨率的大小。

移动端适配方案

1 rem

rem 是CSS3 新增的一个相对单位，他以 THML 元素的 font-size 为比例。

/* 
    设置html元素的字体大小为 16px，即 1rem = 16px */
html {
    font-size: 16px;
}

/* 
    设置box元素宽为10rem,则其在页面中实际的宽度是160px */
.box {
    width: 10rem; /* 160px */
}

修改HTML元素的字体大小可以成比例的调整以 rem 为单位的属性，通过这一个特性，我们可以实现将视窗按一定比例划分为一份一份的，当页面内元素刚好分完所有的份数，页面内容即充满整个视窗且无横向滚动条。

以宽度750像素的设计稿为例，有两个元素，一个元素占 550 个像素，另一个占 750 个像素：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script>
    function setRem() {
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
        const scale = document.documentElement.clientWidth / 750;
        document.documentElement.style.fontSize = scale + 'px';
    }
    setRem();
    window.onresize = setRem;
</script>
</body>
</html>

优点：rem布局能够很好的实现在不同尺寸的屏幕横向填满屏幕，且在不同屏幕元素大小比例一致。

缺点：在大屏设备（Pad）上，元素尺寸会很大，页面显示更少的内容。

针对大屏改进方案：

1. 限制 rem 的最大值

2. 通过媒体查询，限制内容最大宽度。

2 vw、vh 布局

vm、vh 方案与 rem 方案类似，都是将页面分成一份一份的，只不多 vm、vh 是将页面分为100份，1vm = device-widht / 100l 。

优点：

vw、vh布局能良好的实现在不同尺寸的屏幕横向填满屏幕，使用 postcss-px-to-viewport 能很好的帮我们进行单位转换。

缺点：

无法修改 vw/vh 的值，在大屏设备（Pad）中元素会放大，且无法通过 js 干预
兼容性- 大多数浏览器都支持、ie11不支持少数低版本手机系统 ios8、android4.4以下不支持

3 百分比布局

在 css 中，我们可以使用百分比来实现布局，但是需要特定宽度时，这个百分比的计算对开发者来说并不友好，且元素百分比参考的对象为父元素，元素嵌套较深时会有问题。

4 响应式布局

通过媒体查询，可以针对不同的屏幕进行单独设置，但是针对所有的屏幕尺寸做适配显然是不合理的，但是可以用来处理极端情况（例如 IPad 大屏设备）或做简单的适配（隐藏元素或改变元素位置）

5 px 为主，搭配 vw/vh、媒体查询与 flex 进行布局

我们从页面编写的角度出发，页面中更多的是文本和布局，关于文本，我们应该使用 px 作为单位，来实现在大屏设备显示更多的内容，而不是更大的文本；关于布局，我们可以使用 flex 实现弹性布局，当实现特定宽高元素时，可以适当的使用 vw/vh，当特定的值使用 vw/vh 计算复杂或存在误差时，也可以使用 rem