对于作为一名前端开发人员，除了能够编写出满足需求的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:;//子元素占据容器的宽度

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:; //应用于子元素，规定其顺序 http://t.cn/RUfJCDH，支持一下！

下面有个demo：

 <!DOCTYPE html>

 <html>

 <head>

     <title>弹性布局Flexbox</title>

     <meta charset="utf8" />

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

     <style type="text/css">

     html,body{ padding: ; margin: ;  }

     .flexbox{ display: flex; display: -webkit-flex; justify-content:center; align-items:center; color:#fff;}

     .space-between{ justify-content:space-between; }

     .space-around{ justify-content:space-around; }

     .flexbox > div{ height: 200px; }

     .flex-{ flex:; -webkit-flex:; text-align: center; }

     .flex-{ flex:; -webkit-flex:;text-align: center; }

     .flex-{ flex:; -webkit-flex:;text-align: center; }

     .red{ background: #f05b72; }

     .green{background: #b2d235;}

     .blue{ background: #2a5caa; }

     .mt20{ margin-top: 20px; }

     .flex-row{ flex-direction:row; }

     .flex-row-reverse{ flex-direction:row-reverse; }

     .flex-column{ flex-direction:column; }

     .flex-column-reverse{ flex-direction:column-reverse; }

     .flex-wrap-nowrap{ flex-wrap:nowrap; }

     .flex-wrap-wrap{ flex-wrap:wrap; /*wrap-reverse*/ }

     </style>

 </head>

 <body>

 <div>[flex-direction:row; ]</div>

 <div class="flexbox flex-row">

     <div class="red flex-1">flex-</div>

     <div class="green flex-2">flex-</div>

     <div class="blue flex-3">flex-</div>

 </div>

 <div class="mt20">[flex-direction:row-reverse; ]</div>

 <div class="flexbox flex-row-reverse ">

     <div class="red flex-1">flex-</div>

     <div class="green flex-2">flex-</div>

     <div class="blue flex-3">flex-</div>

 </div>

 <div class="mt20">[flex-direction:column;]</div>

 <div class="flexbox flex-column">

     <div class="red" style="width:100%;">flex-</div>

     <div class="green" style="width:100%;">flex-</div>

     <div class="blue" style="width:100%;">flex-</div>

 </div>

 <div class='mt20'>[flex-direction:column-reverse;]</div>

 <div class="flexbox flex-column-reverse ">

     <div class="red" style="width:100%;">flex-</div>

     <div class="green" style="width:100%;">flex-</div>

     <div class="blue" style="width:100%;">flex-</div>

 </div>

 <div class='mt20'>[flex-wrap:nowrap;]</div>

 <div class="flexbox flex-wrap-nowrap ">

     <div class="red" style="width:600px;">width:600px;</div>

     <div class="green" style="width:800px;">width:800px;</div>

     <div class="blue" style="width:500px">width:500px</div>

 </div>

 <div class='mt20'>[flex-wrap:wrap;]</div>

 <div class="flexbox flex-wrap-wrap ">

     <div class="red" style="width:600px;">width:600px;</div>

     <div class="green" style="width:800px;">width:800px;</div>

     <div class="blue" style="width:500px">width:500px</div>

 </div>

 <div class='mt20'>[justify-content:space-between; ]</div>

 <div class="flexbox mt20 space-between">

     <div class="red" style="width:500px;">width:500px;</div>

     <div class="red" style="width:500px;">width:500px;</div>

 </div>

 <div class='mt20'>[justify-content:space-around; ]</div>

 <div class="flexbox mt20 space-around">

     <div class="red" style="width:500px;">width:500px;</div>

     <div class="red" style="width:500px;">width:500px;</div>

 </div>

 <div class="flexbox mt20">

     <div class="red" style="width:100px;margin-right:20px;">margin-right:20px;</div>

     <div class="green flex-1">flex-</div>

     <div class="blue"style="width:100px;margin-left:20px;">margin-left:20px;</div>

 </div>

 <div class="flexbox mt20">

     <div class="red" style="width:100px;margin-right:20px;">margin-right:20px;</div>

     <div class="green flex-1">flex-</div>

     <div class="blue"style="width:100px;margin-left:20px;">margin-left:20px;</div>

 </div>

 </body>

 </html>

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

/*支持多个版本，旧的flexbox*/

display:-webkit-flex-box;

-webkit-flex-box:;

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:;

    content:'';

    width:%;

    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:; //关键属性，限制行数

}

六、制作小三角形

 .sanjiao:before{  
   content: " ";

   height: ;

   width: ;

   position: absolute;

   pointer-events: none;

   display:inline;

   border:8px solid;

   border-color:  transparent transparent rgb(,,) transparent;
}
七、去掉手持设备点击时出现的透明层 （一般会在头部做格式化）
a,button,input{

        -webkit-tap-highlight-color: rgba(,,,);

        -webkit-tap-highlight-color: transparent; /* For some Androids */

}

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

<meta content="yes" name="apple-mobile-web-app-capable" />

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

<meta content="black" name="apple-mobile-web-app-status-bar-style" />

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

<meta content="telephone=no" name="format-detection" />

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

<meta content="email=no" name="format-detection" />

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

同时，这些移动web的技巧，可以用于制作webAPP、混合APP上面的一些H5应用上！比如说领投羊（公司APP）：

移动web技能总结的更多相关文章

  1. 什么是web前端开发？

    Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及F ...

  2. web前端学习路线（含20个真实web开发项目集合）

    目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...

  3. 1+x 证书 web 前端开发初级对应课程分析

    响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/19 ...

  4. Hybrid APP混合开发的一些经验和总结

    http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...

  5. 如何成为一个javascript高手【转载】

      原文网址: http://www.cnblogs.com/keva/p/how-to-become-a-javascript-badass.html 英文网址:http://www.clientc ...

  6. C# 算法系列一基本数据结构

    一.简介 作为一个程序员,算法是一个永远都绕不过去的话题,虽然在大学里参加过ACM的比赛,没记错的话,浙江赛区倒数第二,后来不知怎么的,就不在Care他了,但是现在后悔了,非常的后悔!!!如果当时好好 ...

  7. Hybrid APP混合开发

    写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~ 1.混合开发概述 Hybrid App主要以JS+Nativ ...

  8. .NET Conf 2022 &ndash; 11 月 8 日至 10 日

    .NET Conf 2022 下周就正式开启了,时间是美国时间的 11月8日至10日..NET Conf 2022是一个免费的,为期三天的, 虚拟开发人员活动提供多种实时会话,其中包括来自社区和 .N ...

  9. .NET WEB程序员需要掌握的技能

    本来这个是我给我们公司入职的新人做一个参考,由于 @张善友 老师在他的微信号转了我的这篇文章<<.Net WEB 程序员需要掌握的技能>>,很多人觉得比较有用,说是看了后知道一 ...

随机推荐

  1. Python subprocess.Popen() error (No such file or directory)

    这个错误很容易引起误解,一般人都会认为是命令执行了,但是命令找不到作为参数对应的文件或者目录.其实还有一层含义,就是这个命令找不到,命令找不到,也会报没有这个文件或者目录的错误. 为什么找不到这个命令 ...

  2. linux下视频转gif

    title: linux下视频转gif date: 2017-11-23 16:55:26 tags: linux categories: linux 安装ffmpeg ffmpeg是一套非常强大的音 ...

  3. ExecuteNonQuery方法、ExecuteScalar方法、ExecuteReader方法的区别

    ----ExecuteNonQuery():执行命令对象的SQL语句,返回一个int类型变量,如果SQL语句是对数据库的记录进行操作(如记录的增加.删除和更新),那么方法将返回操作所影响的记录条数.- ...

  4. SpringMvc HandlerMappings 何时初始化？

    SpringMvc 的转发控制器 DispatcherServlet 执行 initStrategies(),在什么时候初始化 HandlerMappings ? 在容器 AbstractApplic ...

  5. JVM探秘2--详解内存溢出OutOfMemoryError异常

    JVM运行时内存被划分成多个区域,而除了程序计数器之外,其他几个区都会出现OutOfMemoryError异常,主要原因就是对应内存区域的内存不足以再分配内存,一般要么是内存泄漏了要么就是内存参数设置 ...

  6. Poj1979 Red and Black （DFS）

    Red and Black Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 47466   Accepted: 25523 D ...

  7. 常用python的标准库

    1.itsdangerous # 加密签名的数据 2.re # 正则表达式 3.time # 时间模块 4.keyword # 查看关键字5.random # 随机6.uuid

  8. HTML5中 audio标签的样式修改

    由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...

  9. 【题解】Luogu P3287 [SCOI2014]方伯伯的玉米田

    原题传送门 一眼就能看出来这是一道dp题 显而易见每次操作的右端点一定是n,每株玉米被拔高的次数随位置不下降 用f(i,j) 表示以第i 株玉米结尾它被拔高了j 次的最长序列长度. \(f(i,j)= ...

  10. 修改mongodb(带仲裁节点的副本集)各机器端口

    需求:因为端口调整,需要改变副本的备份集 1.查看当前的副本集信息 [root@localhost bin]# ./mongo 192.168.1.134:10001 repltest:PRIMARY ...