Heim > Web-Frontend > HTML-Tutorial > Wie setze ich den Standardstil der mobilen Seite zurück? Welche Methoden gibt es?

Wie setze ich den Standardstil der mobilen Seite zurück? Welche Methoden gibt es?

云罗郡主
Freigeben: 2018-10-29 14:42:43
nach vorne
2246 Leute haben es durchsucht

Wie setze ich den Standardstil der mobilen Seite zurück? Ich glaube, dass viele Freunde, die gerade erst mit mobilen Seiten in Berührung gekommen sind, solche Fragen haben werden. In diesem Kapitel erfahren Sie, wie Sie den Standardstil der mobilen Seite zurücksetzen. Welche Methoden gibt es? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. -webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(0,0,0,0); //Transparenz auf 0 setzen und entfernen it Das standardmäßige graue, durchscheinende Overlay (iOS) oder virtuelle Feld (Android), wenn auf Link- und Textfeldobjekte geklickt wird.

-webkit-tap-highlight-color:rgba (255,0,0,0.5); //Verwenden Sie dieses Attribut, um die Hervorhebung des Linkbereichs beim Berühren auf 50 % transparentes Rot zu setzen, nur bei iOS-Kick-in . Solange dieses Attribut unter Android verwendet wird, wird es als Rahmen angezeigt. Fügen Sie dieses Attribut zum Körper hinzu, um sicherzustellen, dass der Klickbereich des Körpers den gleichen Effekt hat.

2.outline: none

(1) Der Zweck der Definition dieses Stils für das a-Tag auf dem PC besteht darin, die gepunktete Linie zu löschen, die erscheint, wenn im IE auf das a-Tag geklickt wird Browser. Browser ie7 und niedriger erkennen dieses Attribut noch nicht. Sie müssen hidefocus="true"

(2) input, textarea{outline:none} hinzufügen, um den Standard-Textfeld-Fokusstil unter Chrome aufzuheben

(3) Es funktioniert nicht auf dem mobilen Endgerät. Wenn Sie den Standardstil des Textfelds entfernen möchten, können Sie den Standardstil beim Fokussieren aufheben -Farbe. Ich habe einige mobile Reset-Dateien gesehen, die dieses Attribut hinzugefügt haben, aber es ist eigentlich überflüssig.

3.-webkit-appearance

-webkit-appearance: none;//Entfernen Sie das native Erscheinungsbild des Eingabefelds und der Schaltfläche. Nur durch Hinzufügen dieses Attributs können die Schaltfläche und die Eingabe aktiviert werden Box wird automatisch definiert Stil definieren

Verschiedene Eingabetypen verhalten sich nach Verwendung dieses Attributs unterschiedlich. Text und Schaltfläche haben keinen Stil, Radio und Kontrollkästchen verschwinden direkt

4.-webkit-user-select

-webkit-user-select: none // Seitentextauswahl deaktivieren, dieses Attribut nicht Vererbung, im Allgemeinen dem Körper hinzugefügt, legt fest, dass der Text des gesamten Körpers nicht automatisch angepasst wird

5.-webkit-text-size-adjust

-webkit-text- size-adjust: none; // Automatische Größenänderung des Textes deaktivieren (standardmäßig ändert sich die Textgröße, wenn das Gerät gedreht wird). Im Allgemeinen wird es dem Textkörper hinzugefügt Die Größe des gesamten Körpers wird nicht automatisch geändert. gültig unter iOS), sowohl img als auch a-Tags müssen hinzugefügt werden

7.-webkit-overflow-scrolling

-webkit-overflow-scrolling:touch;// Teilweises Scrollen (wird nur unterstützt von iOS 5 oder höher)

Das Obige ist der Standardstil der mobilen Seite Zurücksetzen? Alle Methoden werden vorgestellt. Wenn Sie mehr über das

HTML-Video-Tutorial

erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie setze ich den Standardstil der mobilen Seite zurück? Welche Methoden gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:lvyestudy.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage