移动端H5的一些基本知识点总结

来到这家公司之后,和曾经的工作发生了非常大的转变.曾经我一直是做PC端页面的.来到如今这家公司之后,主要是做手机移动端的页面.

移动端的页面在我这个做习惯了PC端页面的人看来,应该是非常easy的一些事情.可是在上手的过程其中,还是发现,原来移动端尽管DOM结构要简单得多,可是须要注意的细节,还是非常多的.原因非常easy,那就是,你必须考虑全部的手机上不同分辨率的展示效果.

移动端的分辨率有哪些呢?

以iphone为例,有下面分辨率

iphone4 640*960

iphone5 640*1136

iphone6 750*1334

iphone6plus 1242*2208

安卓阵营的分辨率曾经各式各样,如今基本分为三个

720P 720*1280

1080P 1080*1920

2K 1440*2560

这是一个幻觉,事实上,在做手机H5的时候,分辨率根本不时这个样子的….愁死人了,他们在浏览器中的真实分辨率是

以iphone为例,有下面分辨率

iphone4 320*480

iphone5 320*568

iphone6 375*667

iphone6plus 414*736

安卓阵营的分辨率曾经各式各样,如今基本分为三个

720P 360*640

1080P 360*640

2K 360*640

看到这个你是不是晕了…原来,安卓比苹果强多了…呵呵,还真是这个样子

事实上,我们要做的是一个自适应的网页,并且,这个自适应范围的最低宽度为320px,也就是说,你的代码必须保证在宽度320的时候是能够浏览的,不能挤压变形

移动端使用什么单位?

在PC端制作网页的时候,我们都习惯了的单位是px,那么是不是在移动端我们也用这个单位呢?

我仅仅能说,你能够这样做.可是,最好不要.由于你不知道将来会发生什么.

我们经过一些探讨,和參考眼下国际上通行的方案,採用的单位是rem

那么,什么是rem?我们都知道em是相对父级的尺寸单位.那么rem是root-em的缩写,也就是说,是根相对单位,其相对的是html的font-size的单位.

好了,那么html的font-size默认是多大呢?是16px.也就是说,你的全部的尺寸依靠,都是根据16px的相对运算的结果.

知道了这个之后,我们就開始了复杂的计算,比方,我要设定一个12px 的文字,须要用什么百分比.会发现,这个计算真心是坑爹啊,我在一个项目的一期就是这样做的.可是这个计算真心累.

于是,我们採用了变通的方法,我们给html改动默认的font-size.于是,我们是这样写的.

html {font-size: 10px;}

整个世界都安静了,依照这种方法计算,真的特别方便,比方,我须要12px我就写1.2rem 就能够了.

可是,我迅速思考了一下这个问题,感觉我们在脱裤子放屁.

让我们回到起点,我们为什么要用rem而不用px呢?原因非常easy,我们是为了让页面不会由于一些设备的特殊性而限定为px,是为了去适应各种设备.

而我们给html加上了px为单位的,不是又返回原样了吗?

那到不如直接去使用px,我们还少写两个字符呢.

那么,问题没有解决办法了吗?还是继续回到那反人类的计算其中去??

我迅速转换了一下思维,把这段代码改成了

html {font-size: 62.5%;}

改成了百分比之后,这个问题迅速得到了解决.那样,浏览器在设置不同的默认文字大小的时候,我们的页面都能够尾随改变,而不在限定死了.

在PC端chrome浏览器中,默认最小文字是 12px 当你设置为这样之后利用开发人员工具进行调试的时候,会发现有一些诡异的地方.因此,须要将浏览器的最小文字设置为10或者6,一般都设置到6,这样能够解决在PC端调试的问题.在移动端是没有这个限制的(有,但默认关闭)

移动端html5页面 Meta设置

这个有专门的文章,能够百度一下,在这里我强调一点,须要加上下面的代码.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

盒子宽度

有一些人,包含某些知名的前端框架,会给css中加上这样一段代码:

* {box-sizing:border-box;}

