移动端网页自适应方案

解决移动端网页的自适应,让开发变得更加简洁

mate 标签

首先要让页面大小铺满屏幕又不能溢出。只需要在 html 的 head 标签内加入 viewport(如下),参数分别表示:页面宽度=屏幕宽度,最大和最小伸缩比都是 1,不允许用户拉缩。

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • width:viewport 的宽度,可以指定为一个像素值,如:640,或者为特殊的值,如:device-width (设备的宽度)。
  • initial-scale:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。
  • maximum-scale:允许浏览者缩放到的最大比例,一般设为 1.0,即原始尺寸。
  • minimum-scale:允许浏览者缩放到的最小比例,一般设为 1.0,即原始尺寸。
  • user-scalable:浏览者是否可以手动缩放,yes 或 no 。

使用百分比自适应

把长度单位转换为百分比来表示,这样在不同的宽度下,元素的长宽也会随之变化。

  • 优点:宽度之间无缝衔接, 操作起来也相对比较方便。
  • 缺点:字体大小需要另外一套自适应方法来调整;当屏幕宽度大于 700px 后,继续按照百分比元素会偏大,这个时候调整起来会比较麻烦。

rem, em 自适应

用媒体查询的方法,确定在不同屏幕宽度下,改变 html 或 body 的 font-size。再用 rem , em 替代 px 作为单位实现自适应。

  • 优点:可以根据不同屏幕宽度来设置,可以完美解决上面说的屏幕偏大时的比例问题。字体的大小也不存在问题。
  • 缺点:根据宽度区间来设置,无法实现无缝变换。

引入 JavaScript 代码

这些兼容方法各有优缺点,都不算完美,怎样才能把优点结合在一起,同时避免缺点呢? 引入 JavaScript 方法源码,方法原理:使页面 html 的 font-size 会根据屏幕的宽度自动调整,而且屏幕宽度和所设字体大小的商是一定的,然后按照固定比例缩小后作为 rem 的单位长度实现自适应。

方法源码一(需引入 jQuery)

Zepto(function($) {
  // 获取文档的根节点
  var doc = document.documentElement;

  function setFontSize() {
    // 获取当前窗口的宽度
    var winWidth = $(window).width();
    // 640 宽度以上进行限制
    var size = winWidth / 640 * 100;
    doc.style.fontSize = (size < 100 ? size : 100) + "px";
  }

  // 防止在 html 未加载完毕时执行,保证获取正确的页宽
  setTimeout(function() {
    // 初始化
    setFontSize();
  }, 200);
});

方法源码二(JavaScript 原生代码)

(function(doc, win) {
  // 获取文档的根节点
  var docEl = doc.documentElement;
  // 判断移动端是否发生方向改变
  var resizeEvt =
    "orientationchange" in window ? "orientationchange" : "resize";

  var 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);

常见问题

以上两个方法源码是 rem 布局的核心代码。 如果你的页面不需要引入 jQuery,建议你使用 JavaScript 原生代码。 代码大意: 如果页面的宽度超过了 640px,那么页面中 html 的 font-size 恒为 100px,否则,页面中 html 的 font-size 的大小为: 100 * (当前页面宽度 / 640)

为什么是 640px?

对于手机屏幕来说, 640px 的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的 pxcss 逻辑像素,与设备的物理像素是有区别的。 如果要切移动端页面,你可以先把效果图宽度等比例缩放到 640px,很好用。

为什么要设置 html 的 font-size?

rem 就是根元素(即: html)的字体大小。html 中的所有标签样式凡是涉及到尺寸的(如: height, width, padding, margin, font-size。甚至 left, top等)你都可以放心大胆的用 rem作单位。 如果你把 htmlfont-size 设为 20px,前面说过, rem就是 html 的字体大小,那么 1rem = 20px

模拟为什么要使用 iphone 4?

假设你部门的设计师给你的页面标准宽度为 640px,则页面中所有的 宽高 全部除以 2 ,Chrome 浏览器 模拟手机页面 设置手机型号为 IPhone 4。 这也就是为什么要将所有的宽高除以 2 的原因:IPhone 4 标准 宽 是 320 px。 然后正常的用 px 为单位 写你的 css ,你所需要做的就是你写的页面,要在 IPhone 4 完全正确显示。 如果你说,那设计那边给的不是 640px 标准怎么办?你只要让你的页面按照设计图在 iphone 4 上正确显示,就木问题。

rem 单位是如何换算的?

页面 css 全部写完之后,将所有的 px 转换为以 rem为单位的数字。 例如 我设置 bodywidth:320px; 则根据设置的 font - size 值,转换为 rem,则是 width:16 rem; 【320 / 20 (你设置的标准 font - size) = 16】。

如何使用插件换算?

如果你说一个页面的 css 有几百行,写完再去改太麻烦了,那可以用 px 转换成 rem 的插件。 我这里有一款推荐:cssrem(下载使用网址 cssrem)。 该插件是 sublime text 的一款插件。

cssrem

亲!!! 听说给作者打赏一杯咖啡钱,会给自己带来好运哦!