浅谈Web自适应.docx

优就业 浅谈Web自适应　　前言　　　　随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。　　特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta:　　1　　metaname=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0　　简单事情简单做-宽度自适应　　所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界面时候需要用到全屏布局时采用的就是此种布局方式。它的实现方式也比较简单，将外层容器元素按照百分比铺满地方式，里面的子元素固定或者左右浮动。　　1　　2　　3　　4　　5　　6　　7　　8　　9　　.div {　　width:100%; height:100px;　　}　　.child {　　float: left;　　}　　.child {　　float:right;　　}　　由于父