移动web技能总结
分类:HTML5作者:编程之家用户
对于作为一名前端开发人员,除了能够编写出满足需求的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标签,
content=>
width:设置布局viewport的特定值,一般都是使用device-width
initial-scale:初始化页面的缩放
minimum-scale:最少缩放
maximum-scale:最大缩放
user-scalable:用户是否缩放
接下来介绍几种布局模式呢,首先是弹性布局Flexbox,下面介绍一些属性
display:flex;
;
-direction: row|row-reverse|column|column-reverse
-wrap: nowrap|wrap|wrap-reverse
-flow:[flex-direction] [flex-wrap]
justify-content: flex-start|flex-end|center|space-between|space-around
-items:flex-start|flex-end|center|auto|baseline|stretch
-self:flex-start|flex-end|center|auto|baseline|stretch
order:<span style="color: #800080;">1; <span style="color: #008000;">//<span style="color: #008000;">应用于子元素,规定其顺序 <a href="http://t.cn/RUfJCDH" target="_blank">http://t.cn/RUfJCDH,支持一下!
下面有个demo:
弹性布局Flexbox
/>
content=>
[flex-direction:row; ]
=
>
=>flex-
=>flex-
=>flex-
=>[flex-direction:row-reverse; ]
=
>
=>flex-
=>flex-
=>flex-
=>[flex-direction:column;]
=
>
= style=>flex-
= style=>flex-
= style=>flex-
=>[flex-direction:column-reverse;]
=
>
= style=>flex-
= style=>flex-
= style=>flex-
=>[flex-wrap:nowrap;]
=
>
= style=>width:600px;
= style=>width:800px;
= style=>width:500px
=>[flex-wrap:wrap;]
=
>
= style=>width:600px;
= style=>width:800px;
= style=>width:500px
=>[justify-content:space-between; ]
=
>
= style=>width:500px;
= style=>width:500px;
=>[justify-content:space-around; ]
=
>
= style=>width:500px;
= style=>width:500px;
=
>
= style=>margin-right:20px;
=>flex-
=style=>margin-left:20px;
=
>
= style=>margin-right:20px;
=>flex-
=style=>margin-left:20px;
当然对于display:flex;,低版本的一些浏览器是不能支持的,于是可以使用比较旧版本的弹性盒子,其他的属性都是相对应的,我们也必须去了解一下盒子模型display:box;,这里不讲了,如下:
-webkit-flex--webkit-flex-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),解决办法(给其加个伪类):
-%-webkit-transform:scaleY(
三、相对单位rem
em:是根据父节点的font-size为相对单位
rem:是根据html的font-size为相对单位
rem=screen.width/20;
四、单行文本溢出
--
五、多行文本溢出
-webkit-box!--:--webkit-box--webkit-line-clamp:
六、制作小三角形
.sanjiao:before{
content: --color: transparent transparent rgb(,,) transparent;
}
-webkit-tap-highlight-color: rgba(,,-webkit-tap-highlight-color: transparent;
标签,
iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
告诉设备忽略将页面中的数字识别为电话号码;
Android中禁止自动识别页面中的邮件地址,iOS中不会自动识别邮件地址
同时,这些移动web的技巧,可以用于制作webAPP、混合APP上面的一些H5应用上!比如说领投羊(公司APP):
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。