Introduction à la méthode de dessin de 0,5 pixel sur la page front-end-tutoriel CSS-php.cn

Introduction à la méthode de dessin de 0,5 pixel sur la page front-end

巴扎黑

Libérer： 2017-08-12 15:04:58

original

1782 Les gens l'ont consulté

Cet article présente principalement plusieurs méthodes pour dessiner 0,5 pixel sur le front-end Web, qui sont implémentées en utilisant méta viewport, border-image, background-image et transform : scale() Les amis dans le besoin peuvent s'y référer<.>

Récemment terminé le développement d'un écran tactile Web mobile organisé par l'entreprise, qui impliquait l'affichage de lignes sur les appareils mobiles. Au début, l'attribut de tableau CSS couramment utilisé sur les PC était utilisé pour afficher des lignes de 1 pixel, mais il a été trouvé. que cela ne fonctionnait pas sur les appareils mobiles. Ce n'est pas beau. En nous référant aux écrans tactiles de Taobao et de JD.com, nous avons constaté qu'ils utilisent tous des lignes peu profondes et fines pour s'afficher sur les appareils mobiles.

Ce qui suit enregistre quatre façons plus pratiques de tracer des lignes de 0,5 pixel

1 Utilisez la méthode de la méta-vue, qui est également la méthode utilisée par l'écran tactile Taobao Les paramètres de la fenêtre d'affichage HTML mobile couramment utilisés sont les suivants

Je ne mentionnerai pas la signification spécifique. Il s'agit de rendre la hauteur et la largeur de la page égales à la hauteur. et la largeur de l'appareil en pixels, et pour la commodité du dessin 0,5 Les paramètres de la fenêtre d'affichage des pixels sont les suivants <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

De cette façon, la largeur et la hauteur du html sont deux fois supérieures Si le tableau CSS est toujours utilisé à 1 pixel, les lignes de page vues à l'œil nu sont équivalentes à une transformation : l'effet d'échelle (0,5) est de 0,5 pixel<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
Mais cette méthode implique la planification globale de la mise en page. de la page et la production de la taille de l'image, donc si vous utilisez cette méthode, il est préférable de la déterminer à l'avance

2 Utilisez la méthode border-image

C'est en fait relativement simple. Créez simplement une image d'une ligne de 0,5 pixel et sa couleur d'arrière-plan correspondante

En utilisant la méthode de l'image d'arrière-plan

<!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>

Copier après la connexion

3. 🎜>J'utilise ici la méthode du dégradé linéaire, le code est le suivant

<!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>

Copier après la connexion

linear-gradient(bottom,red 50%,transparent 50%);的意思是从底部绘制一个渐变色，颜色为红色，占比为50%，而总宽度已经设置为100%而总高度为一个像素background-size: 100% 1px；C'est affiché sous la forme d'une ligne de 0,5 pixel

4. Utilisez transform: scale() La méthode

consiste à réduire de moitié la hauteur de la ligne tracée. Le code est le suivant. suit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Introduction à la méthode de dessin de 0,5 pixel sur la page front-end