移动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前端知识体系,目的 ...
随机推荐
- 基于AQS的锁
锁分为独占锁和共享锁,它们的主要实现都是依靠AbstractQueuedSynchronizer,这个类只提供一系列公共的方法,让子类来调用.基于我了解不深,从这个类的属性,方法,和独占锁的获取方式去 ...
- solrCloud+tomcat+zookeeper集群配置
solrcolud安装solrCloud+tomcat+zookeeper部署 转载请出自出处:http://eksliang.iteye.com/blog/2107002 http://eksli ...
- 我的第一个WP8.1应用总结
我的LUMIA925已经买了很久了,想自己开发WP应用放在上面,却一直想不到有什么特别的想法和需要.前几天的事情正好让我有了这个机会. 前几天在客户机房工作的时候,同事打电话来说另一个客户由于换了电脑 ...
- Sql Server隔离级别(1)
数据库是一个并发操作的环境,就像多线程一样,这样在高并发的情况下回出现一些问题. 假设我们有一张表Account,表结构和数据如下所示 AccountName Balance jo 100 fo 20 ...
- gslX680驱动的移植实践
将gslX680触摸屏驱动移植到自己的开发板上(对应的源码文件gslX680.c),并且实现可以使用make menuconfig进行动态的加载和卸载 因为触摸屏设备属于一种典型的输入设备,所以他的驱 ...
- python install_opener用法
opener:当你获取一个URL时,你使用一个opener(OpenerDirector).正常情况下我们一直使用默认的opener,通过urlopen,但你也可以创建自定义的openers. url ...
- Slyx_SerAddGet
##通道##119.29.192.206:12002## ##通道##58.221.49.24:12002##
- 多线程爬取 threading.Thread 文件名支持gbk编码
# - *- coding:utf-8-*-import urllib2import reimport osimport threadingimport sysreload(sys)sys.setde ...
- nw_socket_handle_socket_event解决
http://www.bkjia.com/IOSjc/1158465.html 出现问题如下 to a parent directory scheduled for deletion nw_endpo ...
- Delphi 中记录类型 给记录指针赋值。
PPersion=^TPersion; TPersion=packed record Name:string; Sex:string; Clasee:string; end ...