移动端适配涉及响应式设计和页面适配：页面响应式设计：响应式设计是指在不同的屏幕尺寸下，有良好的布局和内容表现。简单的说，就是一个页??面可以适配很多不同的屏幕尺寸，而且看起来还是设计的很好。为了实现这个目标，可能会使用CSS媒体查询、JS或CSS来动态改变布局的大小。在这个过程中，元素的大小会发生变化，布局会发生变化，甚至会隐藏元素。页面适配：页面的设计与设计稿的设计比例一致。这也是自适应的目的。在这个过程中，不同屏幕宽度的元素大小也会发生变化，但一般不会有布局变化，元素的隐藏。项目使用自适应方案，引入知名的自适应框架：flexible.js【淘宝方案】，最近的项目与此类似【自适应方式：一般来说就是rem+flex布局】。+缺点：使响应式样式设置变得繁琐部分响应式样式：除了使用@mediascreenand(max-width:(...)px)@mediascreenand(max-device-width:(...)px)px)引入全局非自适应插件样式：必须对dpr+进行响应式样式处理优点：无需处理1px边框问题，不会让边框显得粗[Retina情况下screen，即dpr>1，用1px大致就是一个物理像素]需要理解的概念物理像素（physicalpixel）：是设备中能够显示光线的点。我们常说的手机分辨率也指的是物理像素。Density-independentpixel：类似于尺子的刻度，前端所说的px单位指的是设备像素比（devicepixelratio）：物理像素/设备独立像素，也就是常说的dpr布局视图端口：这个标签主要是用来告诉浏览器如何规范地渲染网页。每个设备都有一个默认的视口宽度。在iphonex【屏幕尺寸：375X812；分辨率：2436X1125像素；默认视口宽度为980]设置如下Meta标签：中layoutviewport750X1642[放大2倍]计算元素的尺寸，然后将整体尺寸缩小2倍显示在设备屏幕上，实现操作处理。根据设备和移动端的设计稿尺寸设置html标签的data-dpr和font-size属性【常见的视觉稿尺寸可以大到640、750、1125】为了计算方便&小数点处理，大小一般分为10等分或者100等分【100等分也是对齐vw单位】来设计htmlfont-size,data-dpr是用来处理字体的大小，设置视口标签的属性来确定布局视口和缩放比例。：设置layoutViewport设置为设备尺寸：将布局视口设置为设备大小的x倍。元素的单位是rem，页面布局基本采用flex布局。【通俗方便】根据data-dpr的属性设置字体的大小，单位px。原因如下：大多数字体文件都带有一些点阵大小。为了方便设置字体为偶数，每个屏幕肉眼看到的字体大小应该是一样的。对应的代码操作【详见flexible.js】layoutviewportMethod//第一个方法：getBoundingClientRectvarwidth=docEl.getBoundingClientRect().width//第二种：clientWidthvarwidth=document.documentElement.clientWidth可以使用样式预处理器处理字体设置//scss处理器：定义宏方法@mixinfont($fontSize2x){$fontSize:$fontSize2x/2;@if(unitless($fontSize)){字体大小：$fontSize+0px;[data-dpr='2']&{字体大小：$fontSize*2+0px;}[data-dpr='3']&{字体大小：$fontSize*3+0px;}}@else{字体大小：$fontSize；[data-dpr='2']&{字体大小：$fontSize*2;}[data-dpr='3']&{字体大小：$fontSize*3;}}}//style中引用的file.className{@includefont(16);}其他方案介绍与网易方案对比：不动态设置viewportmeta，直接使用width=device-width的layoutviewport。该方案使响应式样式设置简单，但需要处理viewportmetanote中1px粗边框的问题固定宽度，然后整体缩放到设备屏幕：不能用cssmediaqueries做responsive，需要额外处理1pxborder的问题
