Points de connaissances de base du mobile Html5 que vous devez connaître

一个新手

Libérer： 2017-09-06 10:12:51

original

1541 Les gens l'ont consulté

Connaissances de base du mobile Html5 que vous devez connaître

Après avoir rejoint cette entreprise, il y a eu un grand changement par rapport à mon emploi précédent. travailler sur des pages côté PC. Après avoir rejoint cette entreprise, je travaille principalement sur des pages côté mobile

À mon avis, en tant que personne habituée à créer des pages côté PC, les pages côté mobile devraient l'être. très simple.Certaines choses.Cependant, au cours du processus de démarrage, j'ai quand même constaté que même si la structure DOM du terminal mobile est beaucoup plus simple, il y a encore de nombreux détails auxquels il faut prêter attention.La raison est très simple, c'est-à-dire que vous devez tenir compte des différences sur tous les téléphones mobiles. Effet d'affichage de la résolution.

Quelles sont les résolutions sur le terminal mobile ?

Prenons l'exemple de l'iPhone, les résolutions suivantes sont disponibles.

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

Les résolutions du camp Android étaient autrefois diverses, mais maintenant elles sont essentiellement divisées en trois types

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

C'est une illusion. En fait, lors de la fabrication de téléphones mobiles H5, la résolution n'est pas du tout comme ça... C'est tellement frustrant. 🎜>

En prenant l'iPhone comme exemple, il a les résolutions suivantes

iphone4 320*480

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

Les résolutions du camp Android étaient diverses, mais maintenant elles sont essentiellement divisées en trois types

720P 360*640

1080P 360*640
2K 360*640

As-tu le vertige après avoir vu ça... Il s'avère qu'Android est bien meilleur qu'Apple... Haha, c'est vraiment comme ça

En fait, quoi ce que nous devons faire est une page Web adaptative, et la largeur minimale de cette plage adaptative est de 320 pixels. En d'autres termes, votre code doit garantir qu'il peut être parcouru avec une largeur de 320 et ne peut pas être comprimé ou déformé

Utilisation mobile Quelle unité ?

Lors de la création de pages Web côté PC, l'unité à laquelle nous sommes tous habitués est

, alors utilisons-nous également cette unité côté mobile ? , vous pouvez le faire. Cependant, il est préférable de ne pas le faire Parce que vous ne savez pas ce qui se passera dans le futur

pxAprès quelques discussions et en vous référant aux solutions actuellement acceptées au niveau international, les unités adoptées sont <.>

Alors, qu'est-ce que rem ? Nous savons tous que

est l'unité de taille par rapport au parent. Alors

est l'abréviation de rem, c'est-à-dire que c'est le. unité relative racine, et son relatif est de em D'accord, alors quelle est la taille par défaut de rem de root-em C'est html. autrement dit, toutes vos dimensions sont basées sur font-size Le résultat d'une opération relative

Après avoir connu cela, nous commençons des calculs complexes. Par exemple, si je veux définir un texte de html, quel pourcentage. doit être utilisé. Vous constaterez que ce calcul est vraiment de la triche. Ah, j'ai fait ça dans la première phase d'un projet mais le calcul était vraiment fatigant font-size16px Alors, nous avons adopté une solution de contournement, et nous. modifié la valeur par défaut 16px pour le html Nous y sommes donc : Écrit

12pxLe monde entier est calme. C'est vraiment pratique de calculer selon cette méthode. , je viens d'écrire 1.2rem.

Mais, j'ai vite réfléchi à ce problème, j'avais l'impression qu'on enlevait notre pantalon et qu'on pétait font-size

Revenons au point de départ, pourquoi on. utiliser

html {font-size: 10px;}

Copier après la connexion

au lieu de

? La raison est simple, nous voulons que la page ne soit pas limitée à

en raison de la particularité de certains appareils. Elle doit s'adapter à divers appareils. 🎜> et nous avons ajouté

comme unité à

, pour que ça ne revienne pas à l'original ? Alors il vaut mieux utiliser

directement, il faut encore écrire deux caractères de moins rempx. Alors, n'y a-t-il pas de solution au problème ? Ou faut-il continuer à revenir au calcul anti-humain px

J'ai rapidement changé d'avis et j'ai changé ce code en

htmlpxAprès ? en le changeant en pourcentage, le problème a été rapidement résolu. De cette façon, le navigateur définira une taille différente. Lorsque la taille du texte par défaut est définie, nos pages peuvent suivre le changement sans être restreintes px

Dans le navigateur Chrome du PC. , le texte minimum par défaut est

Lorsque vous le définissez ainsi, utilisez le développeur Lors du débogage de l'outil, vous trouverez des choses étranges. Par conséquent, vous devez définir le texte minimum du navigateur sur 10 ou 6, généralement défini. à 6, ce qui peut résoudre le problème de débogage côté PC. Ce n'est pas le cas côté mobile. Cette restriction (il existe, mais elle est désactivée par défaut)

Paramètres méta de la page HTML5 mobile.

html {font-size: 62.5%;}

Copier après la connexion

Il y a un article spécial pour cela, vous pouvez le rechercher sur Baidu J'insiste sur un point ici, vous devez ajouter le code suivant .

Largeur de la boîte12px

Certaines personnes, y compris certains frameworks front-end bien connus, ajouteront un tel morceau de code au CSS :

Je ne le recommande personnellement pas car cela détruit le modèle de boîte, bien qu'après avoir ajouté cela, il vous soit pratique d'écrire du code, mais lorsque vous introduisez certaines ressources externes, vous constaterez que vous ne pourrez pas les réajuster une fois déformées. La raison est très simple. Ce code va changer. le modèle de boîte de tous les éléments de la page

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

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

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

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

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

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

Copier après la connexion

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

正确的写法是

box-shadow:0 0 0 1px #ddd

Copier après la connexion

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

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

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

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