html5页面适配方法,H5案例分享：HTML5移动页面适配方法

HTML5移动页面适配方法

之前做过PC页面时考虑最多的是兼容，这是因为浏览器之间的差异引起的。而移动端是基本没有“兼容”的问题了，全是CSS3，是不是很开心，但是开心早了，因为适配的问题来了，痛哭~~~

什么是“适配”？简单除暴点讲就是当我们开始做移动端页面的时候，设计师给了一份宽度为750px的设计图。那么，我们把这份设计图实现在各个手机上的过程就是“适配”。

目前移动端做适配有四种方法：

一、CSS3媒体查询

采用CSS3媒体查询可以为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度大于375px的页面中的class="content"的元素设置样式，可以这样写，@media screen and (min-width=375px) {.content { styles }};

移动设备显示尺寸大全 之CSS3媒体查询：

@media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}

@media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}

@media screen and ( min-width: 359px){/*360px显示屏样