Mobile H5 – Lektion 1 CSS

 

1.移动端开发视窗口的添加

 

h5端开发下面这段话是必须配置的

 

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

 

其它相关配置内容如下：

 

width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。

 

2.媒体查询的改进

 

之前在做移动端开发的时候，为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。

 

比如下面的 媒体查询代码

 

html {

    //iphone5

    font-size: 62.5%;

}

@media (max-width: 414px) {

    html {

        //iphone6+

        font-size: 80.85%;

    }

}

@media (max-width: 375px) {

    html {

        //iphone6

        font-size: 73.24%;

    }

}

 

这样做的结果，有两个很明显的缺点。

 

适配屏幕的尺寸不是连续的。

在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。

 

后来参考淘宝移动端页面适配规则，使用 js 获取客户端的宽度，根据设计稿的原型动态的计算font-size 的值。

 

详细的内容请看这里 根据iPhone6设计稿动态计算rem值

 

3.a标签内容语义化

 

大多数时候我们都会给一片区域加上点击跳转的功能。如下图：

 

 

 

很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素，是没有宽和高的。不能够把容器撑开。

 

一种解决办法就是给a 标签设置block 属性。如下：

 

 

   

Es gibt keine Funktionsprobleme. Auf semantischer Ebene ist der obige Code jedoch nicht standardisiert.

Am besten nehmen Sie die folgenden Änderungen vor, damit Ihr HTML-Code nicht zu aufdringlich wird:

4. Legen Sie die maximale und minimale Breite für Ihre eigene Seite fest

Wenn wir rem-Einheiten verwenden und js verwenden, um den Schriftgrößenwert dynamisch zu berechnen, können wir uns stufenlos an die größten und kleinsten Terminalbildschirme anpassen. Wenn der Bildschirm des Benutzers jedoch eine bestimmte Größe überschreitet und weiterhin die h5-Seite angezeigt wird, ist dies für den Benutzer sehr unfreundlich.

Werfen wir einen Blick auf die h5-Seiten von JD.com und Taobao

Wir haben gesehen, dass die maximale und minimale Breite der Seite definiert sind. Dies ermöglicht eine benutzerfreundlichere Darstellung, wenn der Bildschirm eine bestimmte Größe überschreitet (dies ist natürlich nicht erforderlich).

Die maximale und minimale Breite, die ich für meine Produktseite definiere, sind:

{

max-width:640px;

min-width:320px;

}

5. Entfernen Sie a, den Standard-Eingabestil in mobilen Browsern

1. Einen Tag-Hintergrund verbieten

Wenn Sie ein Tag als Schaltfläche auf dem mobilen Endgerät verwenden, wird beim Klicken darauf ein „dunkler“ Hintergrund angezeigt. Die Methode zum Entfernen des Hintergrunds ist wie folgt:

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0); /*Entfernen Sie den blauen Außenrand und den grauen durchscheinenden Hintergrund, wenn auf a, Eingabe und Schaltfläche geklickt wird*/

}

2. Es ist verboten, a lange zu drücken, und die Menüleiste wird angezeigt, wenn Sie lange auf das Tag „img“ drücken.

Bei Verwendung des a-Tags erscheint nach langem Drücken auf dem mobilen Endgerät eine Menüleiste. Zu diesem Zeitpunkt ist die Methode zum Deaktivieren des Aufrufs der Menüleiste wie folgt:

a, img {

-webkit-touch-callout: none; /*Langes Drücken auf Links und Bild-Popup-Menüs deaktivieren*/

}

3. Reibungsloses Scrollen

Körper{

-webkit-overflow-scrolling:touch;

}

6.CSS-Zeichenfolge abschneiden

Schneiden Sie die Zeichenfolge in einer einzelnen Zeile ab. Die Breite der Zeichenfolge muss hier angegeben werden

{

/*Geben Sie die Breite der Zeichenfolge an*/

Breite:300px;

Überlauf: versteckt;

/* Wenn die Zeichenfolge die angegebene Länge überschreitet, wird das Auslassungszeichen angezeigt*/

text-overflow:ellipsis;

Leerzeichen: nowrap;

}

7.calc-bezogene Fragen

Bei der Verwendung von Calc beim Layouten ist ein schwerwiegender Online-Fehler aufgetreten. Später habe ich mich intensiver mit der Verwendung dieses Attributs befasst.

Das Nützliche an Calc ist, dass es zwischen beliebigen Einheiten umrechnen kann. Aber die Browserunterstützung ist nicht sehr gut. Schauen Sie sich den Screenshot „Can I Use“ an:

Und fügen Sie bei der Verwendung das Herstellerpräfix hinzu, um Kompatibilität zu gewährleisten. Es wird jedoch nicht empfohlen, es jetzt zu verwenden, da die Browserunterstützung begrenzt ist.

