移动web前端小结（一）--摘自小鹿_同窗

1、框架

框架：Bootstrap+HTML5 Boilerplate。

两个框架整合到一块儿能够看一下这位大神的文章：《使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目》。

2、相关知识点

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