一、框架

框架: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. 构建Maven聚合工程

    最近,准备构建一个Maven的项目,基于模块化的结构思想,决定使用Maven的聚合工程进行构建. 环境准备: (1)eclipse 这里推荐使用spring封装的eclipse(即STS) ,STS中 ...

  2. 【英语魔法俱乐部——读书笔记】 3 高级句型-简化从句&倒装句(Reduced Clauses、Inverted Sentences) 【完结】

    [英语魔法俱乐部——读书笔记] 3 高级句型-简化从句&倒装句(Reduced Clauses.Inverted Sentences):(3.1)从属从句简化的通则.(3.2)形容词从句简化. ...

  3. IOS系列swift语言之课时八

    这节课需要讲的就是可选链,内存管理,引用计数,unowned解决 //: Playground - noun: a place where people can play import UIKit / ...

  4. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  5. 使用小米天气API获取天气信息

    1. URL部分 以下url中"%s"代表的是城市Id,比如北京的cityId=101010100: //获取未来五天预报信息,红色部分信息不需要 WEATHER_DATA_URL ...

  6. 广播后刷新界面-调用其他界面的方法触动广播后刷新该界面UI

    new CigaretteLoginActivity().login(ac,"switch_account",list.get(arg2).CUST_CODE,list.get(a ...

  7. linq andregex

  8. 在JSP中使用JavaBean

    //创建一个PersonBean类 public class PersonBean {    private String name;    private int age;    public Pe ...

  9. Android学习---数据库的增删改查(sqlite CRUD)

    上一篇文章介绍了sqlite数据库的创建,以及数据的访问,本文将主要介绍数据库的增删改查. 下面直接看代码: MyDBHelper.java(创建数据库,添加一列phone) package com. ...

  10. python学习之——splinter使用

    开始学习使用splinter工具了,目前是摸索中,先熟悉splinter工具的使用方法~~ 实现功能: 打开firefox浏览器->www.baidu.com->输入关键词 python, ...