移动web前端小结(一)--摘自小鹿_同学
一、框架
框架:Bootstrap+HTML5 Boilerplate。
两个框架整合到一起可以看一下这位大神的文章:《使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目》。
二、相关知识点
1.Meta标签
控制显示区域(在PC端也会用到):
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
- width – viewport(视区)的宽度
- height – viewport的高度
- initial-scale – 初始的缩放比例
- minimum-scale – 允许用户缩放到的最小比例
- maximum-scale – 允许用户缩放到的最大比例
- user-scalable – 用户是否可以手动缩放
IOS中Safari允许全屏浏览:
<meta content="yes" name="apple-mobile-web-app-capable">
IOS中Safari顶端状态条样式:
<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略将数字变为电话号码:
IOS和Android系统会默认把一定长度内的数字辨认为电话号码,有时会引起误操作.
<meta content="telephone=no" name="format-detection">
2.link标签
Safari保存到桌面图标:
通过设置apple-touch-icon标签,添加到主屏幕的图标就会使用我们指定大小的图片。
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" />
给WebApp加一个类似NativeApp的启动画面:
<link rel="apple-touch-startup-image" href="apple-touch-icon.png" />
3.字体图标(Font Awesome)
下载地址:http://fontawesome.dashgame.com/很好的使用文档。
网页(HTML):
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"><!--图标字体 V4.3.0-->
<i class="fa fa-camera-retro"></i> fa-camera-retro
效果:
PS使用:
字体包里有FontAwesome.otf文件,安装字体到电脑,重启PS。
到 http://fortawesome.github.io/Font-Awesome/cheatsheet/复制前面的图标到ps。
开始是这样的改成FontAwesome字体后
4.CSS3的-webkit-box
用于流式布局父元素宽度被子元素均分。
例:父元素分别被分成3:2:1
HTML代码:
<article>
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">03</section>
</article>

CSS代码:
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background:green;
}

效果:
可以参考这篇文章:http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/
5.横竖屏切换字体变大问题(-webkit-text-size-adjust:none)

css代码:
html{
height:100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%; /*避免字体被浏览器自动重置*/
font-size:62.5%;
}

6.CSS3新的字体单位(rem)
解释:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。
用途:用em、百分比的时候计算大小很让人头疼,当嵌套的太多时我就会晕掉,转而而用px,可是px是固定死的。因为rem的的参照点只有根元素,所以我们可以给根元素设置好合适的大小一切既搞定了。从 IE6 到Chrome根元素默认的font-size都是 16px(是这样吗?)。
css代码:html{font-size:62.5%; /* 10÷16=62.5% */
}
根元素设置完(10px)之后:font-size:12px;等同于font-size:1.2rem ;
7.Buttons样式
地址:http://www.bootcss.com/p/buttons/
8.CSS3动画(all-animation.css)
一个Css3动画的解决方案。
下载及演示地址:http://www.html580.com/?Ky37dClP
9.页面手势操作(hammer.js)
解释:hammer.js是一款开源的移动端脚本框架,它可以完美的实现在移端开发的大多数事件,如:点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架,并且整个框架非常小,在使用时非常简单。
看这位大神的文章http://www.cnblogs.com/iamlilinfeng/p/4239957.html
移动web前端小结(一)--摘自小鹿_同学的更多相关文章
- 移动web前端小结
原文地址:http://blog.csdn.net/small_rice_/article/details/22690535 在智能手机横行的时代,作为一个web前端,不会编写移动web界面,的确是件 ...
- 移动web前端小结(一)
这段时间做了几个移动项目的前端页面,姑且称之webapp.做这几个项目之前根本没接触过移动端的相关知识,以为和PC端页面没啥区别无非就是尺寸小一点罢了.上手以后发现问题颇多.下面从框架.相关知识点.遇 ...
- Java与Web前端发展前景及薪资对比
Web前端和Java谁的薪资待遇高?关于这个问题,是很多网友都感兴趣的,在各大论坛贴吧上也看到了不少类似的问题. 现在的互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是关于学习什么技 ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- Web前端工作2个月小结
开始语: 2013年6月30日,Microsoft Learning support 项目结束,转而进入Forerunner Development 项目,这对于这块领域空白的我,空前的困难,可是我坚 ...
- WEB前端性能优化小结
转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...
- web前端知识体系小结(转)
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
随机推荐
- vim 图
- VC++ 最小化到托盘、恢复
所谓的“托盘”,在Windows系统界面中,指的就是下面任务条右侧,有系统时间等等的标志的那一部分.在程序最小化或挂起时,但有不希望占据任务栏的时候,就可以把程序放到托盘区. 一.托盘编程相关函数 ...
- oracle数据库导入、导出
导出:exp BFXXLZ/BFXXLZ123@192.168.63.63:1521/ORCL file=d:\BFXXLZ.dmp 导入:imp BFXXLZ/BFXXLZ123@ORCL file ...
- android开发——学习总结20131204
android:launchMode,即Activity的启动模式,与Intent中的Flags共同作用,决定Activity如何启动. android:launchMode分别有"stan ...
- Java处理Excel整理篇
常用Excel,每次写的时候都得现查,索性做一个整理. Java里用的时候一般用jxl这个包,相对好用. 读: File file = new File(excelFile);Workbook boo ...
- python画图—黑板客老师课程学习
1.介绍 把每个图都看作一个对象,图中的每一个部分也是对象.——所有的一切都是对象. 工具——ipython notebook 是python里边用的最多的2D&3D的会图库,开源免费库,使用 ...
- Windows服务二:测试新建的服务、调试Windows服务
一.测试Windows服务 为了使Windows服务程序能够正常运行,我们需要像创建一般应用程序那样为它创建一个程序的入口点.像其他应用程序一样,Windows服务也是在Program.cs的Main ...
- Net 通用权限管理系统源码 带数据库设计文档,部署说明文档
Net 通用权限管理系统源码 带数据库设计文档,部署说明文档 包括数据库设计文档部署安装文档源码数据库文件 下载地址:http://www.mallhd.com/archives/1389
- Spring scope
scope用来声明IOC容器中的对象应该处的限定场景或者说该对象的存活空间,即在IOC容器在 对象进入相应的scope之前,生成并装配这些对象,在该对象不再处于这些scope的限定之后,容器通常会销毁 ...
- Versioned table in Netezza
Problem One QC process need to obtain tables and their row counts in a database in Netezza. We use t ...