手机触屏版页面开发总结
经过一年的触屏版开发,每一个项目开始前总要做大量的准备,力求做到完美,但做下一个项目的时候总会发现上一个项目有着太多的不足。这应该就是成长吧!虽然不是什么大牛但也觉得有必要把一些技巧和经验记录下来,以便同行们参考和补充(或者到手机触屏版页面开发总结留言补充哦)。
设置viewpoint和屏幕等宽
Code:
- <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,让布局更简单
兼容性写法:
<!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>
手机触屏版页面开发总结相关推荐
- Discuz手机触屏版的图片尺寸显示修改
可能是出于节省流量的考虑,DZ手机触屏版把图片搞得非常小.首先在上传的时候,生成一张手机版缩略图,这个图的尺寸很小,就算在模板上放大尺寸,也会变模糊.然后在手机模板上,图片的高和宽设置得非常小,140 ...
- 微博html5版什么手机,搜狐微博推出全新手机HTML5触屏版
近日,搜狐微博全力推出手机微博触屏版(w.sohu.com/m),该版采用最新HTML5技术,全新的视觉设计,让你在网页上享受超越客户端的用户体验. HTML5是一种技术标准,被业界视为未来移动应用的 ...
- 搜狐html5,搜狐微博推出全新手机HTML5触屏版
近日,搜狐微博全力推出手机微博触屏版(w.sohu.com/m),该版采用最新HTML5技术,全新的视觉设计,让你在网页上享受超越客户端的用户体验. HTML5是一种技术标准,被业界视为未来移动应用的 ...
- mobile.php discuz,电脑访问discuz手机版【触屏版跳转标准版的修改方法】
推荐方法: 以前我们介绍过如何通过修改Chrome浏览器运行参数的方法来模拟手机访问网站,但是在Chrome 32和33版本以后增加了更加便捷的方法,在开发者工具中只需要设置一下就能方便的模拟各种手机 ...
- forum.php手机怎么打开,解决无法使用电脑访问调试discuz手机版或触屏版问题
一.discuz电脑无法访问标准手机版的方法: 现在需要修改2个文件,即可用电脑浏览discuz的手机版本: 1.文件./source/function/function_core.php 查找 :f ...
- discuz手机客户端java_完美解决电脑访问discuz手机版【支持触屏版】
前两天一直尝试着用pc(电脑)访问discuz手机触屏版进行调试,网络上相应的教程基本找不到,解决标准手机版的方法倒是可以在discuz官网找到,今天有点时间就整理一下,分享出来,希望可以帮助到大家! ...
- 电脑访问discuz手机版【触屏版跳转标准版的修改方法】
推荐方法: 以前我们介绍过如何通过修改Chrome浏览器运行参数的方法来模拟手机访问网站,但是在Chrome 32和33版本以后增加了更加便捷的方法,在开发者工具中只需要设置一下就能方便的模拟各种手机 ...
- WAP、触屏版网站及APP的区别
在手机上的应用通常分为"手机WAP版网站"."手机触屏版网站"."手机APP应用软件",其三者间有何区别呢?以下是各种版本网站及应用的示意图 ...
- 仿eplie触屏版html5响应式手机wap网站模板
简介: 一款仿eplie触屏版手机wap网站模板,html5响应式多终端,满屏显示. 12个页面,分表为:首页.帮助列表.留言板.图文列表.404模板.表格列表.提示框UI.几种布局的图片列表. 网盘 ...
最新文章
- FreeSwitch Sip【转】
- 兴义智力象机器人_兴义向阳路小学在第十八届全国青少年机器人竞赛贵州区选拔赛夺冠...
- JavaScript + Tampermonkey——易班优课YOOC课群在线测试自动答题解决方案(十七)复合型解决方案油猴脚本
- Docker容器学习(一)
- SVN打分支及主干合并到分支
- java上传文件以流方式判断类型
- 定期存单丢了被别人捡到,里面的存款会不会被领走?
- 计算机不能辨别汉字wifi,Win10系统连接不上被隐藏的中文Wifi的解决方法
- oracle中的Number的长度定义
- openpyxl 列 插入_python3对excel读写openpyxl
- Python--详解Python中re.sub
- 【AtCoder】ARC090
- 学习Jsoup(二)
- 到底什么是集群分布式
- 2-Twelfth Scrum Meeting20151212
- 浪潮财务软件遇到问题
- 保护眼睛——设置WIN7和XP 窗体、Chrome、IE网页背景颜色
- 第十六周项目3电子词典
- 【5G】NAS安全密钥衍生算法详解
- python编程怎么画三角形的外接圆_用MATLAB画三角形外接圆