前端开发移动端触屏版页面开发总结

前端开发移动端|前端开发者

设置viewpoint和屏幕等宽
Code:
[code]<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>[/code]

主流分辨率

Android:主流机型主要为 480×800, 480×854, 540×960, 720×1280, 800×1280 这五种。
(非主流机型还包括:240×320, 320×480, 640×960 这三种,其中两种都与 iPhone 一致。)
iOS: 主流机型主要为 320×480, 640×960, 640×1136, 1024×768, 2048×1536, 这五种。
WP:主流机型主要为 480×800,720×1280, 768×1280 这三种
新增:iPhone6:7501334 iPHone6s 12422208

使用相对单位

1、宽、高、填充、边界均使用百分比
2、字体em/rem
em:相对父级
rem(root element):相对根父级
[color=Red]ps:字体单位一览表(各大浏览器默认字体16px)[/color]

[table=50%]
[tr][td]Pixels[/td][td]EMs[/td][td]Percent[/td][td]Points[/td][/tr]
[tr][td]6px[/td][td]0.375em[/td][td]37.5%[/td][td]5pt[/td][/tr]
[tr][td]7px[/td][td]0.438em[/td][td]43.8%[/td][td]5pt[/td][/tr]
[tr][td]8px[/td][td]0.5em[/td][td]50%[/td][td]6pt[/td][/tr]
[tr][td]9px[/td][td]0.563em[/td][td]56.3%[/td][td]7pt[/td][/tr]
[tr][td]10px[/td][td]0.625em[/td][td]62.5%[/td][td]8pt[/td][/tr]
[tr][td]11px[/td][td]0.688em[/td][td]68.8%[/td][td]8pt[/td][/tr]
[tr][td]12px[/td][td]0.75[/td][td]75%[/td][td]9pt[/td][/tr]
[tr][td]13px[/td][td]0.813[/td][td]81.3%[/td][td]10pt[/td][/tr]
[tr][td]14px[/td][td]0.875[/td][td]87.5%[/td][td]11pt[/td][/tr]
[tr][td]15px[/td][td]0.938[/td][td]93.8%[/td][td]11pt[/td][/tr]
[tr][td]16px[/td][td]1em[/td][td]100%[/td][td]12pt[/td][/tr]
[tr][td]17px[/td][td]1.063em[/td][td]106.3%[/td][td]13pt[/td][/tr]
[tr][td]18px[/td][td]1.125em[/td][td]112.5%[/td][td]14pt[/td][/tr]
[tr][td]19px[/td][td]1.188em[/td][td]118.8%[/td][td]14pt[/td][/tr]
[tr][td]20px[/td][td]1.25em[/td][td]125%[/td][td]15pt[/td][/tr]
[tr][td]21px[/td][td]1.313em[/td][td]131.3%[/td][td]16pt[/td][/tr]
[tr][td]22px[/td][td]1.375em[/td][td]137.5%[/td][td]17pt[/td][/tr]
[tr][td]23px[/td][td]1.438em[/td][td]143.8%[/td][td]17pt[/td][/tr]
[tr][td]24px[/td][td]1.5em[/td][td]150%[/td][td]18pt[/td][/tr]
[/table]

合理使用box-flex,让布局更简单

兼容性写法:
[code].flex-box{
overflow: hidden;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
width: 100%; height: 300px;
margin: 0 auto;
color: #fff;
text-align: center;
font-family: ‘Microsoft YaHei’;
}
.flex1{
width: 20%; height: 100%;
background: #ff8989;
display: block;
}
.flex2{
-webkit-box-flex: 1; / OLD – iOS 6-, Safari 3.1-6 /
-moz-box-flex: 1; / OLD – Firefox 19- /
-webkit-flex: 1; / Chrome /
-ms-flex: 1; / IE 10 /
flex: 1;
background: #1bbc9b;
}
.flex3{
width: auto;
width: 20%; height: 100%;
background: #516d81;
}
[/code]
demo:
代码片段 1

使用box-sizing,可以减少很多不必要的计算

兼容性写法:
[code].sizing{
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}[/code]

使用 CSS 媒体查询

[code]@media screen and (min-width: 640px){
样式
}[/code]

其他实用小技巧:

去掉手持设备点击时出现的透明层:
[code]a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}[/code]
去掉input在ios下的默认效果:
[code]input{
resize: none;
-webkit-appearance:none;
}[/code]
阻止旋转屏幕时自动调整字体大小
[code]html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}[/code]

前端开发移动端|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发移动端触屏版页面开发总结》
» 本文链接地址:https://www.rokub.com/2889.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
分享到: 更多 (0)

评论 抢沙发