移动端适配方案

最新推荐文章于 2024-02-13 11:25:59 发布

程序媛之博客

最新推荐文章于 2024-02-13 11:25:59 发布

阅读量152

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_42080594/article/details/126966966

版权

媒体查询。
js 动态设置 html 的 font-size（rem 为单位）。
淘宝提供的解决方案 flexible.js（rem 为单位）。

方式一：

媒体查询。

优点：

方法简单，成本低，移动和 PC 维护同一套代码。
只用修改 css 文件。

缺点：

代码量大，维护不方便。
为兼顾大屏或高清设备，会造成其他资源浪费，特别是加载图片资源。
为了兼顾移动端和 PC 端各自响应式的展示效果，难免会损失各自特有的交互方式。

方式二：

js 动态设置 html 的 font-size（rem 为单位）。

1、设置 meta viewport 属性

<meta name="viewport" content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

2、添加动态设置 html 的 font-size 的 js：

rem.js

(function(doc, win) {    var docEl = doc.documentElement,      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',      recalc = function() {        var clientWidth = docEl.clientWidth;        if (!clientWidth) return;        if (clientWidth >= 640) {          docEl.style.fontSize = '100px';        } else {          docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';        }      };    if ( !doc.addEventListener) return;    win.addEventListener(resizeEvt, recalc, false);   doc.addEventListener('DOMContentLoaded', recalc, false);  })(document, window);

使用说明：例如设计稿的宽度是 640px，如果一个元素的实际宽高都为 200px，那么如果使用 rem 为单位，宽高便都为 2rem。

rem = px / 100。

参考实例：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />      <title>rem 使用</title> <script src="rem.js"></script>  </head>  <body>      <div class="box">          <p>在 640px 的设计稿下：</p>          <p>width: 200px => 2rem</p>          <p>height: 200px => 2rem</p>          <p>font-size: 14px => 0.14rem</p>      </div>  </body>  <style>  .box {  font-size: .14rem;  width: 2rem;  height: 2rem;  background-color: #cacaca;  }  </style>  </html>

方式三：

淘宝提供的解决方案 flexible.js，这个解决方案只解决苹果设备上的 dpr 为2和3的情况，不考虑安卓设备也不考 pad。

1、设置 meta 标签。

<meta content="yes" name="apple-mobile-web-app-capable" />  <meta content="yes" name="apple-touch-fullscreen" />  <meta content="telephone=no,email=no" name="format-detection" />  <meta content="maximum-dpr=2" name="flexible" />

2、引入 flexible.js 文件。

计算方法:

元素的 rem 值 = 元素在设计稿中的 px 值 / （设计稿宽 / 10）。

例：一个元素的宽高为 100px ，该元素宽高的 rem 值 = 100 / （ 640 / 10）= 1.5625 rem。

这样的计算方式会比较浪费时间，如果使用 flexible.js 方式，我建议使用 sublime 插件：CSSREM（在我的文章代码编辑器Sublime_Text3的使用中有 sublime 插件安装方法），把 px 转换为 rem，或使用其他方式转换。

CSSREM 插件安装成功后，依次打开 Preferences → Package Settings → cssrem → Settings-Default 去设置设计稿的宽。

px_to_rem ：px 转 rem 的单位比例，默认为40，如果是640的设计稿，设置为64。
max_rem_fraction_length：px 转 rem 的小数部分的最大长度，默认为6。

在 .css 文件中（该插件仅在 .css 文件中生效），编写 px 值后会自动转换为 rem 的值。

参考实例：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta content="yes" name="apple-mobile-web-app-capable" />      <meta content="yes" name="apple-touch-fullscreen" />      <meta content="telephone=no,email=no" name="format-detection" />      <meta content="maximum-dpr=2" name="flexible"/>      <title>flexible 使用说明</title>      <script src="flexible.js"></script>  </head> <body>  <div class="box">      <p>在 640px 的设计稿下：</p>      <p>width: 200px => 3.125rem</p>      <p>height: 200px => 3.125rem</p>      <p>font-size: 14px => .21875rem</p>  </div>  <style>  .box {  font-size: .21875rem;  width: 3.125rem;  height: 3.125rem;  background-color: #cacaca;  }  </style>  </body>  </html>

三、补充

关于 dpr(设备像素比)。

dpr(设备像素比) = 物理像素 / 设备独立像素。

在不同的屏幕上（普通屏幕 VS retina 屏幕），css 像素所呈现的大小（物理尺寸）是一致的，不同的是1个 css 像素所对应的物理像素个数是不一致的。

在普通屏幕下，1个 css 像素对应 1个物理像素（1:1），在retina 屏幕下，1个 css 像素对应 4个物理像素（1:4）。

计算方式是在水平或垂直方向上，一个物理像素中可以放两个 css 像素，此时 dpr = 2 / 1 = 2。

例：在一个 dpr = 2 的设备中，如果一张图片的实际宽高都是 200px，在浏览器中设置宽高 200px 时，在手机中就会显示模糊，因为在 dpr = 2 的设备下，图片的宽高被扩展成了 400px，但是如果 css 把宽高设置为 100px，在设备下宽高就会扩展为 200px,此时就为原图大小了。

这就是为什么设计师做移动端时会出两倍宽度的设计稿，比如 320 的分辨率会出 640 的设计稿。