一、框架

框架: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前端小结(一)--摘自小鹿_同学的更多相关文章

  1. 移动web前端小结

    原文地址:http://blog.csdn.net/small_rice_/article/details/22690535 在智能手机横行的时代,作为一个web前端,不会编写移动web界面,的确是件 ...

  2. 移动web前端小结(一)

    这段时间做了几个移动项目的前端页面,姑且称之webapp.做这几个项目之前根本没接触过移动端的相关知识,以为和PC端页面没啥区别无非就是尺寸小一点罢了.上手以后发现问题颇多.下面从框架.相关知识点.遇 ...

  3. Java与Web前端发展前景及薪资对比

    Web前端和Java谁的薪资待遇高?关于这个问题,是很多网友都感兴趣的,在各大论坛贴吧上也看到了不少类似的问题. 现在的互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是关于学习什么技 ...

  4. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  5. web前端学习python之第一章_基础语法(一)

    web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  6. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  7. Web前端工作2个月小结

    开始语: 2013年6月30日,Microsoft Learning support 项目结束,转而进入Forerunner Development 项目,这对于这块领域空白的我,空前的困难,可是我坚 ...

  8. WEB前端性能优化小结

    转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...

  9. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. favicon.ico应用与正则表达式验证邮箱(可自动删除前后的空格)

    1.favicon.ico制作:favicon.ico可以ps制作;“shortcut icon”中间有一个空格 <head> <link rel="shortcut ic ...

  2. {Latex}{Tabular}文本超出表格自动换行

    用p或者m可以控制每列的宽度(需载入array宏包). 要整个表格相对于页面居中,用chngpage宏包的adjustwidth,如下: \documentclass[oneside]{article ...

  3. 深入理解URL

    URI(Universal Resource Identifier)通常由三部分组成: ①访问资源的命名机制: ②存放资源的主机名: ③资源自身的名称,由路径表示. 如下面的URI:http://ww ...

  4. JSON文本转换为JSONArray 转换为 List<Object>

    package com.beijxing.TestMain; import java.io.File; import java.io.IOException; import java.util.Arr ...

  5. python 继承中的super

    python继承中子类访问父类的方法(包括__init__)主要有两种方法,一种是调用父类的未绑定方法,另一种是使用super(仅仅对于新式类),看下面的两个例子: #coding:utf-8 cla ...

  6. spring mvc 4.3.2 + mybatis 3.4.1 + mysql 5.7.14 +shiro 幼儿园收费系统 之 动态组合条件查询

    实际应用中,系统设计无法预料到用户最终的查询条件是怎样的.通常的做法是给出一些限制死的查询条件让用户查询.业务稍有改动,就要重新设计界面,增加查询字段等,费时费力. 比较好的做法是,除了常用的查询外, ...

  7. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  8. miniui中常用的状态显示方式

    1.查询sys_code表得到对应的状态 考生状态:<input class="mini-combobox" style="" textField=&qu ...

  9. 史上最全的Python电子书教程资源下载(转)

    网上搜集的,点击即可下载,希望提供给有需要的人^_^   O'Reilly.Python.And.XML.pdf 2.02 MB   OReilly - Programming Python 2nd. ...

  10. [原创][LaTex]汇总博文

    0. 简介 为了查找方便,当当当当,灵机一动的设计了这个博文,有了他就能快速的查找一些该话题相关方面的一些博文了,不管是原创.转载.整理,只要是属于我自己整理的LaTex知识,应该都可以在这里找到的. ...