首页 > 代码库 > 手机触屏版页面开发总结

手机触屏版页面开发总结

2024-08-03 03:35:53   212人阅读

设置viewpoint和屏幕等宽

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

主流分辨率

Android：主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。
（非主流机型还包括：240x320, 320x480, 640x960 这三种，其中两种都与 iPhone 一致。）
iOS: 主流机型主要为 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 这五种。
WP：主流机型主要为 480x800，720x1280, 768x1280 这三种
新增：iPhone6：750*1334　iPHone6s 1242*2208

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

  

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

合理使用box-flex,让布局更简单
兼容性写法：

.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;}

 

 

demo:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><style>    .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;    }</style><body>    <p>你可以改变屏幕宽度查看效果</p>    <div class="flex-box">        <div class="flex1">flex1 <br> 我的宽度为父级的20%；</div>        <div class="flex2">flex2 <br> 我的宽度为父级宽-(flex1+flex3)；</div>        <div class="flex3">flex3 <br> 我的宽度为父级的20%；</div>    </div></body></html>

　

使用box-sizing，可以减少很多不必要的计算
兼容性写法：

.sizing{-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}

使用 CSS 媒体查询

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

其他实用小技巧：
去掉手持设备点击时出现的透明层:

a,button,input{    -webkit-tap-highlight-color: rgba(0,0,0,0);    -webkit-tap-highlight-color: transparent; }

去掉input在ios下的默认效果:

input{    resize: none;    -webkit-appearance:none;}

阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {    -webkit-text-size-adjust:100%;}

 

手机触屏版页面开发总结


联系
我们