关键词：
前面两篇文章介绍了移动端网页开发所要具备的基础知识。
今天着重来讲解移动端的适配方案。
做PC端页面的工程师聊的最多的是兼容，这是因为浏览器之间的差异引起的。而移动端基本是没有兼容问题的，全是css3，简直不要太开心。
但是最明显的是适配问题。
什么是适配呢？做PC页面的时候，我们按照设计图的尺寸来就好，这个侧边栏200px，那个按钮50px。可是，当我们开始做移动端页面的时候，设计师给了一份640px的设计图。那么我们如何把这份设计图实现在各个手机上的过程就是适配。
我所接触过的适配方法，目前是三种，如果有朋友知道更多的，麻烦请补充指教，可以发送到本人邮箱1211050148@qq.com，共同学习共同进步。
1️⃣固定高度，宽度自适应
2️⃣固定宽度，viewport缩放
3️⃣rem做宽度，viewport缩放
举例说明：
1️⃣固定高度，宽度自适应
示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-fixed-height.html
这也是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex都行。腾讯、京东、百度、天猫、亚马逊的首页都是使用的这种方法。
随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用_响应式布局_调调就行（比如网易新闻），这样就实现了『适配』。
原理：
这种方法使用了完美视口：
<meta name="viewport" content="width=device-width,initial-scale=1">
2️⃣固定宽度，viewport缩放
示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-fixed-width.html
设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px即可。
目前已知荔枝FM、网易新闻在使用这种方法。有兴趣的同学可以看看是怎么做的。
原理
这种方法需要根据屏幕宽度来动态生成viewport，生成的viewport基本是这样：
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
640 是我们根据设计图定下的，0.5 是根据屏幕宽度动态生成的。
生成的viewport告诉浏览器网页的布局视口使用 640px，然后把页面缩放成50%，这是绝对的等比例缩放。图片、文字等等所有元素都被缩放在手机屏幕中。
这个gif图说明了一切：
3️⃣rem做宽度，viewport缩放
示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-rem.html
根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。
原理：
-
动态生成 viewport
-
屏幕宽度设置 rem的大小，即给<html>设置font-size
-
根据设备像素比（window.devicePixelRatio）给<html>设置data-dpr
这么设置的好处是可以让不同设备的rem或px都显示一样的长度。
设置rem
设置rem的意义在于得到一个与屏幕宽度相关的单位，本来vw是最合适的，但是因为兼容性的问题，只能使用rem来做。这样，让不同设备的rem显示一样的长度。
vw是CSS3引入的单位，1vw = 1%窗口宽度
上面的布局我们可以这样：
html{
font-size: 屏幕宽度 / 10;
}
.btn{
width:8.75rem;
height:1.25rem;
}
这样，无论屏幕宽度是多少，.btn都是相对于屏幕的这么宽，做到了适配。
设置 viewport 缩放 和 data-dpr
这两个设置其实是干的一件事，就是适配高密度屏幕手机的px单位。
.a{
font-size:12px;
}
[data-dpr="2"] .a{
font-size: 24px;
}
[data-dpr="3"] .a{
font-size: 36px;
}
而缩放是动态的，这样，不同设备下的px显示一样的长度。
之前说过CSS像素和物理像素与缩放、dpr都有关系，这里说明：
在普通手机上，.a字体设置为12px；
在dpr是2的手机上，[data-dpr="2"] .a字体为24px，又因为页面缩放50%，字体为还是12px
关于这部分适配的JS文件本人有做收藏，因为我觉得还需要细讲一下，所以我准备放在下一篇来讲解。
最后打个广告，欢迎加入本人创建的前端qq群399627992，谢谢！
探究移动端开发
探究移动端开发 什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。 第一部分：基本概念 物理像素... 查看详情
认识移动端开发
认识移动端开发 什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。第一部分：基本概念 物理像素... 查看详情
移动端适配的总结(代码片段)
说起移动端页面也是老生常谈了，最近正好在做金融商城移动端的开发，正好梳理下这一块的知识点，提炼和总结。一 什么是移动端页面 首先 不扯那些长篇大论，常见的移动端页面主要就三种，即H5页面、... 查看详情
探究移动端开发
什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。并且现在手机上的app有一部分也是h5页面，对于Android系统的手机，我们打开手机上的开发者选项，开启显示布局边界，如果发现页面有布局则是native，否则是... 查看详情
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。1.常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置... 查看详情
html网页如何完美的适配到移动设备上
在pc端开发了一系列html网页，但是在移动设备上适配得不是太好，尤其是Android上，页面上的一些图片没有显示在正确的位置，请问圈里哪位大神明白的，跪求详细讲解...1、在已安装的电脑桌面新建一个Word文档（演示文稿以Office... 查看详情
移动端页面开发及传统pc端网页开发的异同
...完时间的飞逝之后，拿过来在这里分享一下吧，话题是：移动端页面开发及传统PC端网页开发的异同，这个ppt是搜集网上众路资源（包括视频课程）加上自己的理解总结的。如若有误，欢迎指正哦～ &nbs... 查看详情
你了解过移动端适配吗？在线面试指南
背景经常有网友在知乎问答提两个问题：“现在学习移动开发还有前景吗？””开发还有什么可以研究的？“。网友回复：“现在还学移动开发？如同49年加入国军！”其实这两个问题对应着同一个现象... 查看详情
移动端适配/移动开发与桌面开发(代码片段)
移动开发与桌面开发 手机网页开发（移动网页）使用的技术是一样的区别仅在屏幕尺寸和交互方式 1.设置viewportmate标签（元数据）是数据的数据信息<meta>标签提供了HTML文档的元数据。元数据不会显示在客户端，但是... 查看详情
懒人必备的移动端定宽网页适配方案
如今移动设备的分辨率纷繁复杂。以前仅仅是安卓机拥有各种各样的适配问题，如今iPhone也拥有了三种主流的分辨率，而未来的iPhone7可能又会玩出什么新花样。如何以不变应万变，用简简单单的几行代码就能支持种类繁多... 查看详情
移动端适配知识梳理
了解移动端的知识viewportviewport是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏... 查看详情
前端技术栈都有哪些
...作与样式设计实现，能够配合UI设计师进行项目开发。2、移动端页面制作与响应式实现讲解移动端布局与设备适配、响应式设计与实现等，获得移动端页面适配工程师技能，主要进行移动端网页的布局制作与样式设计实现。可以... 查看详情
rem,vw,还是...?各凭本事的移动端适配方案(代码片段)
...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情
pc端网页和移动端网页，自己做的总结
1.PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的... 查看详情
html移动端适配方案rem
为了做到一次开发的网页能够在不同尺寸的移动端设备上适配，我们需要使设计稿上标注的固定尺寸在不同设备上按照设备大小的比例显示不同的尺寸。比如设计稿是按照 IPhone6 的 750px 像素设计的，设计稿上的头... 查看详情
移动端开发适配的2中方案(代码片段)
原文地址：http://www.cnblogs.com/tugenhua0707/p/5568734.html针对移动端适配的方案~一：第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置：htmlfont-size:100px;@media(min-width:320px)htmlfont-size:10... 查看详情
移动端适配方案总结(代码片段)
目录一、背景介绍1.1为什么要进行移动端适配1.2移动端适配方案二、rem方案2.1什么是rem2.2怎么根据屏幕尺寸设置根元素html的font-size2.3postcss-pxtorem三、viewport方案3.1什么是viewport方案3.2postcss-px-to-viewport四、总结（如果只想看实... 查看详情
原创移动端高清多屏适配方案
移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉... 查看详情