必会的移动端Html5的基础知识点

来到这家公司之后,和以前的工作发生了很大的转变.以前我一直是做PC端页面的.来到现在这家公司之后,主要是做手机移动端的页面.

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

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

以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呢?原因很简单,我们是为了让页面不会因为一些设备的特殊性而限定为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;}

登录后复制

我个人强烈不推荐这样做.因为这破坏了盒子模型,虽然加上了这个之后,你写代码是方便了,但是当你引入某些外置资源的时候,你会发现变形到你根本调不回来的节奏.原因很简单,这一句代码,会改变页面所有的元素的盒子模型.

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

如果我们需要写一个盒子,默认是百分百宽的,我们怎么做呢?

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

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

当然,并非所有的东西都可以这样来做,总会遇到多列布局的时候

这就需要注意了,不要给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.我个人的建议是,不要尝试这样做,因为很麻烦,而且兼容性都有问题,得不偿失.那么正确的做法是什么呢?很简单——跟你的设计师说,尽量不要设计线条-_-|||反正我就是这样跟我们团队的设计说的.