Einführung in die Methode zum Zeichnen von 0,5 Pixeln auf der Front-End-Seite-CSS-Tutorial-php.cn

Einführung in die Methode zum Zeichnen von 0,5 Pixeln auf der Front-End-Seite

巴扎黑

Freigeben： 2017-08-12 15:04:58

Original

1795 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich verschiedene Methoden zum Zeichnen von 0,5 Pixeln im Web-Frontend vorgestellt, die mithilfe von Meta-Viewport, Border-Image, Background-Image und Transform: Scale() implementiert werden. Freunde in Not können darauf verweisen

Kürzlich wurde die vom Unternehmen arrangierte Entwicklung mobiler Web-Touchscreens abgeschlossen, bei der es um die Anzeige von Linien auf Mobilgeräten ging. Zunächst wurde das in PCs übliche CSS-Board-Attribut zur Anzeige von 1-Pixel-Linien verwendet, aber es wurde gefunden dass es auf Mobilgeräten nicht funktionierte. Was die Touchscreens von Taobao und JD.com betrifft, haben wir festgestellt, dass sie alle flache und dünne Linien zur Anzeige auf Mobilgeräten verwenden.

Im Folgenden werden vier weitere praktische Möglichkeiten zum Zeichnen von 0,5-Pixel-Linien aufgeführt

1. Verwenden Sie die Meta-Viewport-Methode, die auch vom Taobao-Touchscreen verwendet wird

Die am häufigsten verwendeten mobilen HTML-Ansichtsfenstereinstellungen sind wie folgt

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Ich werde die spezifische Bedeutung nicht erwähnen. Es geht darum, die Höhe und Breite der Seite der Höhe anzupassen und Breite des Geräts in Pixeln und zur Vereinfachung des Zeichnens 0,5 Die Einstellungen des Pixel-Ansichtsfensters lauten wie folgt

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
Auf diese Weise betragen Breite und Höhe des HTML das Zweifache des Geräts. Wenn die CSS-Karte zu diesem Zeitpunkt noch als 1 Pixel verwendet wird, entsprechen die mit bloßem Auge sichtbaren Seitenlinien einer Transformation: Der Effekt von Scale (0,5) beträgt 0,5 Pixel

Aber diese Methode umfasst die gesamte Layoutplanung der Seite und die Erstellung der Bildgröße. Wenn Sie diese Methode verwenden, ist es daher besser, sie im Voraus zu bestimmen

2. Verwenden Sie die Randbildmethode

Das ist eigentlich relativ einfach. Erstellen Sie einfach ein Bild einer 0,5-Pixel-Linie und der passenden Hintergrundfarbe

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>boardTest</title>
    <style>
            p{
                margin: 50px auto;
                padding: 5px 10px 5px 10px;
                color: red;
                text-align: center;
                width: 60px;
            }
            p:first-child{
                border-bottom: 1px solid red;
            }
            p:last-child{
                border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;
            }
    </style>
<body>
    <p>
        <p>点击1</p>
        <p>点击2</p>
    </p>
</html>

Nach dem Login kopieren

3 Hintergrundbildmethode

Ich verwende hier die lineare Gradientenmethode, der Code lautet wie folgt

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>boardTest</title>
    <style>
            p{
                margin: 50px auto;
                padding: 5px 10px 5px 10px;
                color: red;
                text-align: center;
                width: 60px;
            }
            p:first-child{
                border-bottom: 1px solid red;
            }
            p:last-child{
                background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);
                background-image: linear-gradient(bottom,red 50%,transparent 50%);
                background-size:  100% 1px;
                background-repeat: no-repeat;
                background-position: bottom right;     
    </style>
</head>
<body>
    <p>
        <p>点击1</p>
        <p>点击2</p>
    </p>
</body>
</html>

Nach dem Login kopieren

linear-gradient(bottom,red 50%,transparent 50%);的意思是从底部绘制一个渐变色，颜色为红色，占比为50%，而总宽度已经设置为100%而总高度为一个像素background-size: 100% 1px；Dies wird als 0,5-Pixel-Linie angezeigt

4. Verwenden Sie transform: scale() Die Methode

besteht darin, die Höhe der gezeichneten Linie um die Hälfte zu skalieren . Der Code lautet wie folgt:

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Zeichnen von 0,5 Pixeln auf der Front-End-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!