关于适配与兼容问题

概述

今天做了一个很简单的pc网页适配，主要要适配ipad端和手机端，结合之前的思考，记录下来，当做总结。

适配和兼容

• 适配
  什么是适配？就是让你的项目页面能够完美的展示在不同平台设备上，这里的区分重点是平台，包括电脑、平板与手机端。这三大类基本涵盖了不同大小(宽高)的电子屏幕。在每一个大的分类下面，设备的尺寸也是五花八门，对于一个页面，我们希望能够只写一次，让他自己根据设备的大小自我调节，从而使得样式与设计图保持一致。出于这个目的，我们需要使用一些手段，这也叫做适配不同尺寸的设备。

  1. flexible.js
     我本人最开始接触到的方法，就是flexible.js。这是个人写的脚本，引入到你的页面中。这个脚本的目的就
     是，根据不同尺寸的屏幕，动态计算html的font-size值，因为1rem=1个font-size的设备像素值。所以我们可以
     rem替代px，作为样式的尺寸。从而实现页面样式尺寸的动态变化。
  2. 媒体查询
     上面的方法可行，但是很粗糙，对于要求很细腻的样式，这种粗暴的方法不可取，所以就有了媒体查询的方
     法。媒体查询的本质就是人为的划分设备的尺寸大小区间，并根据不同的尺寸区间，量身定做一套css样式。
     例如你讲设备宽度划分为三个区间，750px以下，750px到1280px，1280px以上。在这三个区间中，你可以根
     据下面语法，书写不同的css样式。浏览器会根据设备的尺寸大小，从你书写的样式中寻找匹配的区间。

  @media screen and (maxwidth: 750px) {
  //样式代码
  }

  3. 直接分开写
     对于移动端，上述两种办法都不合适。这个时候就要进行重写，将移动端内容与pc端不一样，浏览器根据设备平台加载不同的页面内容。

• 兼容
  不同平台设备的匹配，叫做适配。这其实是从硬件的角度来说的。接下来产品能够软件的角度来看，基于确定型号的设备。同一个设备可能会运行不同的浏览器软件，不同的浏览器会有差异性，保持在大部分浏览器都能展现出我们希望的样子。这就叫做兼容。

补充

pc端样式可以写死(使用px)，ipad端和手机端不可以写死(使用rem)。