我个人强烈不推荐这样做.由于这破坏了盒子模型,尽管加上了这个之后,你写代码是方便了,可是当你引入某些外置资源的时候,你会发现变形到你根本调不回来的节奏.原因非常easy,这一句代码,会改变页面全部的元素的盒子模型.

曾经由于这一句代码,让我们前端的人排查一个问题排查了两天,始终无法解决.当我接手了项目之后,这个问题交给我,我一開始也莫名其妙.可是后来细致检查,才发现是这一句代码惹的祸.

假设我们须要写一个盒子,默认是百分百宽的,我们怎么做呢?

答案是,我们什么都不做,那么它就是百分百了.

在做移动端页面的时候,尽量不要设定宽度,让它自然的占领一行,这时候我们能够根据须要设定外填充和内填充.

当然,并不是全部的东西都能够这样来做,总会遇到多列布局的时候

这就须要注意了,不要给rem这种单位的宽度,而是要给50%或者33.3%的宽度.

在设定了这种宽度之后,不要给这个元素设定内填充和外填充.假设有须要的话,在这个元素里面再写一个元素,给这个元素加你所须要的填充.

另外,在布局上,要尽量少用浮动布局,适当在细节部分使用定位布局,并做好隐藏溢出等处理.以防止浮动布局可能出现的问题.关于定位问题,能够參考我的另外一篇博文 Css 具体解读定位属性 position 以及參数;

边框的处理

在PC端的网页制作中,我们一般就使用边框属性border: 1px solid #ddd;可是在移动端,就须要特别注意了,由于边框的宽度是计算在盒子模型其中的,所以,假设你使用不慎,可能造成你布局的困境.

因此,我们须要一些其它的參数来设定边框,一般矩形的元素,我们能够使用outline: 1px solid #ddd;来制作边框,这个属性是不会计算在盒子模型其中的.

另外,当你尝试做一个两列布局的列表的时候,使用这个參数,你会发现两个元素之间的边框好像是两个像素.对的,你没有看错,确实是两个像素.

怎么解决问题呢?

普通情况下,你仅仅须要给元素加上背景就能够解决问题.后面的元素的背景会遮住前面元素的outline发出来的边框.

这是一个非常有用的技巧.

可是,假设元素不是矩形的怎么办呢?

事实上非常好解决.由于,在CSS中,不仅仅是outline能够来模拟边框,另一个属性,也是能够模拟边框的,那就是CSS3的box-shadow外发光属性.

比如,我要给元素加上一个1px的实线边框,你这样写,是不行的box-shadow:0 0 1px #ddd;你会发现,你模拟出来的边框会有点发虚.

正确的写法是box-shadow:0 0 0 1px #ddd;看到这样写非常奇怪?去w3school看下就明确了.

当然,这两种做法都是有弊端的,比方我就想设置一条左边框的线条,而不时整个的都有边框怎么办?

还是有办法的,我们能够借助伪元素来实现模拟,:before和:after;具体怎么实现,这里不做演示了.

这里须要说明一下,网上有不少0.5px边框的实现教程,这样做的优点是,能够做出比較细的线条,让我们的H5看上去更像原生的APP.我个人的建议是,不要尝试这样做,由于非常麻烦,并且兼容性都有问题,得不偿失.那么正确的做法是什么呢?

非常easy——跟你的设计师说,尽量不要设计线条-_-|||反正我就是这样跟我们团队的设计说的.

使用jquery还是zepot?

为什么使用zepot?

原因仅仅有一个,它小.还有其它的优点吗?没发现.

我个人的建议是使用jquery2.x的版本号,优点有例如以下

拥有大量的插件能够使用
功能比zepot强大太多
效能比zepot强大
习惯了jquery

很多其它内容,请參阅为什么我们放弃了 Zepto

总结

在移动端制作网页和在PC端有非常大的不同.在移动端的非常多经验拿到移动端来是没有作用的,可能还会起到反作用.当我们从PC端前端project师转向到移动端前端project师的时候,须要耐心的解决一些问题,一个一个坑的去踩,才干不断的进步.

FungLeo原创,转载请保留版本号申明,和首发地址http://blog.csdn.net/fungleo/article/details/50811739