移动端前端开发1.0

首先呢，前端负责的移动端开发说的明白点就是手机端的网页，用的也是html,css,js相对于原生app的优势呢也就是通用，凡是设备有浏览器就能访问，不用安卓和苹果各开发一套，更节省人力。

移动端适配

1.从时间成本来说，移动端的开发最耗时的是尺寸即分辨率，为了解决分辨率问题，我们要先理清几个关键性概念

• 物理像素（设备像素）
  物理像素即设备像素是一个电子设备出厂即确定不会变的单位，准确来说，我们所说的像素即像素点的数量，相同的大小范围，像素点越多就越清晰，还不理解这一层的同学可以参考银行的滚动字幕
  
  这里的每一个亮点就是一个像素点（物理）；
  而我们对比iphone6的设备像素是1334 * 750像素，可以理解为屏幕上一行有750个像素点，一列 有1334个像素点；补充一点物理像素的单位是pt不是px
  举例 1334 * 750像素实际应该是1334pt*750pt
  

• 逻辑像素 即css像素
  css像素也就是我们平常用的px，而css像素是相对的，不像上述物理像素是绝对的不会改变的，css像素是相对于物理像素的，像pc端，默认设置css像素 / 物理像素 = 1 / 1；所以平常使用时觉得1px就是物理上的1pt感觉没什么不同，导致很多人混淆两者，感兴趣的朋友可以测试一下用css给某个div加上固定的height，然后用浏览器的放大功能，会发现无论div看起来被放大了很多倍但是实际上css像素还是当初设置的值，改变的不过是css像素 / 物理像素的比值，来形成放大的视觉效果。
  放大一倍之后
  

• 屏幕尺寸
  屏幕尺寸的意思是屏幕斜边的长，有计算公式可寻
  屏幕尺寸单位英寸（inch) = 斜边上的像素点数 / 像素密度
  斜边上像素点数可以由勾股定理 俩直角边平方和的开方所得，像素密度和物理像素一样，出厂即定，从字面意思即可理解，像素密度，即像素密集程度，像素密度越高，屏幕越清晰，像素密度的定义为一英寸面积内的像素点数，从上面公式可得，在屏幕尺寸保持不变的情况下，像素密度变两倍，斜边上像素点数就得翻两倍，再结合勾股定理，每条直角边的像素点数就得翻两倍，总的单位面积的像素点数就翻了4倍，所以可得公式像素密度翻n倍，像素数量翻 n*n倍。

• 像素比DPR
  即物理像素 / css像素 ，也可以说是一个css像素占多少个物理像素，可以由window.devicePixelRatio获得，pc默认是1,作用是通过更改像素比可以让高清屏和普通屏上展示的图像展示的一样大

• viewport
  viewport的作用就是html的css像素值，就是视口的大小，移动端不设置的话默认viewport的width为980px;
  拿iphone6举例DPR就是0.76
  这会导致pc端显示正常的页面在移动端变小，所以为了移动端显示正常要设置好设备对应的viewport值

   window.innerWidth //980

<meta name="viewport" content="width=device-width,initial-scale=1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

理解viewport的作用只要了解viewport的宽高相当于html的宽高，而决定viewport的宽高有两种算法，一是width=device-width,viewport的宽高和设备的css像素相等；另一个是initial-scale=1 通过设置缩放比，使用公式viewport宽度 = css像素 / 缩放比；同时设置两者的时候，取大的，当然额外提示，缩放比设置后是缩放整个html

width=device-width 是指viewport的宽等于设备的css像素宽度，initial-scale=1 即缩放比 = css像素宽度 / viewport宽度， 而两种计算viewport的方法中css像素宽度都是物理像素 / DPR算出来的，只要DPR不变css像素就不变，所以viewport的大小取决于缩放比的设置。

移动端的一些样式重置

     body{
            font-family: helvetica;
            /* 移动端字体没有微软雅黑的，要得自定义字体还得下字体包 */
            margin:0px;
            -webkit-user-select:none;
            /* 禁止用户选中文字，安卓无效 */
            -webkit-touch-callout:none;
            /* 禁止常按弹出菜单 */
            -webkit-text-size-adjust:100%;
            /* 手机切换横竖屏的时候字体大小 */
        }
        input,a,button{
            -webkit-tap-highlight-color:rgba(0,0, 0, 0)
            /* input,a,button这几个标签被点击时的边框 */
        }
        input,button{
            -webkit-appearance:none;
            /* input和button都有一个背景 */
            border-radius:0px;
            /* 去边框圆角ios */
        }
        div{
            width:365px;
            height:100px;
            background-color:#f40;
            border:5px solid black;
        }
        input::-webkit-input-placeholder{
            color:#000;
            /* placeholder的样式修改 */
        }
        input:focus::-webkit-input-placeholder{
            color:#f40;
            /* placeholder点击之后的样式修改 */
        }

百分比布局

无非就是设置宽高的时候使用50%之类的，这个没什么好说的，但是一般使用来说不会单独使用，多数和其他布局一块使用

viewport缩放适配

        (function(){
            let css_px = window.innerWidth;
            let target_px = 375;
            let value = css_px / target_px;
            let view = document.getElementById("view");
            view.content = "initial-scale="+ value +",initial-scale="+ value +",minimum-scale="+ value +"maximum-scale="+ value +"user-scalable=no";
        })()
        // 通过一开始的时候设置缩放值为1，
        // 通过当前的html页面的宽度为设备的css像素宽度，
        // 得到设备的css像素宽度之后除目标的viewport值得出缩放比，
        // 然后再更改缩放比，使页面缩放成目标页面的大小
        // 缺点是页面大小不变，就算是ipad页面也和iphone6的展示大小一样

viewport适配的好处是这样就只需将页面的元素按照iphone6的页面去设置就行了，缺点也很明显，所有设备的页面都被设置成iphone6那么大