活动web前端小结(一)

那段时日做了多少个移动项指标前端页面,姑且称之webapp。做这么些品种事先根本没接触过活动端的相关知识,以为和PC端页面没啥不一样无非正是尺寸小一些而已。上手以往发现标题颇多。下边从框架、相关知识点、蒙受的题材、消除办法,以及如故存在的迷惑实行计算。因为刚接触3个多月时间,多处不足,希望各位大神能为自个儿答复,拜谢~~图片 1

一、框架

框架:Bootstrap+HTML5 Boilerplate。

三个框架整合到一起能够看一下那位大神的篇章:《选取 Bootstrap 和 HTML5 Boilerplate
开头三个体系
》。

图片 2

图片 3

贰 、相关知识点

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/很好的行使文书档案。

图片 4 网页(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

效果:图片 5

 

图片 6 PS使用:

   
字体包里有FontAwesome.otf文件,安装字体到电脑,重启PS。

    到
http://fortawesome.github.io/Font-Awesome/cheatsheet/复制图片 7前面包车型大巴图标到ps。

   
开首是如此的图片 8改成FontAwesome字体后图片 9

 

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;
}

效果:图片 10

能够参照那篇小说: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/

图片 11

8.CSS3动画(all-animation.css)

三个Css3卡通的消除方案。

下载及示范地址:http://www.html580.com/?Ky37dClP

 

9.页面手势操作(hammer.js)

释疑:hammer.js是一款开源的移动端脚本框架,它能够健全的落到实处在移端开发的半数以上事件,如:点击、滑动、拖动、多点触控等事件。不需求注重任何别的的框架,并且整个框架相当的小,在选取时卓殊简单。

看那位大神的稿子http://www.cnblogs.com/iamlilinfeng/p/4239957.html

 

9.css中-webkit-overflow-scrolling: touch(允许单独的轮转区域和触摸回弹)

 

解释:http://www.cnblogs.com/PeunZhang/p/3553020.html

 

 

 

图片 12待续……

相关文章