移动端适配详解
Posted Wayne Zhu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端适配详解相关的知识，希望对你有一定的参考价值。
接触移动端网页已经有一段时间 了，一直希望找个机会好好地总结以下，但一直比较懒，所以才拖到了今天。
推荐网站：www.aol.com 响应式做的很好。
之前我写过一篇关于移动端布局的文章，这里。这篇文章中介绍了大部分的基本知识点，有需要的可以参考。
我们知道常用的布局方案有：
1. 百分比布局，高度固定
第一种布局方式在移动端是不可采取的，尤其是Retina屏的出现。 有人说我高度不固定而是采用高度由内容撑起来，这样同样是解决不了内容被压扁的尴尬，原因自然就是iphone6 、iphone 6 plus等的出现，dpr更高， 所以元素就会被压扁，简单的测试就可以得出相关的结论。
2.宽度固定，使用viewport缩放
这种方式也是不可取的，会造成像素丢失、文本折行等种种问题。
3.rem布局
这种布局方式是最好的。
rem布局中，是以根元素<html>的font-size 大小为基准的， 我们一般使用flexible.js即可实现。它会动态地设置meta标签，使得网页在各个手机浏览器上都能很好地显示。
但是使用rem布局有下面的几个方面是我们需要关心的。
第一： 怎么理解dpr，width、device-width、等基本概念
我们先引入flexible.js，然后再chrome中打开，然后可以发现iphone6（750*1334） 的上面的width为375，这个实际上就是device-width，而我们是根据750px的设计图进行还原的，这里的750px就是我们的css像素width，这一点实际上我们通过学习媒体查询也是可以领悟到的，并且可以看到，在meta标签中，scale为0.5，这是因为我们做的750px的网页需要强行缩小一半放入Ipone6中，这样，和其他dpr为1的手机相比，不难得知，iphone6的手机在相同的屏幕大小有更多的像素点，这样毫无疑问，显示也就越清楚。同样，拿到iphone 6 plus可以发现，其dpr为3， scale为0.33333，从这两个例子我们就可以发现dpr和scale互为倒数的关系。并且我们再html的元素中看到的font-size实际上就是width的1/10 。
第二：对文本段落的字体设置使用px还是rem？
选用他们中的哪一个，这个决定于实际项目的需要。 首先可以肯定的是，我们一定不能仅仅使用px来设置，而是通过dpr来设置不同dpr下的段落的字体大小，如果不是这样，不难想象，在iphone5及以上，字体会突然变小，从而产生极差的用户体验。
如果结合dpr使用px，我觉的这是最好的一种方式，这种方式的优点在于：1. 在retina屏幕下文字也不会变得很小，而是正常的显示。 2. 即使手机的屏幕比较大，字体也不会显示地很大，这样可以使得用户体验更好，试想，即使我们拿了一个较大的手机， 多是用于看视频或者是玩游戏等等，而这时显示在你手机上的文字却特别大，是不是很奇葩呢？ 3. 这样做的另一个好处就是不会因为使用rem从而导致你的字体可能会出现一些比较奇葩的尺寸。
但是并是不是说使用dpr结合px就没有坏处了，比如说我们需要一款产品，要求这一行的最后一个子一定是我，下一行一定是爱，最后一行一定是你，这时，如果使用px来设置字体显然是做不到的，因为其中的字体会随时随着屏幕而变化位置的，但是使用rem布局就不是这样了，因为rem布局会等比例的放大或缩小，所以rem布局就会很好地满足这一需求。
以上是关于移动端适配详解的主要内容，如果未能解决你的问题，请参考以下文章