81.移动端适配方案
Opened this issue · 0 comments
常见的处理方案
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(清除浮动) 实在不行 用媒体查询来改变定位位置来达到适配