关键词：
最近要接一个移动端的需求。
类似歌曲排行榜的H5页。
本人未雨绸缪，学习一波移动端适配方案。
0. 移动端 vs PC端区别
移动端布局复杂在哪里捏？
那就是。
PC端布局，css的1px = 1个物理像素。
也就是说，不管换多少台pc过来，css定义的1px，在所有设备上，都长一样：就是1px。
移动端布局：css的1px = n个物理像素。（n未知）
也就是说，不同的设备，css定义1px，展示出来的效果可能会千差万别。
我们的目的就是，在移动端，css定义1px，在所有设备，展示出来的效果，完全一致，还是1px。
这一点，如何来实现呢？
且看下文。
1. 页面的三个视窗和缩放
1.1 layout viewport和visual viewport:
如图所示。
layout viewport是我们文档的大小（document）。这就是我们前端工程师绘制的文档。可以使用document.documentElement.clientWidth获取它的宽度。
visual viewport是当前可是区域的大小（window）。可以使用window.innerWidth来获取它的宽度。
图中，layout viewport比visual viewport要大，所以假设前端开发工程师开发了如图layout viewport大小的文档，在显示时，会出现横向的滚动条（我视图中纵向高度两者一致）。
所以，在移动端，当然不想要横向纵向的滚动条了。所以，如何想办法使layout viewport和visual viewport等大呢？且待后文分解。
1.2 ideal viewport:
随着手机平板更新换代。屏幕变得越来越扑朔迷离呀。
移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
所以说，一个设备，它的窗口范围可能是320x480。但是人家的屏幕像素密度大，可能我们一个320x480的文档，只能占有屏幕的四分之一。
这个设备，它的ideal viewport是640x960，visual viewport是320x480。实际上，ideal viewport才是真正展示到设备上的最终屏幕大小。
所以，我们希望我们的文档能正好铺满所有不同屏幕像素密度的设备，假设我们解决了layout viewport和visual viewport，我们还要解决ideal viewport和visual viewport不一致的问题。且待后文分解。
1.3 页面的缩放
如果用户把页面放大一倍，可以想象，1px像素，在屏幕上，就会显示出4个物理像素（分别是横向和纵向）。这时候假设我们解决了三个layout不同的问题。用户一缩放，物理像素和绘制像素又不等大了。我们希望在移动端，禁止整张页面的缩放。
2. 移动端适配
我们现在有以下目标：
- 使上文提到的三个
layout等大 - 让用户不能缩放
2.1 使用meta标签控制viewport
先甩一个meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">这个meta标签是做什么用的呢
看一下参数：
width：设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale： 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale： 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale： 允许用户的最大缩放值，为一个数字，可以带小数
height设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable： 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
设置一下width:
<meta name="viewport" content="width=device-width">device-width是设备的物理宽度，就是ideal viewport。
呦吼，一步到位呀。
根据上文的api，我设置了layout viewport的宽度和ideal viewport的宽度一致，解决了css 的px单位与设备真实物理像素对应的问题。
哈哈，以后我在文档里面，这么写也不会有滚动条喽。
// main是body下最外层元素
.main
width: 100%;
height: 100%;
考虑页面的兼容性，再加入禁止缩放：
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maxnum-scale=1,user-scalable=no">啦啦啦啦，齐活。
pc端移动端页面适配方案(代码片段)
前言 页面自适应PC端、移动端大体上可以分为两种： 1、在同一个页面进行自适应布局，通常使用CSS3 @media 媒体查询器实现 2、两套页面，在后端进行统一适配，根据不同的浏览器UA返回对应的页面 ... 查看详情
rem,vw,还是...?各凭本事的移动端适配方案(代码片段)
...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情
pc端移动端页面适配方案(代码片段)
...m/huanzi-qch/p/12053799.html 前言 页面自适应PC端、移动端大体上可以分为两种： 1、在同一个页面进行自适应布局，通常使用CSS3 @media 媒体查询器实现 2、两套页面，在后端进行统一适配，根据不同的浏览器... 查看详情
移动端页面适配解决方案(代码片段)
一、流体布局所谓的流体布局，就是用百分比来定义宽度，最外层容器的宽度设置为100%，就可以适配不同的屏幕，子元素按照比例来设置百分比，子元素整体的百分比之和就是100%，但是如果有子元素设置了边框，或者padding，那... 查看详情
再聊移动端页面的适配(代码片段)
再聊移动端页面的适配https://www.w3cplus.com/css/vw-for-layout.html 原文网址Flexible承载的使命Flexible到今天也有几年的历史了，解救了很多同学针对于H5页面布局的适配问题。而这套方案也相对而言是一个较为成熟的方案。... 查看详情
手淘h5移动端适配方案flexible源码分析(代码片段)
移动端适配一直是一个值得探讨的问题，在业余时间我找了一些页面，查看了一些厂商对于移动端H5页面的适配方案，看到了几个典型的例子，今天就来记录一下我看到的第一个典型的例子，也是我们公司目前普通H5项目正在使... 查看详情
前端移动端适配-媒体查询适配方案(代码片段)
背景工作中难免会有写静态页面的需求，有时候移动端适配真的是做的心累，如果自己新做一个页面倒还好，整体布局会按照自己习惯来，但有时候不得不修改别人的代码，尤其是别人没适配好的代码，找... 查看详情
移动端开发适配的2中方案(代码片段)
原文地址：http://www.cnblogs.com/tugenhua0707/p/5568734.html针对移动端适配的方案~一：第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置：htmlfont-size:100px;@media(min-width:320px)htmlfont-size:10... 查看详情
rem移动端适配方案(代码片段)
一、remvsem 单位定义特点remfontsizeoftherootelement以根元素字体大小为基准emfontsizeoftheelement以父元素字体大小为基准 二、js计算为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我... 查看详情
移动端适配方案总结(代码片段)
目录一、背景介绍1.1为什么要进行移动端适配1.2移动端适配方案二、rem方案2.1什么是rem2.2怎么根据屏幕尺寸设置根元素html的font-size2.3postcss-pxtorem三、viewport方案3.1什么是viewport方案3.2postcss-px-to-viewport四、总结（如果只想看实... 查看详情
html新增api使用及移动端web页面的布局方式(代码片段)
...)文件读取FileReader的使用方法地理定位：Geolocation接口移动端Web页面的布局方式流式布局弹性盒布局布局原理flex布局父项常见属性flex布局子项常见属性rem适配布局rem单位媒体查询(MediaQuery)响应式布局响应式 查看详情
移动端开发必会出现的问题和解决方案(代码片段)
...，之后我也会实践后加以补充，感谢！（经常更新该文）移动端H5相关问题汇总：1px问题响应式布局iOS滑动不流畅iOS上拉边界下拉出现白色空白页面件放大或缩小不确定性行为click点击穿透与延迟软键盘弹出将页面顶起来、收起... 查看详情
转：如何在vue项目中使用vw实现移动端适配(代码片段)
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多... 查看详情
移动端适配的总结(代码片段)
说起移动端页面也是老生常谈了，最近正好在做金融商城移动端的开发，正好梳理下这一块的知识点，提炼和总结。一 什么是移动端页面 首先 不扯那些长篇大论，常见的移动端页面主要就三种，即H5页面、... 查看详情
h5-移动端适配(代码片段)
之前写H5页面也会遇到适配问题,是通过媒体查询一点一点调整,始终觉得很繁琐,但一直也没去想想解决的办法. 今天专门花了一上午的时间来去研究. 小生只是刚踏入前端路的小白,对于网上各位大佬的讲解适配理... 查看详情
移动端适配方案(代码片段)
首先，我们需要知道rem和em的基本概念。rem:相对于html根元素的fontsize。em:相对于当前元素的字体大小。rem和em都能够根据屏幕大小做适配。 一、假设现在给出我们一张750px的设计图，我们在设计图上量出200px*200px的div大小，并... 查看详情
移动端适配必须掌握的基本概念和适配方案(代码片段)
随着技术的发展，移动设备越来越流行，并且不同设备间屏幕尺寸和屏幕像素的差异，移动端开发面临着多分辨率适配的问题。基本概念响应式开发本质时针对多种屏幕做适配，在实际开发中，通常情况下时针对主流的设备进行... 查看详情
vue移动端适配方案.md(代码片段)
移动端主要采用rem布局，vue+webpack，通过webpack编译，将css中px自动转成rem或其它单位，这里采用px2rem-loader进行转换，最后引入lib-flexible，实现不同设备不同分辨率的弹性适配。实现步骤第一步：引入lib-flexible#下载lib-flexiblenpmilib-... 查看详情