关键词：
探究移动端开发
什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。 并且现在手机上的app有一部分也是h5页面，对于Android系统的手机，我们打开手机上的开发者选项，开启显示布局边界，如果发现页面有布局则是native，否则是h5页面。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。
推荐文章：官方文档
第一部分：基本概念
物理像素：这个就是在屏幕上可以控制的最小显示单位，比如显示颜色的最小单位。
css像素为逻辑像素，手机上的每一个小格为物理像素。
css像素: 就是我们在设计网页时在css中使用的像素，比如：border: 1px black solid;这里的1px即为css像素，实际上这种像素就是下面我们要介绍的设备独立像素。
设备独立像素（density-independent pixel）:设备独立像素又成为密度无关像素，它独立于设备，比如说是css像素，他们可以转化为物理像素。设备独立像素也称与设备无关的像素（device-independent pixel,简称DIPs)，更简单的理解即为：独立于设备的用于逻辑上衡量像素的单位。
设备像素比：即物理像素/设备独立像素=设备像素比（device pixel ratio）,设备像素比的英文即dpr,我们在JavaScript中可以通过window.devicePixelRatio获取到当前设备的dpr。那么设备像素比是怎么一回事呢？此问题的关键要归结为：css中的1px并不等于设备中的1px。也就是说：物理像素和设备独立像素是不一样的。在早先的移动设备中，比如iPhone3，它的分辨率是320X480（此分辨率很低），一个css像素（设备独立像素）确实等于一个屏幕物理像素，此时dpr为1，但是随着科技的发展，移动设备的像素密度（下面会介绍）越来越高，从iPhone4开始，苹果公司便推出了Retina屏，在屏幕尺寸没有变化的情况下分辨率却大大提高了，成了640X960，这意味着：同样大小的屏幕上，物理像素多了一倍，而css像素没有变，于是一个css像素是等于两个物理像素的，此时dpr为2。现在标准的PPI已经很少见了，大多是Retina视网膜设备，比如，iPhone5s的设备像素比为2，iPhone6s的设备像素比为3。（注：Retina视网膜屏幕即PPI值超过300的超高密度屏幕，只是苹果公司给它起了一个高大上的名字而已）。大家可以在 http://DevicePixelRatio.com这个网站中可以看到更多设备的dpr。下图即说明了物理像素和css像素之间的关系：
像素密度(PPI)：即pixel per inch,由英文可知，PPI即为每英寸所具有的像素点（物理像素），PPI的值越高，那么在单位英寸中参与显示画面的像素越多，于是画质越好，实际上PPI就是像素密度（pixel density）。那么PPI是什么计算出来的呢？看下面的公式：
比如，iPhone6 Plus的像素分辨率为1920X1080，屏幕尺寸为5.5英寸（对角线），就可以得到PPI约等于401.
pt:pt是什么呢？它和px的区别又在哪里呢？实际上px是pixel，即像素；而pt是point，是印刷行业的常用单位，等于1/72英寸。主要区别在于：px是一个点，它不是自然界的长度单位，这个点可以画的很大，也可以画的很小，如果点很小，那么就说明分辨率高，否则分辨度低，它是一个相对的长度单位。而pt是专用的印刷单位”磅“，大小为1/72英寸，总之就是说它是一个自然界中的标准的长度单位，也成为”绝对长度“。
第二部分：移动端的适配方案
那么，什么是适配呢？ 在做pc端的时候，只要按照设计图的尺寸进行设计就好，但是在做移动端页面的时候，设计师黑了，一份宽度为640px的设计图，这时候把这份设计图实现在各个手机上的过程就是适配。
如今比较流行的便是利用rem布局。即依照某特定宽度设置rem值页面中任何需要弹性适配的元素，尺寸均换算为rem进行布局。重点：当页面渲染时，根据页面的有效宽度进行计算，以调整rem的大小，这时页面中利用rem设置大小的元素就可以同时缩放了（动态性），以此达到适配的效果。
那么什么是rem呢？rem值即在样式中设置的html｛font-size:20px;｝,其中的20px即为rem值，rem的全称为font size of root element，即根元素html的字体大小。简单的来说，它是一个相对单位，说起rem，大家一定会想起em单位，em（font size fo the element）是值相对于父元素的字体大小的单位。em和rem之间很相似，只是在计算的规则来说一个相对于根元素一个相对于父元素。并且在em的过程中，由于复杂的嵌套关系，很容易导致混乱，所以使用rem是一个不错的选择。
比如当设计师给了我们一份640px的设计稿时：
我们设置了rem为1px,这样，在id为square的div中设置宽度为20rem即为20px，高度同样是20px，但是如果需要应用的不是640px宽度的屏幕，而是1280px宽度的屏幕，这时只要font-size修改为2px,那么高度宽度就会成为40px了。又比如下面这张图片：
如果我们拿到的640px的设计稿（蓝色背景），当运用于640px的页面上时，屏幕对比比例为1，这时设置rem为20px,对于页面中的一个元素，设置宽度为10rem，那么元素宽度实际上就是20X10px即200px,但是，如果这个页面的使用屏幕不是640呢，而是放在更小的如384px的屏幕上呢？这时，如果不做任何改变，那么页面一定是不能完整的显示的，这时，因为380/640=0.6，即屏幕的宽度为原来的0.6倍（一般不需要考虑高度），那么只需要将rem修改为20X0.6=12px，这时元素的宽度10rem即10X12px就成了120px了。但是，由于我们得到的设计稿是使用px进行设计的，所以，如果我们要使用rem布局，就需要每次使用这个px值除以rem得到rem的倍数，很有可能还是个小数，所以这样是非常麻烦的，但是我们可以通过cssrem插件（点击即可安装）来解决这个问题，即当我们输入px单位时，该插件会自动转化为相应的rem值。
这个问题解决了，可是，怎么才能通过JavaScript动态地修改rem？
淘宝团队的flexible.js是一个很好的解决方法.那什么是flexible.js呢?
- 手机淘宝2014年开始推行的flexible设计，它是responsive的低端形态和基础。
- 手机淘宝使用JS动态的写meta标签，手机淘宝的flexible方案是综合运用rem和px两种单位+js设置scale和html字体。
使用方法：
一.我们可以将它在gitbub上下载下来，然后再<head>标签中引用这个js文件，如下所示：
二.另外一种将该文件添加到html中的方法是直接加载阿里CDN的文件，方法如下：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
无论使用哪一种方法，值得注意的是：
1.为了适配的更快，并且因为我们需要使用这个js文件动态的修改meta元素内容，如果最后加载，那么页面将会发现一个“突变”，影响用户体验，因此这个文件一定要在head中就引用，而不能在</body>之前引用。
2.在使用lib-flexible时，通常不需要写：<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>因为在这个js文件中都已经自动地设置了，它会自动处理：在执行这个js之后，会在<html>元素上增加一个data-dpr属性以及一个font-size的值，比如30px；这样一来，页面中的所有元素，都可以通过rem单位来设置，他们会根据html元素的font-size值做出相应的计算，从而实现屏幕的适配效果。在flexible中因为在Flexible中，只对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1。
那么说了这么多flexible的实质是什么呢？实际上，flexible实际上就是通过JS来动态改写meta标签。如下：
- 动态改写<meta>标签。
- 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值。
- 给<html>元素添加font-size属性，并且动态改写font-size的值。
但是，编写css时，除了font-size之外，其他元素都要按照设计稿的尺寸转化为rem单位的值。显然，我们在iPone3G和iPhone4的Retina屏下面看到的文本号是相同的，也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏幕手机上看到更多文本，而且现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px,所以我们不希望出现13px和15px这样的奇葩尺寸。这样，rem并不适合用到段落文本上，所以在flexible整个适配方案中，考虑文本还是使用px作为单位，只不过要用到[data-dpr]属性来区分不同dpr下的文本字号的大小。
即dpr为1（物理像素/设备独立像素=1）时字体大小为12px，在dpr为2（物理像素/设备独立像素=2）时，如果还是用12px的字体大小，那么该字体明显会很小，所以需要设置为24px，对于dpr为3时同理。
注意：[data-dpr="2"] div
在[data-dpr]和div之间一定要有空格，否则没法实现功能。
第三部分：常用API
[Number] lib.flexible.dpr
当前页面的dpr值
[Number] lib.flexible.rem
当前页面的rem基准值
[Number|String] lib.flexible.rem2px([Number|String digital])
把rem转换为px
[Number|String] lib.flexible.px2rem([Number|String digital])
把px转换为rem
lib.flexible.refreshRem()
刷新当前页面的rem基准值
第四部分：实例
下面这篇文章讲的很好，大家可以作为参考。
微网站—使用flexible.js实现移动端设备适配
官方文档：https://github.com/amfe/lib-flexible
更多相关文章：
http://isux.tencent.com/web-app-rem.html
http://www.cnblogs.com/2050/p/3877280.html
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html （推荐）
http://eux.eeyes.net/blog/article/582ecb1522c84bda4a814a88（推荐）（查看flexible.js的源码）
http://www.jb51.net/css/29331.html
http://caibaojian.com/mobile-responsive-example.html
http://caibaojian.com/mobile-knowledge.html （移动前端知识总结）
rust移动开发与跨平台模式探究(代码片段)
，即ARM64Androidarm-linux-androideabi，即ARMv7Androidarmv7-linux-androideabi，即ARMv7aAndroidi686-linux-android，即32-bitx86Androidthumbv7neon-linux-androideabi，即Thumb2-modeARMv7aAndroidwithNEONx86_64-linux-a 查看详情
jeecg移动开发能力表单移动开发能力，提供多套表单模板（移动端pc端），支持自定义
[一]、请假表单风格（单表） 【1】移动端风格【2】PC端风格一 【3】PC端风格二 [二]、订单管理表单风格（一对多） 【1】移动端风格【2】PC端风格一 【3】PC端风格二 查看详情
探究负边距（negativemargin）原理
W3C规范在介绍margin时有这样一句话：Negativevaluesformarginpropertiesareallowed,buttheremaybeimplementation-specificlimits.于是，聪明的开发者们就发现了很多负边距的巧妙用法。比如，他可以增加一个不定宽块框的宽度，他可以让一个框向上移动... 查看详情
移动端开发的准备
移动端开发移动端最大问题,不能解决完全自适问题js框架的安装ui库的引入先准备转码器插件Babel移动端自适应的插件lib-flexible，postcss-plugin-px2rem 查看详情
移动端web开发基础知识(代码片段)
文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图移动端Web开发移动Web开发的两种主流方案，一种是单独制作移动端页面，另一种是制作响应式页面移动端页面：单独制作移动... 查看详情
认识移动端开发
认识移动端开发 什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。第一部分：基本概念 物理像素... 查看详情
10-移动端开发教程-移动端事件(代码片段)
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。1.PC端事件在移动端的兼容问题1.1click事件的200~300ms延迟问题由于移动端默认的布局视口宽度是980像素，所以... 查看详情
vue开发移动端
参考技术Avue开发移动端项目依赖：一：移动端布局适配： amfe-flexible/index：安装依赖，mian.js导入 import'amfe-flexible/index'//移动端适配 postcss-pxtorem：vue.config.js配置： meta标签设置二：组件... 查看详情
移动端开发框架入门
移动端框架和传统框架的区别：移动框架在于快速开发一下项目，而手机端和pc端的适配主要是靠bootstrap来做的 zepto和mobile比较适合，在移动端有很多触摸事件，而在pc端则是很多的点击事件这些另外针对移动端的设备，比如... 查看详情
移动端开发
移动端开发：首先设备大致分为4种：手机端：<768pxipad端：769-991pxpc端：992-1200px超大屏幕：>1200px响应式布局：EthanMarcotte在2010年5月份提出的概念，意思是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这... 查看详情
移动端开发系列——像素与viewport(代码片段)
目录移动端开发的基本观点像素基础知识viewport原理解析弹性布局响应式设计1rem的运用移动端的事件zepto库的使用移动端开发的基本观点移动端开发的意义移动端用户使用量->市场需求->市场供给->公司需要移动端开发人才-... 查看详情
力软敏捷开发框源码移动端开发环境安装
力软移动端开发环境安装 目录力软移动端开发环境安装.......................................................1一、前言.................................................................1二、使用HbuilderX打开手机端项目..................................... 查看详情
移动端开发
#移动端开发###1.1px问题如何解决####①伪类+transform（比较完美）>原理是把原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位#####单条border```.hairlinesli{... 查看详情
移动端开发常见的坑
一、移动端开发通用坑1、click300ms延迟？讲道理，现在开发移动端基本是不会有这么一个问题的。但作为移动端以前的经典坑，我这里也拿出来说上一说吧。移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是... 查看详情
前端学习---移动端vue开发踩坑记
前言：大概两个月前投身于一个项目中去，项目是一个移动端的项目，所选用的框架是时下比较流行的vue。这篇文章也是针对这个项目和以前自己学习时的一些总结，包括一些通用的移动端开发要注意的事项、vue开发遇到的一些... 查看详情
前端移动端开发之rem(代码片段)
...言作为一名前端工程师，我们不仅要会PC端开发，还要会移动端开发，而且现在移动端占据主要流量，所以掌握移动端开发的技能更是必须的。 那么进行移动端的开发，什么是必须，我们想要的效果是什么？自适应。对，我... 查看详情
为啥vue适合移动端开发呢？
参考技术Avue适合移动端主要是因为可以创建单页应用，避免网页刷新带来的白屏问题。除了vue之外，angular和react也适用于移动端。 查看详情
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。1.常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置... 查看详情