（一）

由于手机生产商越来越多，不同手机的硬件尺寸又不尽相同，这就给我们的设计适配造成很大困扰。但我们可以围绕从基准分辨率设计，上下进行兼容适配的原则来进行快捷操作。以IOS阵营为例：

图注：移动适配流程

1. 将iphone6分辨率作为基准分辨率，以750px*1334px进行设计，设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

2. 输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

3. 开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

4. 适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。

（二）

就是整体缩放body，这个方案在兼容性上有 bug，建议不用

（三）web app变革之rem：rem能等比例适配所有屏幕

rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>rem phone test</title>

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

    <style>

        html {

            height: 100%;

            width: 100%;

            font-family: 'Heiti SC', 'Microsoft YaHei';

            font-size: 20px;

            overflow: hidden;

            outline: 0;

            -webkit-text-size-adjust:none;

        }

        body {

            height: 100%;

            margin: 0;

            overflow: hidden;

            -webkit-user-select: none;

            position: relative;

        }

        header,

        footer {

            width: 100%;

            line-height: 1.5rem;

            font-size: 1rem;

            color: #000;

            border: 1px solid #ccc;

            text-align: center;

            background-color: #ccc;

        }

        .bd {

            margin-top: 1rem;

            margin-bottom: .5rem;

            margin-right: -.5rem;

            font-size: 0;

        }

        .box {

            width: 5rem;

            height: 5rem;

            display: inline-block;

            margin-right:.5rem;

            margin-bottom: .5rem;

        }

        .blue-box {

            background-color: #06c;

        }

        .org-box {

            background-color: #1fc195;

        }

    </style>

</head>

<body>

    <header>我是头部</header>

    <div class="bd">

        <div class="box blue-box"></div>

        <div class="box org-box"></div>

        <div class="box blue-box"></div>

        <div class="box org-box"></div>

        <div class="box blue-box"></div>

        <div class="box org-box"></div>

    </div>

    <footer>我是页脚</footer>

    <script>

        (function (doc, win) {

          var docEl = doc.documentElement,

            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

            recalc = function () {

              var clientWidth = docEl.clientWidth;

              if (!clientWidth) return;

              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

            };

          if (!doc.addEventListener) return;

          win.addEventListener(resizeEvt, recalc, false);

          doc.addEventListener('DOMContentLoaded', recalc, false);

        })(document, window);

    </script>

</body>

</html>

一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置也可以实现适配，例如下面这样：

html {

    font-size : 20px;

}

@media only screen and (min-width: 401px){

    html {

        font-size: 25px !important;

    }

}

@media only screen and (min-width: 428px){

    html {

        font-size: 26.75px !important;

    }

}

@media only screen and (min-width: 481px){

    html {

        font-size: 30px !important;

    }

}

@media only screen and (min-width: 569px){

    html {

        font-size: 35px !important;

    }

}

@media only screen and (min-width: 641px){

    html {

        font-size: 40px !important;

    }

}

怎么计算出不同分辨率下font-size的值？

首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下，（当然这个尺寸肯定不一定是640，可以是320，或者480，又或是375）来看一组表格。

上面的表格蓝色一列是Demo3中页面的尺寸，页面是以640的宽度去切的，怎么计算不同宽度下font-site的值，大家看表格上面的数值变化应该能明白。举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

提问回答

1、请问，在底部用js改变html的font-size的话，会造成整个页面重新布局吗？实际使用中有没遇到页面元素因为尺寸改变了而闪烁的情况？

回答：会造成闪烁，但是可以现在css里根据屏幕 初始化一遍html 的font-size，然后在用js计算的话，区别不是很大。
例如：

@media only screen and (max-width: 320px){html{font-size: 9px;} }

@media only screen and (min-width: 320px) and (max-width: 352px){html{font-size: 10px;} }

@media only screen and (min-width: 352px) and (max-width: 384px){html{font-size: 11px;} }

@media only screen and (min-width: 384px) and (max-width: 416px){html{font-size: 12px;} }