Beispielcode:

#formbox {

Breite: 130px;

/*Herstellerpräfix hinzufügen, Operatoren ( , -, *, /) müssen auf beiden Seiten Leerzeichen enthalten) */                                      

width: -moz-calc(100% / 6);

width: -webkit-calc(100% / 6);

width: calc(100% / 6);

Rand: 1 Pixel einfarbig schwarz;

Auffüllung: 4px;

}

Ich habe die h5-Seiten von Taobao, Tmall und JD.com studiert und festgestellt, dass dieses Gerät nicht häufig verwendet wird. Dies liegt hauptsächlich an Kompatibilitätsproblemen.

8.Verwendung der Boxgröße

Lösen Sie das Problem der inkonsistenten Leistung des Box-Modells in verschiedenen Browsern. Es wird jedoch weiterhin Kompatibilitätsprobleme geben. Sehen Sie sich die Liste der unterstützten Browser unten an.

Die Box-Sizing-Eigenschaft wird verwendet, um die Art und Weise zu ändern, wie das Standard-CSS-Boxmodell die Höhe und Breite von Elementen berechnet. Dieses Attribut wird verwendet, um das Verhalten von Browsern zu simulieren, die das Standard-Box-Modell nicht ordnungsgemäß unterstützen.

Es hat drei Attributwerte:

Standardwert für Content-Box, Standard-Box-Modell. „width“ und „height“ umfassen nur die Breite und Höhe des Inhalts, nicht die Ränder, den Abstand und die Ränder. Hinweis: Polsterung, Rahmen und Ränder liegen alle außerhalb dieses Rahmens. Wenn beispielsweise .box {width: 350px}; und {border: 10px solid black;} ist, beträgt die tatsächliche im Browser gerenderte Breite 370px;

Breite und Höhe des Polsterfelds umfassen die Polsterung, jedoch keine Ränder und Ränder.

border-box width 与 height 包括内边距与边框，不包括外边距。这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

 

浏览器支持：

 

 

 

9.水平垂直居中的问题

 

可以看之前写定位的一篇文章，末尾有讲到各种定位：【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

 

这里实现一个相对定位和绝对定位配合实现水平垂直居中的样式。看效果：

 

 

 

html 代码如下：

 

       

 

Der CSS-Code lautet wie folgt:

.parent-div{

Breite: 100px;

Höhe: 100px;

Hintergrundfarbe:rot;

position:relative;

}

.child-div{

Breite:50px;

Höhe:50px;

Hintergrundfarbe:#000;

Position: absolut;

margin:auto;

top:0;

links:0;

richtig:0;

unten:0;

}

Absolute Positionierung kann viele Probleme im Layout auf sehr quadratische Weise lösen, aber in den meisten Fällen wird keine absolute Positionierung verwendet, sondern Floating- und andere Methoden. Die absolute Positionierung wird nur verwendet, wenn das DOM-Element vom aktuellen Dokumentfluss getrennt werden muss. Wie zum Beispiel: elastische Schicht, suspendierte Schicht usw.

10. Problem mit der Zeilenhöhe in CSS

Eine sehr wichtige Verwendung der Zeilenhöhe besteht darin, dass unser Text im übergeordneten Element vertikal zentriert wird. Bei der Verwendung werden jedoch auch einige Probleme auftreten.

Sehen wir uns zunächst ein Beispiel an, wie unten gezeigt:

Der Code ist auch sehr einfach, das heißt, wenn die Schriftart, die wir im div definieren, groß ist, sehen wir einige Lücken zwischen der Schriftart und dem übergeordneten Element. Warum ist das so?

Überprüfen wir die Definition der Zeilenhöhe wie folgt:

normale Standardeinstellung. Stellen Sie einen angemessenen Zeilenabstand ein.

Zahl legt eine Zahl fest, die mit der aktuellen Schriftgröße multipliziert wird, um den Zeilenabstand festzulegen.

Länge legt den festen Zeilenabstand fest.

% Prozentualer Zeilenabstand basierend auf der aktuellen Schriftgröße.

inherit gibt an, dass der Wert des Attributs „line-height“ vom übergeordneten Element geerbt werden soll.

Wenn wir also in der obigen Situation möchten, dass unsere Schriftart unseren Container füllt, müssen wir dem übergeordneten Container das Attribut „line-height“ mit einem Wert von 100 % hinzufügen

Der Code und die Wirkung lauten wie folgt:

Warum tritt das oben genannte Problem auf?

Die Differenz zwischen den berechneten Werten für Zeilenhöhe und Schriftgröße (Zeilenabstand) wird in zwei Hälften geteilt und jeweils oben und unten zum Inhalt einer Textzeile addiert.

