对于作为一名前端开发人员，除了能够编写出满足需求的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. 四、UI开发之核心基础——约束（实用）

    概述 本节将会介绍最常用的几种约束,基本可以满足90%以上的UI布局要求. 先附上一份其他优秀博客https://blog.csdn.net/companion_1314/article/detail ...

  2. std::bind学习

    std::bind bind是对C++98标准中函数适配器bind1st/bind2nd的泛化和增强,可以适配任意的可调用对象,包括函数指针.函数引用.成员函数指针和函数对象. bind接受的第一个参 ...

  3. JS关键字和保留字汇总(小记)

    ECMA-262 描述了一组具有特定用途的关键字.这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等.按照规则,关键字也是语言保留的,不能用作标识符.以下就是ECMAScript的全部关 ...

  4. Python3.0以上版本在对比图片相似中的应用

    首先声明一下,代码是从网上找到的,只是本人作以简单的修改. 请大家尊重原创. 我本地用到的是 Python 3.4   以及 Pillow (4.0.0)  第三方包. 方法一. #!/usr/bin ...

  5. sublime开启vim模式

    sublime自带vim模式Vintage,只是默认是ignore状态,因此如果按Esc键没有进入vim模式,只需要按ctrl+shift+P进入命令模式,键入Enable package,输入Vim ...

  6. Solution about MB STAR C4, MB STAR C5 Update and can not test vehicles problems

    Solution about MB Star C4, MB Star C5 Update and can not test vehicles problems 1. Make sure your co ...

  7. 【js】关于闭包、let、var的一个考题

    题目: html: body中有2个div 遍历,给每个div添加点击事件,输出值. js: var声明: 效果: 点击每个div后都打印2. 用户点击前,for循环就已经执行完了,是2,onclic ...

  8. 1、Storm集群安装

    1.下载 本次选择1.2.2版本进行安装 解压安装到/opt/app目录下 2.配置环境变量 export STORM_HOME=/opt/app/apache-storm-1.2.2 export ...

  9. CSS 文件引入

    CSS 文件引入 <html> <head> <!-- link标签引用其他文件.rel="stylesheet" 引用css.href=" ...

  10. 超详MySQL5.7.17压缩包安装图文教程

    靠吹风机暖手写完这篇教程...网络上关于MySQL 5.7.17的安装教程很少且不详细,所以总结了这样一篇文章,希望能帮到大家:(相较于Oracle的安装,MySQL还是简单得多) 1. 下载网址:h ...