The basic knowledge points of mobile Html5

After coming to this company, there has been a big change from my previous job. I used to be I work on PC-side pages. After joining this company, I mainly work on mobile-side pages.

As a person who is used to making PC-side pages, I think mobile-side pages should be very simple. Some things. However, during the process of getting started, I still found that although the DOM structure of the mobile terminal is much simpler, there are still many details that need to be paid attention to. The reason is very simple, that is, you must consider the differences on all mobile phones. Display effect of resolution.

What are the resolutions on the mobile terminal?

Take iPhone as an example, the following resolutions are available

iphone4 640*960
iphone5 640*1136
iphone6 750*1334
iphone6plus 1242*2208

The resolutions of the Android camp used to be various, but now they are basically divided into three

720P 720*1280
1080P 1080*1920
2K 1440*2560

This is an illusion. In fact, when I was making H5 mobile phones, the resolution was not like this at all... It’s so frustrating. The real resolution in the browser is

Take iphone as an example, it has the following resolution

iphone4 320*480
iphone5 320*568
iphone6 375*667
iphone6plus 414*736

The resolutions of the Android camp used to be various, but now they are basically divided into three

720P 360*640
1080P 360*640
2K 360*640

Have you fainted after seeing this...It turns out that Android is much better than Apple...Haha, it really looks like this

Actually, what we have to do is An adaptive web page, and the minimum width of this adaptive range is 320px. In other words, your code must ensure that it can be browsed at a width of 320 and cannot be squeezed or deformed

Mobile use What unit?

When making web pages on the PC side, the unit we are all used to is px, so do we also use this unit on the mobile side? I can only say, You can do this. But, it’s best not to, because you don’t know what will happen in the future.

After some discussions and referring to the current internationally accepted solutions, the unit we adopted is rem

So, what is rem? We all know that em is the size unit relative to the parent. So rem is root The abbreviation of -em, that is to say, it is the root relative unit, which is relative to the unit of font-size of html.

Okay, So what is the default font-size of html? It is 16px. In other words, all your sizes are based on 16px The result of the relative operation of .

After knowing this, we started complex calculations. For example, if I want to set a text of 12px, what percentage needs to be used. You will find that this calculation is really cheating. I did this in the first phase of a project. But this calculation is really tiring.

So, we adopted a flexible method and modified the default value for htmlfont-size.So, we wrote it like this.

html {font-size: 10px;}

Copy after login

The whole world is quiet. It is really convenient to calculate according to this method. For example, if I need 12px, I will write 1.2rem That's it.

But, I thought about this problem quickly and felt like we were taking off our pants and farting.

Let's go back to the starting point, why do we use rem Instead of px? The reason is very simple. We want the page not to be limited to px due to the particularity of some devices, but to adapt to various devices.

And we added px as the unit to html, doesn’t it return to the original state? Then it is better to use px directly, we still Just write two less characters.

So, is there no solution to the problem? Or should we continue to go back to the anti-human calculation??

I quickly changed my thinking and After changing this code to

html {font-size: 62.5%;}

Copy after login

and changing it to a percentage, this problem was quickly solved. In this way, when the browser sets different default text sizes, our pages can follow the changes instead of It’s so limited.

In the PC chrome browser, the default minimum text is 12px When you set it to this and use the developer tools to debug, you will find something weird. Place. Therefore, you need to set the minimum text of the browser to 10 or 6, generally set to 6, which can solve the problem of debugging on the PC side. There is no such restriction on the mobile side (there is, but it is turned off by default)

Mobile html5 page Meta settings

There is a special article for this, you can search it on Baidu. Here I emphasize that you need to add the following code.

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

Copy after login

Box width

Some people, including some well-known front-end frameworks, will add such a piece of code to css:

* {box-sizing:border-box;}

Copy after login

I personally strongly do not recommend this. Because it destroys the box model, although adding After using this, it is convenient for you to write code, but when you introduce certain external resources, you will find that it has deformed to a rhythm that you cannot adjust back. The reason is very simple. This line of code will change all the aspects of the page. Element’s box model.

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

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

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

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

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

这就需要注意了,不要给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;

Copy after login

你会发现,你模拟出来的边框会有点发虚.

正确的写法是

box-shadow:0 0 0 1px #ddd

Copy after login

;看到这样写很奇怪?去w3school看下就明白了.

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

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

这里需要说明一下,网上有不少0.5px边框的实现教程,这样做的好处是,可以做出比较细的线条,让我们的H5看上去更像原生的APP.我个人的建议是,不要尝试这样做,因为很麻烦,而且兼容性都有问题,得不偿失.那么正确的做法是什么呢?很简单——跟你的设计师说,尽量不要设计线条-_-|||反正我就是这样跟我们团队的设计说的.

使用jquery还是zepot?

为什么使用zepot?

原因只有一个,它小.还有其他的好处吗?没发现.

我个人的建议是使用jquery2.x的版本,好处有如下

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

The above is the detailed content of Basic knowledge points of mobile Html5 that you must know. For more information, please follow other related articles on the PHP Chinese website!