Damit lässt sich folgende Formel ableiten:

Leerraum = Zeilenhöhe – Schriftgröße

Wenn also der Zeilenhöhenwert auf 100 % eingestellt ist, entspricht der Zeilenhöhenwert der Schriftgröße und der Leerraum beträgt zu diesem Zeitpunkt 0.

11. Verwenden Sie die vertikale Ausrichtung, um die vertikale Mitte des Symbols anzupassen

Oft müssen wir Symbole und Text zusammen verwenden, und sowohl das Symbol als auch der Text müssen vertikal zentriert sein. Wie unten gezeigt:

Wenn Sie eine vertikale Zentrierung des Texts erreichen möchten, ist dies ganz einfach. Verwenden Sie einfach line-height=parent-container-Höhe. Es ist jedoch schwieriger, das Symbol vertikal zu zentrieren.

Unter normalen Umständen sollten unser Text oder angrenzende Container in derselben unteren Zeile wie der Text gehalten werden, wie unten gezeigt:

Offensichtlich können Sie sehen, dass unser Return-Symbol nicht vertikal zentriert ist. Wie sollen wir das Symbol also vertikal zentrieren?

Lassen Sie uns zunächst die Beziehung zwischen mehreren Zeilen herausfinden (das Bild stammt aus dem Internet, bitte informieren Sie uns über etwaige Verstöße):

Auf diese Weise müssen wir das Vertical-Align-Attribut verwenden. Der wichtigste Punkt ist:

Gibt die vertikale Ausrichtung von Inline-Elementen oder Tabellenzellenelementen an

Grundlinie: Richten Sie den Inhalt eines Objekts, das das valign-Attribut unterstützt, an der Grundlinie des übergeordneten Elements

aus

sub: Die Grundlinie des Elements wird an der tiefgestellten Grundlinie des übergeordneten Elements ausgerichtet.

super: Die Grundlinie des Elements wird an der hochgestellten Grundlinie des übergeordneten Elements ausgerichtet.

oben: Der obere Rand des Elements und seiner Nachkommen wird am oberen Rand der gesamten Zeile ausgerichtet.

text-top: Der obere Rand des Elements wird am oberen Rand der Schriftart des übergeordneten Elements ausgerichtet.

Mitte: Die Mittellinie des Elements ist an der Grundlinie des übergeordneten Elements ausgerichtet.

unten: Der untere Teil des Elements und seiner Nachkommen wird am unteren Rand der gesamten Zeile ausgerichtet.

text-bottom: Der untere Rand des Elements wird am unteren Rand der Schriftart des übergeordneten Elements ausgerichtet.

Prozentsatz: Geben Sie den Versatz von der Grundlinie in Prozent an. Kann negativ sein. Der Basiswert für Prozentsätze ist 0 %.

Länge: Verwenden Sie den Längenwert, um den Versatz von der Grundlinie anzugeben. Kann negativ sein. Die Basislinie ist 0 für numerische Werte. (CSS2)

Sehen Sie sich den HTML-Code unten an:

       

       

        我就是标题

Das erste Ergebnis ist so

Wir möchten das unten gezeigte Ergebnis erzielen, wobei das Symbol relativ zur Schriftart auf der rechten Seite zentriert ist:

Zu diesem Zeitpunkt müssen wir das Attribut „Vertical-Alignment“ verwenden und dessen Längenattribut festlegen, d. h. den Versatz unseres Symbols relativ zur Textgrundlinie festlegen.

Es ist einfach, sowohl das Symbol als auch den Text vertikal zu zentrieren, wenn wir Attribute hinzufügen.

{

vertikal-align:15px;

}

Zu diesem Zeitpunkt werden unser Symbol und unsere Schriftart relativ zum übergeordneten Element zentriert.

12. Verwendung des Flex-Box-Modells

Flex wird derzeit auf der PC-Seite nicht gut unterstützt (hauptsächlich, weil es immer noch viele IE8- und 9-Benutzer gibt). In den meisten Fällen verwenden wir das Flex-Layout auf der mobilen Seite. Aber trotzdem wird es viele trügerische Fehler geben.

Lassen Sie uns über einige grundlegende Nutzungserfahrungen sprechen, wann Sie Flex verwenden sollten.

1. Wann das Flex-Attribut verwendet werden soll

Sehen wir uns zunächst ein Produktmodell an, wie unten gezeigt

Die Breite meines linken Artikels und des rechten Artikels ist gleich. Als ich dieses Modell sah, dachte ich als Erstes darüber nach, Flex zu verwenden, um unsere zweispaltige Produktliste gleichmäßig auf den Bildschirmbereich aufzuteilen. Diesmal geschieht dies mit Flex.

Das übergeordnete Element ist wie folgt definiert

