转载

移动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标签，

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

width：设置布局viewport的特定值,一般都是使用device-width

initial-scale：初始化页面的缩放

minimum-scale：最少缩放

maximum-scale：最大缩放

user-scalable：用户是否缩放

接下来介绍几种布局模式呢，首先是弹性布局Flexbox，下面介绍一些属性

display:flex; //声明父元素为弹性盒子  flex:1;//子元素占据容器的宽度  flex-direction: row|row-reverse|column|column-reverse //规定子元素是行显示还是列显示  flex-wrap: nowrap|wrap|wrap-reverse //nowrap强制子元素不溢出，在同一行显示，wrap允许充满溢出至下一行  flex-flow:[flex-direction] [flex-wrap] //[flex-direction]和[flex-wrap]的结合 justify-content: flex-start|flex-end|center|space-between|space-around  //写在父元素，设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，主要是space-between和space-around，一个是两边对齐，一个间隔排列  align-items:flex-start|flex-end|center|auto|baseline|stretch  //写在父元素，设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。，stretch是伸缩充满整个父元素的高度  align-self:flex-start|flex-end|center|auto|baseline|stretch  //应用于子元素，设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。   order:1; //应用于子元素，规定其顺序 http://t.cn/RUfJCDH，支持一下！

下面有个demo：

1 <!DOCTYPE html>  2 <html>  3 <head>  4     <title>弹性布局Flexbox</title>  5     <meta charset="utf8" />  6     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">  7     <style type="text/css">  8     html,body{ padding: 0; margin: 0;  }  9     .flexbox{ display: flex; display: -webkit-flex; justify-content:center; align-items:center; color:#fff;} 10     .space-between{ justify-content:space-between; } 11     .space-around{ justify-content:space-around; } 12     .flexbox > div{ height: 200px; } 13     .flex-1{ flex:1; -webkit-flex:1; text-align: center; } 14     .flex-2{ flex:2; -webkit-flex:2;text-align: center; } 15     .flex-3{ flex:3; -webkit-flex:3;text-align: center; } 16     .red{ background: #f05b72; } 17     .green{background: #b2d235;} 18     .blue{ background: #2a5caa; } 19     .mt20{ margin-top: 20px; } 20     .flex-row{ flex-direction:row; } 21     .flex-row-reverse{ flex-direction:row-reverse; } 22     .flex-column{ flex-direction:column; } 23     .flex-column-reverse{ flex-direction:column-reverse; } 24     .flex-wrap-nowrap{ flex-wrap:nowrap; } 25     .flex-wrap-wrap{ flex-wrap:wrap; /*wrap-reverse*/ } 26     </style> 27 </head> 28 <body> 29 <div>[flex-direction:row; ]</div> 30 <div class="flexbox flex-row"> 31     <div class="red flex-1">flex-1</div> 32     <div class="green flex-2">flex-2</div> 33     <div class="blue flex-3">flex-3</div> 34 </div> 35 <div class="mt20">[flex-direction:row-reverse; ]</div> 36 <div class="flexbox flex-row-reverse "> 37     <div class="red flex-1">flex-1</div> 38     <div class="green flex-2">flex-2</div> 39     <div class="blue flex-3">flex-3</div> 40 </div> 41 <div class="mt20">[flex-direction:column;]</div> 42 <div class="flexbox flex-column"> 43     <div class="red" style="width:100%;">flex-1</div> 44     <div class="green" style="width:100%;">flex-2</div> 45     <div class="blue" style="width:100%;">flex-3</div> 46 </div> 47 <div class='mt20'>[flex-direction:column-reverse;]</div> 48 <div class="flexbox flex-column-reverse "> 49     <div class="red" style="width:100%;">flex-1</div> 50     <div class="green" style="width:100%;">flex-2</div> 51     <div class="blue" style="width:100%;">flex-3</div> 52 </div> 53 <div class='mt20'>[flex-wrap:nowrap;]</div> 54 <div class="flexbox flex-wrap-nowrap "> 55     <div class="red" style="width:600px;">width:600px;</div> 56     <div class="green" style="width:800px;">width:800px;</div> 57     <div class="blue" style="width:500px">width:500px</div> 58 </div> 59  60 <div class='mt20'>[flex-wrap:wrap;]</div> 61 <div class="flexbox flex-wrap-wrap "> 62     <div class="red" style="width:600px;">width:600px;</div> 63     <div class="green" style="width:800px;">width:800px;</div> 64     <div class="blue" style="width:500px">width:500px</div> 65 </div> 66 <div class='mt20'>[justify-content:space-between; ]</div> 67 <div class="flexbox mt20 space-between"> 68     <div class="red" style="width:500px;">width:500px;</div> 69     <div class="red" style="width:500px;">width:500px;</div> 70 </div> 71 <div class='mt20'>[justify-content:space-around; ]</div> 72 <div class="flexbox mt20 space-around"> 73     <div class="red" style="width:500px;">width:500px;</div> 74     <div class="red" style="width:500px;">width:500px;</div> 75 </div> 76 <div class="flexbox mt20"> 77     <div class="red" style="width:100px;margin-right:20px;">margin-right:20px;</div> 78     <div class="green flex-1">flex-1</div> 79     <div class="blue"style="width:100px;margin-left:20px;">margin-left:20px;</div> 80 </div> 81 <div class="flexbox mt20"> 82     <div class="red" style="width:100px;margin-right:20px;">margin-right:20px;</div> 83     <div class="green flex-1">flex-1</div> 84     <div class="blue"style="width:100px;margin-left:20px;">margin-left:20px;</div> 85 </div> 86 </body> 87 </html>  View Code

