如何进行移动端适配

糕手的寂寞

于 2023-10-11 22:30:15 发布

阅读量174

点赞数 8

文章标签： javascript 前端 html 前端框架 html5 css3

本文链接：https://blog.csdn.net/qq_58689599/article/details/133780320

版权

移动端适配

百分比布局

使用百分比布局实现移动端的自适应布局，可以让页面元素随设备屏幕的大小自动适应缩放，从而实现不同设备的自适应。下面是具体的实现步骤：

在CSS中，使用百分比作为元素的宽高、边距等属性值。例如，如果设计稿中某个元素的宽度为375px，那么在样式中应该设置其宽度为100%（相对于父元素），再设置padding、margin等。
在HTML中，设置viewport的宽度为设备宽度，并设置initial-scale为1，表示不缩放。这样，元素的宽度就会根据设备宽度自动缩放。
```
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
```
在响应式设计中，可以使用媒体查询来针对不同的设备尺寸设置不同的样式。例如，当设备宽度小于等于768px时，设置某个元素的宽度为80%。
```
@media (max-width: 768px) {
  .example {
    width: 80%; /* 相对于父元素 */
  }
}
```

媒体查询

rem 方案

rem（font size of the root element）是 CSS3 新增的一个相对单位，是指相对于根元素的字体大小的单位。这个方案阿里有个对应的库 lib-flexible，我们将介绍个他的原理和最终效果。

因为 rem 是相对于根元素字大小的单位，我们在编写标准尺寸的 h5 页面时可以使用 rem 作为单位，最后根据设备大小动态设置根元素大小，这样即可实现自适应。

在html中设置字体大小为设备宽度的1/10。这里的1/10是可以根据实际情况调整的，根据需求设置即可。
```
html {
  font-size: calc(100vw / 10); /* 设备宽度的1/10 */
}
```
在设置样式时，使用rem作为单位。例如，如果设计稿中某个元素的宽度为375px，那么在样式中应该设置其宽度为23.4375rem（375/16）。

由于不同设备像素比的存在，需要在head中设置viewport的参数，并使用JS动态改变html的字体大小，以达到适配不同设备的效果。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script>
    // 获取dpr
    var dpr = window.devicePixelRatio || 1;
    // 计算缩放比例
    var scale = 1 / dpr;
    // 设置viewport
    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no');
    // 动态设置html字体大小
    function setFontSize() {
      var html = document.documentElement;
      var width = html.clientWidth;
      html.style.fontSize = width / 10 + 'px'; /* 设备宽度的1/10 */
    }
    setFontSize();
    window.onresize = function() {
      setFontSize();
    }
  </script>
</head>

媒体查询

使用媒体查询是实现移动端自适应布局的常见方法之一。媒体查询可以根据不同的设备宽度、设备朝向等条件，设置不同的CSS样式，从而实现不同设备上的自适应。下面是具体的实现步骤：

在CSS中，设置默认样式，并在需要针对不同设备尺寸设置不同样式的位置，使用@media规则来设置媒体查询条件和样式。

/* 当设备宽度小于等于768px时，设置样式 */
@media (max-width: 768px) {
  .example {
    font-size: 14px;
  }
}

/* 当设备宽度小于等于480px时，设置样式 */
@media (max-width: 480px) {
  .example {
    padding: 10px;
    font-size: 12px;
  }
}

在HTML中，设置viewport的宽度为设备宽度，并设置initial-scale为1，表示不缩放。这样，页面元素的宽度就会根据设备宽度自动缩放。
```
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
```

vw、vh 方案

vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh：视窗高度的百分比 vmin：当前 vw 和 vh 中较小的一个值 vmax：当前 vw 和 vh 中较大的一个值

举个例子，看下 vw、vh 方案是怎么实现自适应的：

1、设计稿是 750 * 1334 尺寸的，页面布局宽高大小都按设计稿写，到时类似使用 less 或者 postcss-px-to-viewport 插件转换成 vw。比如一个元素宽度为 75px，到时会自动转换成 10vw，在页面尺寸为 828 * 1562 下，这个元素对应的宽度为 82.8px，实现了自适应。

可以看到对比 rem 方案，这边省去了设置根元素大小，更加简洁。

vw、vh 的兼容性好，基本所有的现代浏览器都支持。

在CSS中，使用vh、vw作为元素的宽、高等属性值。例如，设计稿中某个元素的宽度为375px，那么在样式中应该设置其宽度为30vw（375/屏幕宽度 * 100）。
在HTML中，设置viewport的宽度为设备宽度，并设置initial-scale为1，表示不缩放。这样，元素的宽度就会根据设备宽度自动缩放。
```
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
```
在响应式设计中，可以使用媒体查询来针对不同的设备尺寸设置不同的样式。例如，当设备宽度小于等于768px时，设置某个元素的宽度为50vw。

糕手的寂寞

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何进行移动端适配

例如，如果设计稿中某个元素的宽度为375px，那么在样式中应该设置其宽度为100%（相对于父元素），再设置padding、margin等。vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh：视窗高度的百分比 vmin：当前 vw 和 vh 中较小的一个值 vmax：当前 vw 和 vh 中较大的一个值。由于不同设备像素比的存在，需要在head中设置viewport的参数，并使用JS动态改变html的字体大小，以达到适配不同设备的效果。这里的1/10是可以根据实际情况调整的，根据需求设置即可。
复制链接

扫一扫