一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 18:16:13 编辑:袖梨 来源:一聚教程网

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

      弹性布局Flexbox                    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*/ }     

[flex-direction:row; ]
    flex-1
    flex-2
    flex-3
[flex-direction:row-reverse; ]
    flex-1     flex-2     flex-3 [flex-direction:column;]     flex-1     flex-2     flex-3 [flex-direction:column-reverse;]     flex-1     flex-2     flex-3 [flex-wrap:nowrap;]                [flex-wrap:wrap;]                [justify-content:space-between; ]           [justify-content:space-around; ]               margin-right:20px;     flex-1     margin-left:20px;     margin-right:20px;     flex-1     margin-left:20px;


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