挪动端前端开发兼容计划方案(总结)

在网络上搜了1下，许多招聘面试都会被问到挪动端兼容方式的难题，近期看了1些文章内容，这里总结1下。

最先，谈1下现阶段为止出現的1些有关挪动端兼容的技术性计划方案：

• （1）根据新闻媒体查寻的方法即CSS3的meida queries
• （2）以天猫主页为意味着的 flex 延展性合理布局
• （3）以淘宝主页为意味着的 rem+viewport放缩
• （4）rem 方法

1.Media Queries

meida queries 的方法能够说是我初期选用的合理布局方法，它关键是根据查寻机器设备的宽度来实行不一样的 css 编码，最后做到页面的配备。关键英语的语法是：

@media screen and (max-width: 600px) { /*当显示屏尺寸小于600px时，运用下面的CSS款式*/
  /*你的css编码*/
}

优势

• media query能够保证机器设备像素比的分辨，方式简易，成本费低，非常是对挪动和PC维护保养同1套编码的情况下。现阶段像Bootstrap等架构应用这类方法合理布局
• 照片便于改动，只需改动css文档
• 调剂显示屏宽度的情况下无需更新网页页面便可回应式展现

缺陷

• 编码量较为大，维护保养不便捷
• 以便兼具大显示屏或高清机器设备，会导致别的机器设备資源消耗，非常是载入照片資源
• 以便兼具挪动端和PC端各有回应式的展现实际效果，免不了会损害各有独有的互动方法

2.Flex延展性合理布局

以天猫的完成方法开展表明：

它的viewport是固定不动的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高宽比定死，宽度自融入，元素都选用px做企业。

伴随着显示屏宽度转变，网页页面也会跟随转变，实际效果就和PC网页页面的流体合理布局类似，在哪儿个宽度必须调剂的情况下应用回应式合理布局调调就行（例如网易新闻），这样就完成了『兼容』。

3.rem + viewport 放缩

这也是淘宝应用的计划方案，依据显示屏宽度设置 rem 值，必须兼容的元素都应用 rem 为企业，不必须兼容的元素還是应用 px 为企业。（1em = 16px）

PS：rem
rem是CSS3新增的1个相对性企业（root em，根em），这个企业引发了普遍关心。这个企业与em有甚么差别呢？
差别在于应用rem为元素设置字体样式尺寸时，依然是相对性尺寸，但相对性的只是HTML根元素。这个企业可以说集相对性尺寸和肯定
尺寸的优势于1身，根据它既能够保证只改动根元素就成占比地调剂全部字体样式尺寸，又能够防止字体样式尺寸逐层复合型的连锁加盟
反映。现阶段，除IE8及更早版本号外，全部访问器均已适用rem。针对不适用它的访问器，解决方式也很简易，便是多写1
个肯定企业的申明。这些访问器会忽视用rem设置的字体样式尺寸。例如：p{font-size:14px;font-size:0.875rem;}
(强烈推荐1个企业变换的专用工具：http://pxtoem.com/)

完成基本原理

依据rem将网页页面变大dpr倍, 随后viewport设定为1/dpr.

如iphone6 plus的dpr为3, 则网页页面总体变大3倍, 1px(css企业)在plus下默认设置为3px(物理学像素)
随后viewport设定为1/3, 这样网页页面总体缩回初始尺寸. 从而完成高清。 

这样全部网页页面在机器设备内显示信息时的网页页面宽度就会等于机器设备逻辑性像素尺寸，也便是device-width。
这个device-width的测算公式为：机器设备的物理学辨别率/(devicePixelRatio * scale)，
在scale为1的状况下，device-width = 机器设备的物理学辨别率/devicePixelRatio 。

4、rem完成

例如说“魅族”挪动端完成方法，viewport也是固定不动的：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

根据下列编码来操纵rem标准值(设计方案稿以720px宽衡量取具体规格)

!function (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    function e() {
      var h = a.getBoundingClientRect().width, g;
      if (b === 1) {
        h = 720
      }
      if(h>720) h = 720;//设定标准值的极限值
      g = h / 7.2;
      a.style.fontSize = g + "px"
    }

    if (b > 2) {
      b = 3
    } else {
      if (b > 1) {
        b = 2
      } else {
        b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("resize", function () {
      clearTimeout(f);
      f = setTimeout(e, 200)
    }, false);
    e()
  }(window);

css根据sass预编译程序，设定量取的px值转换rem的自变量$px: (1/100)+rem;

1像素边框高清

1.淘宝完成方法

上面说到的淘宝的完成方法即rem+viewport 放缩来完成。

transform: scale(0.5)

CSS编码：

div{
    width: 1px;
    height: 100%;
    display: block;
    border-left: 1px solid #e5e5e5;
    -webkit-transform: scale(.5);
    transform: scaleX(.5);
}

缺陷：

圆角没法完成，完成4条边框较为不便，而且只能独立完成，假如嵌套循环，会对包括的实际效果造成不要想的实际效果，因此此计划方案相互配合:after和before单独应用较多。

box-shadow

完成方式：

运用CSS对黑影解决的方法完成0.5px的实际效果。

-webkit-box-shadow:0 1px 1px ⑴px rgba(0, 0, 0, 0.5);

优势：

基础全部情景都能考虑，包括圆角的button，一条，好几条线。

缺陷：

色调不太好解决， 黑色 rgba(0,0,0,1) 最深的状况了。有黑影出現，不太好用。
很多应用box-shadow将会会致使特性短板。
4条边框完成实际效果没理想。

2.照片完成

应用 background-image 完成1px有两种方法: 渐变色 linear-gradient 或立即应用照片(base64)。

渐变色 linear-gradient (50%有色调，50%全透明)

一条线：

div{
    height: 1px;
    background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

多线条：

div{
    background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%),
    -webkit-linear-gradient(bottom, transparent 50%, #000 50%),
    -webkit-linear-gradient(left, transparent 50%, #000 50%),
    -webkit-linear-gradient(right, transparent 50%, #000 50%);
    background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
    background-repeat: no-repeat;
    background-position: top left, bottom left, left top, right top;

优势:
能够设定一条,好几条边框
能够设定色调

缺陷:
很多应用渐变色将会致使特性短板
编码量大
多情况照片有适配性难题

到此这篇有关挪动端前端开发兼容计划方案(总结)的文章内容就详细介绍到这了,更多有关挪动端前端开发兼容內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！