Grundlegende Kenntnisse über mobiles HTML5, die Sie kennen müssen

Nachdem ich zu diesem Unternehmen gekommen bin, gab es eine große Veränderung gegenüber meinem vorherigen Job Nachdem ich zu dieser Firma gekommen bin, habe ich hauptsächlich an mobilen Seiten gearbeitet.

Als jemand, der es gewohnt ist, PC-seitige Seiten zu erstellen Einige Dinge sollten sehr einfach sein. Zu Beginn habe ich jedoch festgestellt, dass die DOM-Struktur des mobilen Endgeräts zwar viel einfacher ist, es aber dennoch viele Details gibt, die beachtet werden müssen , das heißt, Sie müssen alle Unterschiede bei der Anzeige der Auflösung berücksichtigen.

Welche Auflösungen gibt es auf dem mobilen Endgerät?

Nehmen Sie das iPhone als Beispiel, die folgenden Auflösungen sind verfügbar

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

Früher waren die Auflösungen des Android-Lagers unterschiedlich, heute werden sie grundsätzlich in drei Typen unterteilt

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

Das ist eine Illusion. Tatsächlich ist die Auflösung bei der Herstellung von H5-Mobiltelefonen überhaupt nicht so... Die tatsächliche Auflösung im Browser ist

Am Beispiel des iPhone hat es die folgenden Auflösungen:

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

Früher waren die Auflösungen des Android-Lagers unterschiedlich, heute werden sie grundsätzlich in drei Typen unterteilt

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

Ist Ihnen schwindelig, nachdem Sie das gesehen haben ... Es stellt sich heraus, dass Android viel besser ist als Apple ... Haha, es ist wirklich so

Eigentlich, was Wir müssen eine adaptive Webseite erstellen, und die Mindestbreite dieses adaptiven Bereichs beträgt 320 Pixel. Mit anderen Worten, Ihr Code muss sicherstellen, dass er mit einer Breite von 320 Pixeln durchsucht werden kann und nicht gestaucht oder deformiert werden kann

Mobile Nutzung Welche Einheit?

Bei der Erstellung von Webseiten auf der PC-Seite ist die Einheit, die wir alle gewohnt sind, px, also verwenden wir diese Einheit auch auf der mobilen Seite? Sie können dies tun. Es ist jedoch am besten, dies nicht zu tun, da Sie nicht wissen, was in Zukunft passieren wird >

Was ist dann rem? Wir alle wissen, dass

die Abkürzung von rem, also die Wurzel Die relative Einheit ist em. Die Einheit von remroot-em ist also die Standardgröße von html Mit anderen Worten, alle Ihre Dimensionen basieren auf font-size Das Ergebnis der relativen Operation

Nachdem wir dies wissen, beginnen wir mit komplexen Berechnungen. Wenn ich beispielsweise einen Text von html festlegen möchte, wie viel Prozent werden benötigt Sie werden feststellen, dass diese Berechnung wirklich ein Betrug ist. Aber die Berechnung war wirklich ermüdend. font-size16px Also haben wir eine Lösung gefunden die Standardeinstellung 16px für HTML.

12pxEs ist wirklich praktisch, nach dieser Methode zu rechnen. Ich schreibe nur 1,2rem.

Aber ich dachte schnell über dieses Problem nach und hatte das Gefühl, wir würden unsere Hosen ausziehen und furzen. font-size

html {font-size: 10px;}

? Der Grund ist einfach: Wir möchten die Seite aufgrund der Besonderheiten einiger Geräte nicht auf

als Einheit zu

direkt zu verwenden, wir müssen immer noch zwei Zeichen weniger schreiben , gibt es keine Lösung für das Problem? Oder sollten wir weiterhin zur menschenfeindlichen Berechnung zurückkehren? rempxIch habe es mir schnell anders überlegt und diesen Code in px

geändert Auf einen Prozentsatz wurde das Problem schnell gelöst. Wenn die Standardtextgröße festgelegt ist, können unsere Seiten der Änderung folgen, ohne eingeschränkt zu werden. Der Standard-Mindesttext ist html Wenn Sie ihn so festlegen, verwenden Sie den Entwickler. Beim Debuggen des Tools werden Sie einige seltsame Dinge feststellen. Daher müssen Sie den Mindesttext des Browsers auf 10 oder 6 einstellen, im Allgemeinen auf 6, was das Problem des Debuggens auf der PC-Seite lösen kann. Diese Einschränkung ist auf der mobilen Seite nicht der Fall (es gibt sie, sie ist jedoch standardmäßig deaktiviert)pxpxMeta-Einstellungen für mobile HTML5-Seiten

Dafür gibt es einen speziellen Artikel, den Sie auf Baidu durchsuchen können. Ich betone hier einen Punkt, Sie müssen den folgenden Code hinzufügen.

html {font-size: 62.5%;}

Einige Leute, darunter auch einige bekannte Front-End-Frameworks, fügen CSS einen solchen Code hinzu:

12pxIch persönlich empfehle dies jedoch dringend, da es das Box-Modell zerstört Nach dem Hinzufügen ist es für Sie praktisch, Code zu schreiben, aber wenn Sie einige externe Ressourcen einführen, werden Sie feststellen, dass Sie diese nicht mehr anpassen können. Der Grund dafür ist sehr einfach ändert das Boxmodell aller Elemente auf der Seite

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

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

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

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

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

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

使用jquery还是zepot?

为什么使用zepot?

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

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

1. 拥有大量的插件可以使用

2. 功能比zepot强大太多

3. 效能比zepot强大

4. 习惯了jquery

Das obige ist der detaillierte Inhalt vonGrundlegende Wissenspunkte zu mobilem HTML5, die Sie kennen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!