{

margin-bottom: .5rem;

Anzeige: Feld;

Anzeige: -webkit-box;

Anzeige: -ms-flexbox;

Anzeige: Flex;

Anzeige: -webkit-flex;

-webkit-flex-flow: row;

-ms-flex-flow: row;

flex-flow: row;

}

2. Herstellerpräfix hinzufügen

Denken Sie bei der Verwendung von Flex unbedingt daran, das Herstellerpräfix hinzuzufügen (derzeit gibt es drei Möglichkeiten, es zu schreiben: 1, alt 2, übermäßig 3, neu). Ansonsten kommt es auf jeden Fall zu Kompatibilitätsproblemen.

{

Anzeige: -webkit-box;

Anzeige: -ms-flexbox;

Anzeige: Flex;

Anzeige: -webkit-flex;

}

3. Kompatibilität mit Browsern mit geringerer Flexibilität

Schauen Sie sich zuerst meinen Code an:

{

Box-Flex: 1;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

Breite: 18,5rem;

}

Hier lassen wir einfach die linke und rechte Seite gleichmäßig die Breite des Bildschirms aufteilen.

Bei der Verwendung von Flex auf einem Android 4.3-Telefon ist ein Problem aufgetreten. Eine normale Seite sollte wie im Bild unten aussehen,

Aber auf einem Android 4.3-Telefon ist das Ergebnis wie folgt

Später habe ich die Tmall-Seite studiert (weil ich diesen Flex zuvor durch Bezugnahme auf Tmall gelernt habe) und festgestellt, dass sie bei der Definition des Flex-Werts ein solches Attribut width=0;

haben

Und als ich dieses Attribut zu meiner Seite hinzufügte, wurde das Layout der Seite normal. Ich kann jetzt nicht herausfinden, was bereit ist, ich kann es nur als Hack verwenden. Wenn dieses Problem auch bei Ihnen auftritt, versuchen Sie bitte, dieses Attribut hinzuzufügen. Wenn jemand weiß, warum es auf diese Weise verwendet wird, klären Sie mich bitte auf.

13. Probleme mit der CSS3-Animationsleistung

Ich möchte eine Website empfehlen (hier klicken), die erkennen kann, ob die CSS-Attribute, die wir normalerweise zum Ändern des Elementstils verwenden, von der CPU oder der GPU ausgelöst werden, insbesondere wenn Sie Animationen zum Rendern verwenden Grafiken können Sie den CPU-Verbrauch reduzieren und die Programmleistung verbessern.

Wenn wir beispielsweise eine Schieberegleranimation erstellen, um die Bildposition zu ändern, verwenden wir das Attribut „margin-left“ und fragen den Attributwert über die Website ab und erhalten die folgenden Ergebnisse

Wie Sie oben sehen können, wird die Verwendung von margin-left das Neuzeichnen und Umfließen der Seite bestrafen.

Aber welche Auswirkungen wird es auf die Seite haben, wenn wir das neue CSS3-Attribut transform anstelle des herkömmlichen margin-left verwenden, um die Position des Elements zu ändern? Schauen wir uns zunächst die Ergebnisse der Website-Abfrage an:

Aus den Abfrageergebnissen können wir erkennen, dass die Verwendung von „transform“ kein Neuzeichnen auslöst. Und es wird die GPU dazu veranlassen, beim Seitenlayout zu helfen. Das heißt, GPU-Operationen zum Rendern von Animationen zu verwenden, den CPU-Verbrauch zu reduzieren und die Leistung zu verbessern.

Ein einfaches Beispiel für eine CSS-Animation. Der CSS-Code lautet wie folgt:

.lottery-animation {

-webkit-animation: lottery-red 2s;

Animation: Lotterie-Rot 2s;

-webkit-animation-iteration-count: unendlich;

Animationsiterationsanzahl: unendlich;

}

@-webkit-keyframes lottery-red {

von {

-webkit-transform: rotationY(0deg);

transformieren: rotationY(0deg);

}

bis {

-webkit-transform: rotationY(360deg);

transformieren: rotationY(360deg);

}

}

@keyframes lottery-red {

von {

-webkit-transform: rotationY(0deg);

transformieren: rotationY(0deg);

}

bis {

-webkit-transform: rotationY(360deg);

transformieren: rotationY(360deg);

}

}

Der Effekt ist wie folgt:

Hier habe ich gerade eine Klasse="lottery-animation"

zum Bild-Tag hinzugefügt

Ich habe ein Problem mit der Software, die dynamische Bilder aufnimmt. Die Animation meines GIF-Screenshots ist etwas hängengeblieben und nicht flüssig. Auf einem normalen Computer gibt es kein Problem (wenn Sie eine nützliche GIF-Screenshot-Software für Mac haben, können Sie sie mir empfehlen, danke!).