移动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前端知识体系,目的 ...
随机推荐
- innodb buffer pool小解
INNODB维护了一个缓存数据和索引信息到内存的存储区叫做buffer pool,他会将最近访问的数据缓存到缓冲区.通过配置各个buffer pool的参数,我们可以显著提高MySQL的性能. INN ...
- Using Redis to store php session
Using Redis to store php session 默认情况下,php将会将session信息存储在文件系统上,在单机情况下没有问题,但是当系统负载增大,或者在对系统可用性要求很高的场景 ...
- jquery template模版引擎
jTemplates http://jtemplates.tpython.com/ jquery-template https://github.com/codepb/jquery-template ...
- 通过Dockerfile建立.NET Core mvc Image
生成.NET core mvc code docker run -itd microsoft/dotnet:latestdocker psdocker attach containeridmkdir ...
- unity3d 知识点随记
1.transform.translate是增加transform面板相应的数值x,y,z是以本地坐标系为方向:transform.transformdirection是以世界坐标系为方向,可以去测试 ...
- 56992 vuser_init.c(12): Error: Socket descriptor not found.
Loadrunner 运行场景时提示" vuser_init.c(12): Error: Socket descriptor not found. Hint: the problem mi ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- MongoDB安装启动服务
这里主要是针对解决出现的问题. 1.MongoDB 下载地址http://www.mongodb.org/downloads 下载之后可以自定义安装路径,我安装在了D盘下. 然后在环境变量中添加: M ...
- 双二次Lagrange 有限元计算特征值程序(基于iFEM)
function lambda = c0P2(h) %% Mesh [node,elem] = squarequadmesh([,,,],h); elem = elem(:,[,,,]); showm ...
- Minecraft 插件 world edit 的cs 命令
现在 jar包 http://www.mozilla.org/rhino ,放到classpath 我是放到libs目录中, 1.8 spi 服 @ECHO OFFjava -cp ".;. ...