当然对于display:flex;，低版本的一些浏览器是不能支持的，于是可以使用比较旧版本的弹性盒子，其他的属性都是相对应的，我们也必须去了解一下盒子模型display:box;，这里不讲了，如下：

/*支持多个版本，旧的flexbox*/ display:-webkit-flex-box; -webkit-flex-box:1; box-pack:center; box-align:center;

现在介绍一些移动web特别样式处理，也是从别的地方学习到的，记录一下，

一、在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该使用物理像素单位去渲染，即是100*100，应该使用100dp＊100dp，如：

width:(w_value/dpr)px; //50px

height:(h_value/dpr)px; //50px

二、一像素边框

原因：在retina屏幕下，1px＝2dp;(iphone5)，解决办法（给其加个伪类）：

div:before{  position:absolute;  top:-1px;  left:0;  content:'';  width:100%;  height:1px;  border:1px #eee solid;  -webkit-transform:scaleY(0.5); }

三、相对单位rem

em：是根据父节点的font－size为相对单位

rem：是根据html的font－size为相对单位

rem＝screen.width/20;

四、单行文本溢出

.inaline{     overflow:hidden;     text-overflow:ellipsis;     white-space:nowrap; }

五、多行文本溢出

.intwoline{   display:-webkit-box!important;  overflow:hidden;  text-overflow:ellipsis;  word-break:break-all;  -webkit-box-orient:vertical;  -webkit-line-clamp:2; //关键属性，限制行数 }

六、制作小三角形

.sanjiao:before{    content: " ";  height: 0;  width: 0;  position: absolute;  pointer-events: none;  display:inline;  border:8px solid;   border-color:  transparent transparent rgb(77,74,69) transparent; }

七、去掉手持设备点击时出现的透明层（一般会在头部做格式化）

a,button,input{         -webkit-tap-highlight-color: rgba(0,0,0,0);         -webkit-tap-highlight-color: transparent; /* For some Androids */ }

接下来摘录一些关于移动web的<meta>标签，

iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

告诉设备忽略将页面中的数字识别为电话号码；

Android中禁止自动识别页面中的邮件地址，iOS中不会自动识别邮件地址

正文到此结束

所属分类：编程技术

本文标签： ip HTML ACE mail App Word web Apple http 需求总结移动设备开发 CSS 缩小 tar value Android
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

移动web技能总结

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流