移动端概述和hybird模式、响应式布局

移动端：运行在移动设备上的产品

移动设备：手机、平板、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);

响应式布局的解决方案：

    一、流试布局法：

        容器或者盒子的宽度通常都不写固定值，而是使用百分比，相对于视口区域的百分比

        其他的样式：字体、高度、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='网址'