@media only screen and (min-width: 416px) and (max-width: 448px){html{font-size: 13px;} }

@media only screen and (min-width: 448px) and (max-width: 480px){html{font-size: 14px;} }

@media only screen and (min-width: 480px) and (max-width: 512px){html{font-size: 15px;} }

@media only screen and (min-width: 512px) and (max-width: 544px){html{font-size: 16px;} }

@media only screen and (min-width: 544px) and (max-width: 576px){html{font-size: 17px;} }

@media only screen and (min-width: 576px) and (max-width: 608px){html{font-size: 18px;} }

@media only screen and (min-width: 608px) and (max-width: 640px){html{font-size: 19px;} }

@media only screen and (min-width: 640px){html{font-size: 20px;} }

2、

(function(doc, win) {

var docEl = doc.documentElement,

isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,

dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’;

docEl.dataset.dpr = dpr;

var recalc = function() {

var width = docEl.clientWidth;

if (width / dpr > 1080) {

width = 1080 * dpr;

}

docEl.dataset.width = width

docEl.dataset.percent = 100 * (width / 1080);

docEl.style.fontSize = 100 * (width / 1080) + ‘px’;

};

recalc()

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

})(document, window);

以上，注意出现1080 的地方，这里改成设计图的宽度即可，这段代码的好处是根元素font-size是100 计算方便，若要给页面设置宽度 1080 = 10.8rem 640 = 6.4rem 等，字号的话直接根据设计图除以100即可

参考http://isux.tencent.com/web-app-rem.html

其它http://www.jianshu.com/p/eb05c775d3c6#

移动端H5适配流程的更多相关文章

  1. 移动端H5适配方法（盒子+图片+文字）

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  2. 移动端 h5 适配之必知必会

    建议大家先去看看这篇文章 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension(来自掘金: ...

  3. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  4. 解惑好文：移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  5. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  6. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  7. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  8. 解惑好文：移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  9. 移动端H5多终端适配解决方案

    推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...

随机推荐

  1. Python全栈开发：进程代码实例

    进程与线程的关系 #!/usr/bin/env python # -*- coding;utf-8 -*- """ 多进程(主进程,子进程): 优点:能同时利用多个CPU ...

  2. vue项目中，单页图片过多，使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  3. 用shell编写小九九乘法表程序

    1.使用for循环 运行结果: 2.方法二:for循环 运行结果: 备注: 1. echo -n 的意思是不自动换行,因为在linux shell中 echo到最后一个字符时会自动换行的,所以echo ...

  4. 阿里云容器服务通过LoadBalancer暴露IPv6服务

    背景: IPv4地址已接近枯竭,被誉为下一代互联网技术的IPv6成为新的“全球互联网门牌号”,它可以让地球上的每一粒沙子都拥有地址.当下,各国都在加速推进下一代互联网的部署,工信部也互联网服务商提出了 ...

  5. thinkphp 关联关系

    关联关系 通常我们所说的关联关系包括下面三种: 大理石平台等级 一对一关联 :ONE_TO_ONE,包括HAS_ONE 和 BELONGS_TO 一对多关联 :ONE_TO_MANY,包括HAS_MA ...

  6. 2016年深圳市服务业占GDP比重首次突破六成

    2016年深圳市服务业占GDP比重首次突破六成 中商产业研究院 中商情报网 2017-01-12 11:08 分享:     中商情报网讯 1月10日,深圳市财政委员会召开新闻发布会,就深圳市2016 ...

  7. 把github上的项目clone到IDEA

    点击clone按钮后,会弹出如下截图弹窗,点击 NO 点击open,找到刚刚从github上clone下来的项目,打开即可

  8. netty优化参考链接

    Netty百万级推送服务设计要点:http://www.infoq.com/cn/articles/netty-million-level-push-service-design-points/ 用N ...

  9. 11-7-this的最基本认识

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. filterBuilders 构建过滤器query

    FilterBuilders构建过滤器Query package com.elasticsearch; import org.elasticsearch.action.ActionListener; ...