81.移动端适配方案

[webVueBlog]

常见的处理方案

1.media queries(媒体查询) 这套方案估计大家都比较熟悉了 主要就是运用css来判断设备宽度在不同的区间运用不同的样式 个性化定制会比较高 这里看一下

例子

pc端

.feature {
 width: 50%;
 display: inline-block;
 vertical-align: top;
 height: 200px;
 overflow: hidden;
 zoom: 1;
 margin-bottom: 75px;
 float: left;
}

移动端

@media (max-width: 768px)
.feature {
 display: block;
 width: auto;
 max-width: 400px;
 margin: 0 auto  100px;
}

2.rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位，rem计算的规则是依赖根元素。原理是先按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size

单纯使用rem布局来达到自适应 字体宽高 边距等全部使用rem代替px

3.flex或者百分比布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 一般移动端浏览器对flex支持都比较好 所以很多布局思路会使用弹性盒子布局 可以结合百分比布局来实现想要的效果

.m-header2__tips {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 font-size: 14px;
 line-height: 32px;
 text-align: center;
 color: #bbb;
 display: flex;
 justify-content: center;
 align-items: center;
}

4.viewport

viewport指的是移动设备浏览器中放置页面的一个虚拟的窗口，该窗口可大于或小于移动设备的可视区域。当我们将一个pc端的网页放到移动端的时候，移动端浏览器会将pc端的网页按照一定的比例完整的显示出来，这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版（ios默认的是980px，Android4.0以上为980px），然后通过比例缩放看到整个页面的全貌。

  width=device-width ：表示宽度是设备屏幕的宽度
  initial-scale=1.0：表示初始的缩放比例
  minimum-scale=1.0：表示最小的缩放比例
  maximum-scale=1.0：表示最大的缩放比例
  user-scalable=no：表示用户是否可以调整缩放比例

宽度写死 不设置viewport 样式不乱

宽度写死 设置viewport 样式乱了

移动端web开发必须了解的viewport

<meta name="viewport" content="width=device-width, initial-scale=1" />

1.屏幕分辨率

屏幕分辨率：屏幕分辨率是一个物理属性，表示一个屏幕上有多少个像素点，如iphone 6 的分辨率是1334px ×750px,表示屏幕可以分成1334*750个像素点。

2.屏幕尺寸

这个很容易理解，只需要知道我们说的手机5.5寸屏，说的是对角线的长度。

3.屏幕像素密度 dpi/ppi

每单位尺寸上，有多少个物理像素点。一个手机给你，屏幕分辨率是固定的，屏幕的尺寸是固定，所以屏幕像素密度也是固定的。

4.css像素

css像素不是绝对单位，是相对单位。在PC上，1px与1物理像素是一致的，所以如果你的笔记本屏幕分辨率是1366px x 768px 的，你给body width：1366px,刚好撑满屏幕。但事实上css里的1px并不总是等于1物理像素。在移动端，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。此外，屏幕缩放也会影响到这个关系。

5.device-width（这里的width是csspx）

这个东西，曾经困扰了我很久，单单去理解viewport,并不是很复杂，但是当你决定要把一系列知识搞清楚的时候，任何一个环节想不通都会让你抓狂。device-width从字面意思上即设备宽度，但是iphone 6的分辨率为1344px750px,而iphone 6的device-width为375px,iphone 5的device-width为320px,很明显device-width与分辨率不是一比一的关系，那么它与移动设备的物理像素，尺寸，单位像素密度又何关系呢？在回答这个问题之前，我们先想，如果device-width与物理像素一致会发生什么？

iphone 3的分辨率320px480px,iphone 4的分辨率翻了一倍，但是iphone 3和iphone 4的尺寸却是一样的。所以如果device-width与物理像素为1：1的关系，那么原来为iphone 3开发的网页中，有一个100px的div,大约占了屏幕的1/3，而在iphone 4上，只占了屏幕的大约1/6，这显然不行，原来满屏的东西，在iPhone4上只占了一半。所以现在就要解决这个问题

方案1.：再为iphone4写一套css，原来100px的东西，现在写200px

方案2 ：既然屏幕尺寸没变，那就device-width也不变，保持320px.显然此时1px等于2个物理像素

经过简单分析，我们应该采取方案二。因为移动端的一个很大特点就是手机分辨率五花八门，按照方案1，岂不是要为每一种写一套，而且分辨率的变化程度远大于屏幕尺寸的变化程度，如上iphon3与iphone4.对于俩个尺寸大小差不多的手机，同一个东西大小看起来就差了很多，用户体验就会很不好。所以我们想要实现的一个效果就是100px的东西，在尺寸差不多大的设备上看起来都差不多大，
那么device-width应该多大呢？接下来，我们具体的看一下device-width应指是如何计算出来的。

根据设备的dpi,对应着一个转换系数（以屏幕分辨率宽度=device-width=320px的设备为标准），如iphone4 dpi对应的的转换系数为2，所以iphone 4的device-width=640px/2=320px,iphone 6的转换系数也为2，device-width=750px/2=375px.假设，折转换系数为m,则1csspx等于m倍的物理像素，这里转换系数都是依据dpi的，不能仅根据物理像素的比例关系，因为iphone3和iphone4的尺寸刚好一样，如果iphone4的屏幕分辨率扩了一倍，而尺寸也扩大了一倍，那么在刚才device-width=物理像素的假设为真时，100px的东西在iphone4与iphone 3的大小应该是一致的，所以尺寸的变化也会影响到这个比例关系，所以同时考虑物理像素和屏幕尺寸不好比较，所以统一用dpi,就没这个问题了。

悟空CRM系统移动端适配探究

<meta name="viewport" content="width=device-width,initial-scale=1" />

自适应，页面不能写死的宽度

使用绝对定位

当我们在移动端看到很多字重叠在一起时 很有可能就是采用了绝对定位造成的 例如：

position: absolute;
top: 0px;
right: 50px;
z-index: 999;

虽然绝对定位简单粗暴 但是很多时候如果有其他的代替方案 并不被推荐使用它 因为在适配方面确实有点糟糕

我们可以用flex或者float替代绝对定位 float一定要配合clearfix（清除浮动） 实在不行 用媒体查询来改变定位位置来达到适配