你的位置:首页 > 网页设计

[网页设计]移动web前端小结(一)


这段时间做了几个移动项目的前端页面,姑且称之webapp。做这几个项目之前根本没接触过移动端的相关知识,以为和PC端页面没啥区别无非就是尺寸小一点罢了。上手以后发现问题颇多。下面从框架、相关知识点、遇到的问题、解决办法,以及依旧存在的困惑进行总结。因为刚接触1个多月时间,多处不足,希望各位大神能为我解惑,拜谢~~[WSZ$8Y)CV)2]DAQHBYB3%X

一、框架

框架:Bootstrap+HTML5 Boilerplate。

两个框架整合到一起可以看一下这位大神的文章:《使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目》。

image

image

二、相关知识点

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

image 网页(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

效果:image

 

image PS使用:

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

    到 http://fortawesome.github.io/Font-Awesome/cheatsheet/复制image前面的图标到ps。

    开始是这样的image改成FontAwesome字体后image

 

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

效果:image

可以参考这篇文章: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/

image

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

一个Css3动画的解决方案。

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

 

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

解释:hammer.js是一款开源的移动端脚本框架,它可以完美的实现在移端开发的大多数事件,如:点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架,并且整个框架非常小,在使用时非常简单。

看这位大神的文章http://www.cnblogs.com/iamlilinfeng/p/4239957.html

 

G17X341D6A@QCX8Q3E}7_IX待续……