移动web前端小结(一)--摘自小鹿_同学
2015-07-21 14:30
190 查看
一、框架
框架: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是一款开源的移动端脚本框架,它可以完美的实现在移端开发的大多数事件,如:点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架,并且整个框架非常小,在使用时非常简单。看这位大神的文章/article/4871916.html
相关文章推荐
- JSON用法
- django框架使用angular js入门
- Leetcode Delete Node in a Linked List
- 39个让你受益的HTML5教程
- CSS3详解:background
- Effective OC : 1-5
- [转]七天学会NodeJS
- Node.js学习
- CSS3_loading效果
- BZOJ 1578: [Usaco2009 Feb]Stock Market 股票市场( 背包dp )
- js中的数据类型
- SWFUpload.js
- 总结CSS3新特性(Transition篇)
- document.getElementById("id").innerHTML=""与document.getElementById("id").style.display="none"
- Angularjs路由.让人激动的技术.真给前端长脸了.
- web前端知识体系大全【欢迎补充】
- 前段性能优化之js,css调用优化
- 使用jQuery 把一个JSP文件中的所有id名字替换成以b开头,再加上原来的名字(首字母变为大写)
- JSTL
- 关于Breeze.js+Angular.js+KendoUI+BootStrap+TypeScript+EF4.5的使用心得记录之一