前端之家收集整理的这篇文章主要介绍了
移动web技能总结，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
对于作为一名前端开发人员，除了能够编写出满足需求的PC端页面之外，同时也是需要懂得怎么去制作移动web页面，毕竟使用移动设备来操作任何处理称为新时代的趋势，所以学好制作一个移动web时必须滴。于是通过学习和总结，将自己学到的一些技能总结一下！
首先是移动像素，对于px应该都不会觉得陌生，这是css针对浏览器设计的一种逻辑像素，是浏览器使用的抽象单位！dp、pt，江湖人称设备无关像素，也就是设备的物理像素！而dpr，设备像素的缩放比，是px和dp联系的桥梁！有怎么一个计算公式1px＝dpr*dpr*dp。
iphone5的规格是640*1136，其实是这样的640dp*1136dp，通过换算等价于320px*568px，那么它们的dpr便是2，通过上面的计算公式，不难得出1px的逻辑像素就会等于4dp的物理单位像素。
还有怎么一个概念，ppi指的是屏幕每英寸的像素数量，即单位英寸内的像素密度。辣么，ppi越高的话，单位dp量就会更多，那么图像就会更清晰了！
比如iphone5，大小4英寸，那么其ppi则是这样计算的：√(1136*1136+640*640)/4，等于326ppi。注意现在我们的手机大多数都是retina高清屏，所以这样我们的dpr一般都是大于等于2。
而那么一个pc页面在移动设备上的展示，默认会是以980px（ios标准，安卓各式各样）的viewport缩小后完全显示在移动浏览器上，那往往又不是我们想要的那种效果，那么这个时候需要修改viewport，使用Meta标签，
width：设置布局viewport的特定值,一般都是使用device-width
initial-scale：初始化页面的缩放
minimum-scale：最少缩放
maximum-scale：最大缩放
user-scalable：用户是否缩放
接下来介绍几种布局模式呢，首先是弹性布局FlexBox，下面介绍一些属性
display:flex;
;
-direction: row|row-reverse|column|column-reverse 显示还是列显示
-wrap: nowrap|wrap|wrap-reverse 显示，wrap允许充满溢出至下一行
-flow:[flex-direction] [flex-wrap]
justify-content: flex-start|flex-end|center|space-between|space-around
-items:flex-start|flex-end|center|auto|baseline|stretch
-self:flex-start|flex-end|center|auto|baseline|stretch
order:<span style="color: #800080;">1; <span style="color: #008000;">//<span style="color: #008000;">应用于子元素，规定其顺序 <a href="http://t.cn/RUfJCDH" target="_blank">http://t.cn/RUfJCDH，支持一下！
下面有个demo：
弹性布局Flex<a href="/tag/Box/" target="_blank" class="keywords">Box</a>
<Meta charset= />
<Meta name= content=>
[flex-direction:row; ]
=
Box flex-row>
=>flex-
=>flex-
=>flex-
=>[flex-direction:row-reverse; ]
=
Box flex-row-reverse >
=>flex-
=>flex-
=>flex-
=>[flex-direction:column;]
=
Box flex-column>
= style=>flex-
= style=>flex-
= style=>flex-
=>[flex-direction:column-reverse;]
=
Box flex-column-reverse >
= style=>flex-
= style=>flex-
= style=>flex-
=>[flex-wrap:nowrap;]
=
Box flex-wrap-nowrap >
= style=>width:600px;
= style=>width:800px;
= style=>width:500px
=>[flex-wrap:wrap;]
=
Box flex-wrap-wrap >
= style=>width:600px;
= style=>width:800px;
= style=>width:500px
=>[justify-content:space-between; ]
=
Box mt20 space-between>
= style=>width:500px;
= style=>width:500px;
=>[justify-content:space-around; ]
=
Box mt20 space-around>
= style=>width:500px;
= style=>width:500px;
=
Box mt20>
= style=>margin-right:20px;
=>flex-
=style=>margin-left:20px;
=
Box mt20>
= style=>margin-right:20px;
=>flex-
=style=>margin-left:20px;
