Maison > Article > interface Web > Introduction à la méthode de dessin de 0,5 pixel sur la page front-end
Introduction à la méthode de dessin de 0,5 pixel sur la page front-end
- 巴扎黑original
- 2017-08-12 15:04:581733parcourir
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 pixel1 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 4fdfe337458e3038d8b35505bf1809e1
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 pixelab78f60ad90ed1bdcb55f160fc5ee64e
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
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
<!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>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>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
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!