移动端：运行在移动设备上的产品
移动设备：手机、平板、touch...
我们以后做的产品大部分都只需要适配IOS系统和安卓系统即可
响应式布局：在不同的设备上都能给予客户最好的操作体验
产品：
APP：手机应用，目前市面上流行的APP产品大部分都是原生APP开发者做的，但是目前市场上正在趋于使用JS来开发原生的APP：react native、phoneGap...
H5：HTML页面，都是运行在浏览器中的(PC端浏览器或者移动端的浏览器)
以后工作中我们这一类前端开发工程师主要做的产品形态都有那些：
PC和移动端公用一套项目的：做一个HTML页面需要在pc端访问，也需要在移动端访问
PC端和移动端用的是不同的项目：例如，京东、淘宝....pc端不需要做响应式，移动端需要做响应式
在移动端我们开发出来的HTML页面(H5)运行的环境：
移动端的浏览器：UC、QQ、百度...
原生APP(Native App)的webView中：hybride模式 例如：在微信中打开一个H5页面，我们的H5其实就是一个运行在微信的webView中，
hyBride模式：http://old.zhufengpeixun.cn/qianduanjishuziliao/mobileDevelopment/2017-01-09/677.html // 把握么开发的H5页面嵌入到Native APP的webView中运行(所谓的webView你可以简单的理解为一个浏览器，也是webkit内核)
响应式布局：
搭建一个H5页面，我们需要在HEAD中添加一个META标签:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
viewport:视口 Width=device-width 设置视口的宽度等于设备的宽度，如果不设置的话，默认是扣的宽度为980px，通俗的讲：我们这个操作其实就是告诉当前的浏览器按照多少宽度来渲染页面，换句话说，就是展示当前页面的区域一共有多宽(浏览器的宽度)
user-scalable=no：禁止用户手动缩放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0：设置屏幕最大、最小、默认的缩放比例
高清屏：苹果手机是2倍高清屏幕的，也就是我们在手机上看到的那张100*100，其实苹果手机是按照200*200的尺寸给我们进行渲染的，这样的话，如果我们真实图片本身才100*100，最后呈现出来的就是被拉伸后变模糊的效果
-> 苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以
DPI适配思想：
我们在做页面的时候，最好每一张素材图片都准备两套或者三套，一倍图、二倍图、三倍图
媒体查询：@media
媒体设备：all 所有设备，screen 所有屏幕设备(pc+移动端) print打印机...
媒体条件：指定在什么样的条件下执行对应的样式
讲解meta的文章：http://old.zhufengpeixun.cn/qianduanjishuziliao/mobileDevelopment/2016-07-02/480.html
JS动态设置viewport：
var meta = document.createElement("meta");
meta.name="viewport";
meta.content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0";
documeng.head.appendChild(meta);
响应式布局的解决方案：
1、流试布局法：
容器或者盒子的宽度一般都不写固定值，而是使用百分比，相对于视口区域的百分比
其余的样式：字体、高度、margin、padding等等都按照实际尺寸来设置
对于有些尺寸下，我们设置的固定值看起来不是特别的好看的话，使用media来进行调整
特殊情况下：设计的是设计稿是640px，我们的素材图也是640px的，这样的话在ipone6/6 plus战士的时候，图片不够大，对于这种情况我们需要单独找设计师要一张更大的图
@media all and (-webkit-min-device-pixel-ratio:2) and (min-width:320px){ }
@media all and (min-width:641px){ }
移动端之meta初设
<meta name="format-detaction" content="telephone=no" /> 禁止把数字自动识别为电话号码
如果当禁止自动识别电话号后，还想让某一个数字变为电话号，那就用a标签<a href="tel:234567"></a>//识别为电话 <a href="email:1234567"></a>识别为邮箱 <a href="sms:1234567"></a>自动发短信
REM响应式布局：
—>我们做的H5页面只在移动端访问(REM不兼容低版本的浏览器)
REM：当前页面中元素的REM单位的样式值都是针对HTML元素的fontSize的值动态计算的
第一步：给样式中的HTML设置一个fontSize的值， 设置多少就等于1rem；比如设置的为100px，就100px = 1rem；
第二步：写样式的时候，完全按照设计稿的尺寸来写样式，不用管任何的转换，设计稿给的宽度、高度、字体大小、margin、padding的值是多少我们就写多少，但是我们在写样式值烦人时候，需要把得到的像素值除以100，计算出对应的rem的值，我们设定的也就是rem的值
值得注意的是：真实项目中外层盒子的宽度，我们一般不写固定值，沿用流式布局法的方式进行布局，使用百分比的方式布局
第三步：根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的fontSize的值
设计稿：640 600*300 fontSize=100 6rem*3rem
手机：320 300*150 fontSize=50
手机：375 （375/640）*100
根据当前屏幕宽度和设计稿宽度的比例，动态计算一下当前宽度下的fontSize值应该是多少，如果fontSize的值改变了，之前设置的所有的rem单位的值自动会跟着放大和缩小
京东解决方案：
~function(){
var desw = 640,
winw = document.documentElement.clientWidth,
ratio = winw/desw;
//如果当前屏幕的宽度已经大于640了，为了保障图片的良好展示，我们就不在继续变大了，以设计稿的宽度为最后的宽度，剩余的部分留空白显示在中间
var omain = document.getElementById("main")
if(winw>desw ){
omian.style.width = desw + "px";
omain.style.margin = "0 auto";
return;
}
document.documentElement.style.fontSize = ratio * 100 + "px";
}
有些时候需要检测一下当前的浏览器是pc端还是移动端的
如果当前的浏览器是pc端，但是我们访问的页面是移动端的页面，我们让其跳转到pc端的页面
如果当前的浏览器是移动端的，但是我们访问的页面是pc端的页面，我们让其页面跳转到移动端的页面
跳转：window.location.href='网址'