移动端html5+css3技能使用总结

首先是移动像素，对于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标签，

html,body{ padding: 0; margin: 0; } .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-1{ flex:1; -webkit-flex:1; text-align: center; } .flex-2{ flex:2; -webkit-flex:2;text-align: center; } .flex-3{ flex:3; -webkit-flex:3;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*/ }

当然对于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%;

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的标签，



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





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





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





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