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

 当然对于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中不会自动识别邮件地址

• 上一个： jQuery实现DOM加载方法源码分析

• 下一个： 一款经典的js文字无缝滚动代码