关于Html5移动端适配不同分辨率的布局总结

关于现在比较流行的一些框架比如bootstrap，用得多的人会发现bootstrap确实在做扁平化风格的网站方面，提供了很大的便利，适配不同分辨率的pc端，包括能适配到移动端。但是就我个人而言，从pc端适配到移动端这种一整套的方式还是有所不妥的，毕竟pc端显示的内容相对于移动端来说是很多很繁琐的，而移动端显示的风格大多以扁平化为主，屏幕显示的内容也不宜过多过于繁琐，所以要想直接从pc端适配到移动端的这一整套流程下来，只适用于一些内容不多的扁平化小网站。

好了进入主题，今天主要说说html是怎么适配不同分辨率的手机的，bootstrap虽然适配了整个屏幕的大小，但是你会发现，无论在哪个分辨率底下，字体的大小都是不会变的，没有做到不同的分线率显示不同的字体大小，这会造成一个问题，比如说在iPhone6的屏幕分辨率下，可以正常显示一段文字，但是在iphone5的屏幕分辨率比较小，那么那段文字显示就会出现异常，这种情况在开发的过程中经常会出现。

那么怎么让文字适配不同分辨率呢，不多说直接上代码：

@media screen and (min-width: 320px) {html{font-size:17.06666px;}}
@media screen and (min-width: 360px) {html{font-size:19.2px;}}
@media screen and (min-width: 375px) {html{font-size:20px;}}
@media screen and (min-width: 400px) {html{font-size:21.33333px;}}
@media screen and (min-width: 414px) {html{font-size:22.08px;}}
@media screen and (min-width: 440px) {html{font-size:23.46666px;}}
@media screen and (min-width: 480px) {html{font-size:25.6px;}}
@media screen and (min-width: 520px) {html{font-size:27.73333px;}}
@media screen and (min-width: 560px) {html{font-size:29.86666px;}}
@media screen and (min-width: 600px) {html{font-size:32px;}}
@media screen and (min-width: 640px) {html{font-size:34.13333px;}}
@media screen and (min-width: 680px) {html{font-size:36.26666px;}}
@media screen and (min-width: 720px) {html{font-size:38.4px;}}
@media screen and (min-width: 750px) {html{font-size:40px;}}
@media screen and (min-width: 760px) {html{font-size:40px;}}
@media screen and (min-width: 800px) {html{font-size:40px;}}
@media screen and (min-width: 960px) {html{font-size:40px;}}

以上是我自己总结的一段适配移动端的代码，安卓最大分辨率是750，那么我也以750为分界点，来设置项目的根字体大小。

那要怎么应用呢，主要是在单位的应用上，这里推荐使用rem，对rem不熟的朋友可以先去了解一下，如下给一个布局的例子，

比如在iphon6的分辨率为375，那么

.p{font-size:1rem}

此时在iphone6屏幕上显示的字体大小就是1*20 = 20，也就是20px大小，而750的分辨率下的字体大小就是1*40 = 40，也就是40px大小，所以在布局的时候会涉及到px与rem两种单位间的换算问题，这里推荐一个在线小工具http://alurk.com/，这个可以一次性将px全部转为换rem，http://pxtoem.com/这个可以一个一个的转换，看具体需求了。

当然，还有其他方式的适配代码，之前在微信公众号上看过一篇文章讲的就是适配移动端的，说得很不错，感兴趣的朋友可以去看看，会收获更多，这里分享地址点击打开链接