1. 求教：移动端web页面适配问题
之前默认使用的系统内置浏览器对象，去年应该已经在Android切换为第三方浏览器内核了。兼容性基本不用考虑，不需要考虑media
query了等等适配工作。基于参考要求，在任意一个终端上开发，在所有终端上都会有统一的展现。
基于em相对字体大小技术+屏幕DPI适配。
2. WEB二、移动端常见布局
目录：2、流式布局 3、flex布局 4、rem适配布局-media 5.less
不管网页的宽度怎么调整，两个div会分别占50%的宽度：
但是注意这里设置了 最大宽度和最小宽度
效果图：
一行三个盒子，两边的盒子大小固定不变，中间的盒子随着窗口的大小而变化。
效果图：
1、页面布局文字能否随着屏幕的大小变化而变化？
2、流式布局和flex布局主要针对于宽度布局，那高度如何设置？
3、怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
1、em单位例子：
2、rem单位例子：
当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）。
原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
css是一门非程序语言，没有变量、函数、scope（作用域）等概念。
如下例子的缺点：
保存 less 文件 自动会生成css文件：
引入css文件：
3. 移动端H5页面适配问题研究
刚开始做移动端web开发的同学应该都碰到过页面适配问题，为什么我在开发手机上调试好的页面在其他手机会有这样或那样的样式问题？ viewport 我也设置了，为什么还是显示不正常？难道我要为每种手机屏幕写媒体查询，有没有简单的方式，可以不用关注手机屏幕的差异性呢？
网络中搜索 移动端H5页面适配 关键字，大概可以得到180多万的搜索结果，由此可见这个问题也得到很多人的关注。本文的目的主要是分析解决移动端H5页面适配问题过程中牵扯到的知识点，然后梳理分析目前常见的适配解决方案。
由于本文内容较长，下面先给出文章的提纲：
1.1理解移动端单位
1.2理解viewport
2.1图片高清适配
2.2字体大小适配
2.3布局宽度适配
---这里是分隔符，正文开始---
不知道正在看文章的你对上面列出来的这些单位是不是很熟悉，如果是的话，就可以跳过了。
理解这些单位的用法以及区别，对理解移动端页面适配有很大的帮助。为了让你对上面的单位有个大体的认知，这里把上面的单位分成了三类：
下面分别对每个单位展开分析：
*** dpi / ppi ***
** dpi ** , dot per inch ，每英寸的点数；打印或印刷领域使用的单位，代表打印机每英寸可以打印出的点数 。
ppi , pixel per inch ，每英寸的像素数，像素密度；表示图像或者显示器单位面积上像素数量。
dpi 和 ppi 都是描述分辨率的单位，但是两者是有区别的，但是在描述手机分辨率时，可以认为两者意义相同，以前android设备偏向于使用 dpi ，ios设备偏向于使用 ppi ，目前android和ios统一使用 ppi 描述手机屏幕的像素显示密度。
ppi的计算方法：
*** ldpi、mdpi、hdpi、xhdpi、xxhdpi ***
android对移动设备不同屏幕分辨率的分类。
*** pt，pc，sp ***
** pt ** ，磅（point的音译），印刷中使用的表示字型的大小单位，1inch = 72pt （印刷中这个关系成立，ios中不成立），ios开发中使用的逻辑单位，是和设备无关的单位。
** pc ** 印刷中使用的单位，1pc = 12pt，不需要关注。
** sp **， scale independent pixel ，android设备中用来显示字体大小的，和设备无关的尺寸，当设置字体大小单位为sp时，android系统字体大小会影响设置的字体渲染时的大小。
*** dip / dp ***
** dp/dip**， device independent pixel，表示设备独立像素，和设备无关的尺寸，相同的dp/dip值，不同设备展示的效果是一样的。
android使用的单位，之前偏向使用dip，目前建议使用dp。
android设备中，规定160ppi的屏幕，1dp = 1px；320ppi的屏幕，1dp = 2px，所以android设备中dp的计算方法：dp = px * (ppi / 160)，这里的px是指设备的物理像素点。
和ios开发中用的pt单位类似。
*** px ***
** px ** ，像素，有两种像素概念，一种是网页设计中使用的css像素，一种是原生移动系统使用的物理像素。
作为css像素时，表示的也是一种设备无关单位，与android中使用的dp类似，默认情况下与系统分辨率下的像素大小相同，标清设备中，一个css像素和一个设备物理像素大小相同；在高清设备中，一个css像素可以大于或者等于多个设备物理像素，具体一个css像素，需要多少个物理像素来展示，浏览器会根据dpr计算。
原生移动系统中使用px单位时，表示的就是屏幕的物理像素点，每种屏幕的物理像素点大小可能不一样。
*** dpr ***
** dpr ** ，device pixel ratio， 横向或者纵向设备物理像素数量与设备独立像素数量的比值，浏览器中可以通过window.devicePixelRatio获取(存在兼容性问题)。
对于原生app，ios和android系统会自动根据dpr计算出渲染时需要的px值，最终不同屏幕上展示出来的大小很接近；而移动端页面渲染时想要做到这一点，就必须首先得到设备的dpr，然后再根据dpr计算渲染需要的px值。
ios设备中iphone3的dpr为1；iphone4,5,6,7的dpr为2；iphone6+,7+的dpr为3。iphone6+和iphone7+实际计算出来的dpr应该时2.6左右，但是官方还是建议dpr为3，这是因为ios系统利用了一种“缩减像素采样”算法，自动缩减到2.6。
android设备中dpr值有多种，可知的有0.75，1，1.5，1.75，2，2.5，2.75，3，4等。
*** em，rem ***
** em ** 相对单位，CSS2引入的单位，作为字体大小使用时和百分比单位类似，都是相对于最近的父元素设置的字体大小，在body上设置字体大小为100%和设置字体大小为1em是一样的效果，默认情况下浏览器的字体大小为16px，这样只要浏览器默认得字体大小不变，1em = 16px。
** rem ** 相对单位，root em，CSS3新增的单位，作用和em类似，唯一的区别就是em是相对父元素的，rem是相对html根节点的，即所有使用rem单位的子元素的字体大小都是相对根节点的，所以使用rem可以避免使用em带来的子元素字体大小逐层复合的连锁反应。
更多关于em，rem的知识参见这篇文章 理解web开发中的em单位和rem单位 。
*** 分辨率 ***
平时说的手机屏幕分辨率，也称为物理分辨率或者原生分辨率，通常包括纵向分辨率和横向分辨率，例如iphone6的物理分辨率是1334 x 750，其中纵向分辨率是1334px，横向分辨率是750px，表示纵向方向可以显示1334个物理像素点，横向上可以显示750个物理像素点，这里描述分辨率使用的px单位，和css中使用的px单位意义不一样，这里代指物理设备的像素点。
还有一种分辨率叫做系统分辨率，例如iphone6的系统分辨率是667 x 375，其中高度是667pt，宽度是375pt，这里描述分辨率使用了pt单位，是一种设备无关单位。
屏幕尺寸相同的设备，物理分辨率越高，ppi也就越大，绝对单位面积上展示的物理像素数量越多，展示图片也就越细腻。
苹果把ppi > 300的屏幕称为视网膜屏,Retina屏。
传统桌面web页面布局通常是定宽布局，但是定宽布局的方式对移动端却不适用，原因手机屏幕尺寸大小各异，定宽布局可能在某些手机上出现横向滚动条，导致阅读效果比较差。
为了让手机有更好的网页浏览体验，苹果引入了viewport，为页面提供了一个虚拟的布局窗口，在这个虚拟的布局窗口中渲染页面，然后系统会把渲染好的页面自动缩放到手机屏幕大小。
虽然viewport还没有成为正式的规范，但是现在绝大部分浏览器都支持viewport。
在桌面浏览器中，viewport严格等于浏览器窗口大小，页面渲染时，页面宽度不会超过浏览器的宽度。
移动端屏幕太窄，为了提供更好的页面体验，移动端提供了两种viewport： 可视viewport ， 布局viewport 。
可视viewport 就是当前屏幕正在展示的区域，也就是移动设备屏幕的宽度，宽高通过window.innerWidth和window.innerHeight获取（存在兼容性问题）。
布局viewport ，页面布局实际用到的viewport，通常比可视viewport要宽，宽高通过document.documentElement.clientWidth和document.documentElement.clientHeight获取。
移动端还有一种viewport概念，可以理解为 理想viewport ，作用就是在理想viewport下，不同移动设备，展示的字体大小接近，并且不需要用户缩放就可以展示全部的页面内容。
理想viewport的宽度默认等于可视viewport的宽度，但是对同一台设备来说，这个理想viewport的宽度是可以改变的，而可视viewport的宽度是不可变的。
如何使用理想viewport来布局页面呢？只需要设置viewport的width等于device-width。
viewport的属性，推荐使用以及支持度较广泛的属性只有6个： width ， height ， initial-scale ， maximum-scale ， minimum-scale ， user-scalable 。
width 设置viewport布局宽度，内核是webkit的浏览器默认值是980px，取值范围在200-10000px，也可以取值为设备宽度device-width（等于横向设备无关像素数量）。
height 设置viewport布局高度，默认值依赖设备长宽比以及宽度值，取值范围在223-10000px，也可以取值为设备高度device-height。
initial-scale 设置初始缩放比例，页面第一次加载时的缩放比例。默认比例依赖于显示密度。在密度低于200 dpi的显示设备上，比例为1.0。在密度介于200及300 dpi之间的显示设备上，比例为1.5。对于具有300 dpi以上密度的显示设备，比例为密度/150 dpi向下取整的结果。取值范围由 maximum-scale 属性以及 minimum-scale 属性决定。如果设置 initial-scale 值为1， width 默认是device-width， height 默认是device-height
initial-scale 设置的缩放大小会改变理想viewport的大小，不会改变可视viewport的大小，也不会改变布局viewport的大小，这是某些适配方案依赖的基本原理，也是解决 1px问题 的关键。后面分析适配方案时，动态viewport适配方案就依赖这个知识点。
maximum-scale 允许用户缩放到的最大比例，默认值是0.5，范围从0到10.0。
minimum-scale 允许用户缩放到的最小比例，默认值是5.0，范围从0到10.0。
user-scalable 用户是否可以手动缩放，值可以是：yes/true允许用户缩放；no/false不允许用户缩放。
图片适配的目的是为了在页面中可以高清还原设计图中用到的图片。
页面中用到的图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关，下面会通过三个例子来说明这个问题。
***示例一 ***
例如dpr=2的设备，1个设备无关像素(android中的1dp，ios中的1pt)需要4个设备物理像素点填充。对于尺寸为100 x 120 (px)的图片，如果用 <img> 来展示，图片显示时会产生模糊现象。
原因：渲染图片时，宽度是100px，所以横向会占用100个设备无关像素，高度是120px,所以纵向会占用120个设备无关像素，每个设备无关像素又需要2x2个物理像素点来填充，而图片在每个设备无关像素(px)单位上提供的像素点只有1x1个，这时，系统通过一定的算法在这1个像素点上就近取色，取到4个颜色(这4种颜色接近但是有一定区别)之后，当成4个像素点，然后填充到1个设备无关像素点上，这样就导致图片显示时模糊，dpr越大，这种方式显示的图片越模糊。
示例二
还是dpr=2的设备，但是准备了一个尺寸为200 x 240 (px)的图片，还是用 <img> 来展示，这时显示的图片就比较清晰了。
原因：这时图片本身可以在一个设备无关像素单位上提供2x2个物理像素点，设备展示图片时直接拿图片提供的像素点来填充就可以了，不用对像素点进行处理，所以可以比较清晰的显示图片。
示例三
还是dpr=2的设备，这次准备一个尺寸400 x 480 (px)的图片，还是用 <img> 来展示时，这种情况展示的图片缺少锐利度，也影响了图片的清晰度，但是很难看出来。
原因：图片本身在一个设备无关像素点单位上提供了4x4个物理像素点，而设备本身只需要2x2个物理像素点，所以会通过缩减采样算法，在图片提供的4x4个物理像素点中，选取颜色接近的2x2个物理像素点填充到设备无关像素点上，所以也会产生一定的色差，这种情况下图片尺寸越大，这种色差也就越明显，但是人眼很难区分这种色差。
下面是我在oppo的一款手机上的测试结果，结合这张效果图就可以很好的理解上面的三个示例了：
图片适配最佳实践
要想高清显示图片，如果条件允许(有单独的图片服务器)最直接的解决办法，肯定是根据设备的dpr，为不同dpr的设备加载不同倍率大小图片显示；没这种条件的或者对用户体验没有很高要求的，只能选一种折中的方案了，一般情况下只需要提供布局尺寸2倍大小的切图就可以了，也就是只高清适配dpr=2的设备，但是dpr为3或者4的设备展示效果也能接受，不容易看出来模糊现象。目前主流机型的dpr也就在2和3之间。
字体适配目标主要还是看设计要求，主要有两种：
1.不同屏幕下，字体显示大小都一样，即需要等宽显示字体；
2.不同屏幕下，一行能显示的字数固定，即需要按比例缩放字体大小；
开始分析之前，先看下这两种字体适配的示例：
第1种字体适配方案的示例
第2种字体适配方案的示例
下面就来具体分析下两种字体适配方案的原理以及优劣。
** 第1种字体适配方案原理 **
在开始分析这种方式的原理之前，先通过一张图理解下px和dp以及绝对长度之间关系。
由上图可知字体大小只与css单位px有关，而每个设备上px的绝对宽度又和设备的绝对宽度以及绝对宽度上划分出的设备无关像素点dp有关；只要设备的横向dp数量与绝对宽度的比值(dp/cm)相同，就可以保证px在不同设备上展示的绝对宽度是一样的；如果dp/cm的比值过大，那么px的绝对长度就会变小，看起来就会显小；如果dp/cm的比值过小，那么px的绝对长度就会变大，看起来就会显大；一般来说手机屏幕分辨率越高，相同px值的字体看起来就会越小。
iphone5和6的dp/cm比值十分接近，所以12px大小的字体在这两种手机上显示的大小基本一样，看不出来区别，但是iphone6+的dp/cm比值要比iphone5,6的略大，这就导致12px大小的字体在6+上显示的比5，6上显示的略小，上面的淘宝对比图仔细分辨可以看出来。
android的手机屏幕dp/cm比值在各个设备之间也有差异性，并且比较有多样性。所以同样12px大小的字体，各个设备显示时也是有差别的。
这种显示差别在iphone系列手机中可以忽略不计，但是android碎片化比较严重，完美兼容各种机型没有必要，主流机型中这种显示差别也可以忽略不计，所以采用这种方式进行字体适配只需要px值设置成一样的就可以了。
** 第1种字体适配方案优缺点**
优点：1.不同设备中字体大小显示一致，比较统一；2.大屏手机可以显示更多的文字；
缺点：1.由于单个字体宽度是定死的，所以在有些机型下可能会影响页面布局；
** 第2种字体适配方案原理 **
在设计稿中，计算出字体大小相对于基准字体大小（基准字体大小可以选择设计稿宽度，一般为了计算方便，会把设计稿宽度/10得到的值作为基准字体大小）的比值，然后在不同布局宽度下，先得到基准字体大小，再根据上面计算出来的比值，就可以计算出来不同布局宽度下的字体大小，也就是不同布局宽度下等比例缩放字体。
利用rem的特性，在页面的html标签上设置一个基准字体大小，就可以实现这种方式。
例如，宽是750px的设计图中，字体大小是32px，计算出基准字体大小为75px，比值为 32 * 10 / 75 = 0.426667。
如果布局宽度是414px，此时基准字体大小变成 414 / 10 = 41.4px，然后设置<html style="font-size:41.4px">，字体大小是0.426667rem，计算出来的字体大小为41.4x0.42667=17.66px。
如果布局宽度变成360px，此时基准字体大小变成36px，然后设置<html style="font-size:36px">，字体大小仍然用0.426667rem表示，计算出来的字体大小为36x0.42667=15.36px。
750/32 约等于 414/17.66 约等于 360/15.36，这样就做到了等比缩放字体了。
** 第2种字体适配方案优缺点**
缺点：1.小尺寸设备屏幕上字体显示小，大尺寸设备屏幕字体显示大，导致字体显示不一致；2.不能发挥大屏手机的优势（显示更多的字）；3.字体大小会出现奇数或者小数点大小的值，某些字体不支持这些值，渲染时增加计算量；
优点：1.适配简单，不同设备不会影响页面布局，可以和设计稿布局保持一致；
布局中对宽度的适配，也是采用rem来实现，和上面第2种字体大小适配方式中的原理类似，也是计算出一个比例值，然后不同布局宽度中等比缩放，这里偷下懒，不在赘述。
目前的解决方案有两类
第一类就是js动态生成viewport标签，标签中的initial-scale值根据设备的dpr计算，不同dpr设备的viewport值不同。
第二类就是js不操作viewport，每个设备都使用理想viewport来布局。
** 动态viewport解决方案分析 **
这里分析两个动态viewport解决方案：
1.手机淘宝的flexible方案；
2.hotcss方案；
手机淘宝的flexible方案 ，特点：
1.仅针对iphone生成动态viewport，因为目前iphone的dpr只有1，2，3三种，android的dpr很有多种，不具有一致性；
2.字体大小不用rem做缩放处理，仍然使用px单位，设置不同dpr下对应的字体大小；
3.宽度利用rem等比缩放；
4.允许强制定义dpr;
使用时页面头部需要引入 flexible.js .
hotcss方案 ，特点：
1.不区分iphone和android，dpr只取三种1,2,3，android的dpr做近似处理；
2.宽度以及字体利用rem等比缩放；
3.允许强制定义dpr;
使用时页面头部需要引入 hotcss.js
动态viewport方案之所以会称为动态viewport是因为，这个适配过程会根据系统dpr值设置initial-scale属性的大小，大小等于1/dpr。
** 静态viewport解决方案分析 **
利用rem特性，先根据标注图算出各元素相对于设计稿宽度的比值，这个比值就作为rem值，然后页面布局时就用算出的rem值表示，并且在html根元素设置当前布局页面宽度作为基准。更rem值计算具体的解释可以参考这篇文章 使用Flexible实现手淘H5页面的终端适配 。通过这种方式设置标签元素的宽高，位置以及字体大小，这样利用rem特性就可以在不同手机屏幕上实现等比缩放。
参考资料
https://github.com/amfe/article/issues/17
http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html
4. 在移动端 web怎么做到自适应布局
css3用box-flex;在w3school里找找，主要是根据父元素按比例分配高度父元素{width:100%;display:box;}比如三栏布局A、B、C要想设成一样的宽度就用A{box-flex:1;}B{box-flex:1;}C{box-flex:1;}要是两栏布局B是A的2倍那就是A{box-flex:1;}B{box-flex:2;}高度也是还有一个css3的新功能就是calc()计算，可以计算高度，可以试着用一下PS，我只是说说，移动端响应式局的话，布局要随着窗口变的，就像你这个，要是在普通的手机端就得变成一栏布局，不能保持三栏用MediaQuery设置不同的窗口宽度给不同的css样式都是css代码不用js控制
5. 移动web终端 viewport设置
移动web，顾名思义就是在移动端的web页面，比如我们可以在手机的UC浏览器中访问淘宝等网站：
可以发现淘宝的移动web版本和pc上web版本有很大的不同，在移动web版本中更像是模拟了native应用中的页面。所以移动web的开发和pc上web的开发肯定也是有很大的不同。
先看正常的pc上web页面在移动设备上的展示：
从上图可以看出，正常PC上的网页在移动设备被缩放了，这样对于商城购物类的网站来说，用户体验非常差，所以就更应该要有适配移动设备的页面了。
那么究竟是怎样适配移动端的页面呢？答案就是viewport，可以将viewport理解为浏览器中用来承载网页的那一层。默认情况下移动设备上浏览器会自动将viewport的值设置为980px或者1024px，不过手机的屏幕没有那么大，这时候网页就缩放了。
到这里，web适配移动设备的方案就出来，让viewport=手机的宽度就好了。是的，正常情况下都是这么用的：
在meta标签中设置viewport的宽度为设备的宽度， initial-scale=1 的意思是页面的缩放比例为1， user-scalable=no 的意思是禁止用户缩放页面， minimum-scale=1,maximum-scale=1 的意思是设置用户的最大最小缩放比，当设置了 user-scalable=no 之后这两个属性值就没有意义了。
以上就是viewport的主流设置，不错淘宝（m.taobao.com）就是非主流的设置，淘宝的移动web页面中viewport没有设置宽度：
所以淘宝的viewport的width应该是用js动态获取的。
6. 移动 WEB 如何适配千奇百怪的分辨率
在移动端存在各式各样的分辨率，移动端网页就会面对很复杂的兼容问题，并非是兼容系统，而是要保证页面在不同分辨率网页当中效果的一致性。
对于这种问题，其实还是比较好解决的，横向采用百分比，就能够实现内容随着设备宽度大小的变化而变化的需求。
比较难解决的问题是纵向上的高度问题，相信你也使用过百分比去尝试解决，但是如果高度采用百分比，盒模型中padding、margin等属性的计算方式有些特殊，这也就导致纵向不能够使用百分比。（对于这方面如果希望了解，可以在一个叫“HTML5学堂”的网站当中查看，里面有非常详细和清晰的讲解，在此我就不再重复书写了）
这样的现状就导致纵向需要使用其他单位来解决，于是就会使用到CSS3当中一个新的单位，rem。
rem是一个相对度量单位，是针对html标签的字体大小来计算的。如果html标签的字体大小为16px，那么1rem就是16px，如果html标签的字体大小是20px，那么1rem就是20px。
横向使用百分比，纵向使用rem，之后用JS去获取当前设备宽度，并根据设备宽度、设计图宽度、设计图基准字体大小，通过JS计算出当前设备下html文件的font-size（基准字体大小），就是适配移动端各个分辨率设备的方法。
给出JS代码作为参考，不过，这个JS是基于JQ的：
这个里面设计图是640的，设计图中最小字体是24像素。所以，当你进行开发时，如上这段代码当中的几个数字，也要根据设计图的具体值而调整。
7. VUE移动端及PC端适配方案
前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用postcss-px-to-viewport方案来实现适配，效果也很显着，每个页面都适配到位
step1. vue安装postcss-px-to-viewport插件。
step2. 配置适配升磨念插件的参数
使用PostCss配置文件时，在<u>postcss.config.js</u>添加如下配置：
或者在<u>package.json</u>中，添加以下配置：
说明下几个重要参数的使用：
适配存在的问题点：
注：执行指令后在package.json的devDependencies分支可以看到吵困相应的版本，
2. 在main.js中导入lib-fixible.
如果未使用游羡vue的伙伴可以直接在前端中直接使用阿里的CDN，如下：
注：此处是postcss-px2rem而不是px2rem-loader,网上很多文章都引用是后者，会导致在配置时候无法成功配置。
在vue.config.js中配置如下配置即可，如未有此文件请自行搜索查询创建配置。
集成以上两个步骤，基本前端即可根据屏幕自行适配，但可能有部分伙伴会遇到data-dpr始终为1，遇到这个情况多半是因为在html头中自己设置了<meta name="viewport" ...>，
查看lib-flexble做了配置，默认会根据屏幕为我们添加头文件的，如果自行设置，那么只会进行修改设置的值而已，并不会再添加，所以导致data-dpr始终为1，所以把<metaname="viewport" ...>去除.