프런트 엔드 페이지에 0.5픽셀을 그리는 방법 소개-CSS 튜토리얼-php.cn

프런트 엔드 페이지에 0.5픽셀을 그리는 방법 소개

巴扎黑

풀어 주다： 2017-08-12 15:04:58

원래의

1816명이 탐색했습니다.

이 글에서는 주로 웹 프런트엔드에서 0.5픽셀을 그리는 여러 가지 방법을 소개하는데, 이는 메타 뷰포트, 테두리 이미지, 배경 이미지 및 변환: scale()을 사용하여 구현됩니다. 완료 회사에서 주선한 모바일 웹 터치스크린 개발 과정에서 모바일 기기에 선을 표시하는 작업이 있었습니다. 처음에는 PC에서 흔히 사용하는 CSS 보드 속성을 사용하여 1픽셀 선을 표시했지만 보기에 좋지 않은 것으로 나타났습니다. 모바일 장치에서 Taobao를 참조하면 JD.com의 터치 스크린은 모두 모바일 장치에 표시하기 위해 얕고 얇은 선을 사용하는 것으로 나타났습니다.

　다음은 0.5픽셀 선을 그리는 좀 더 편리한 네 가지 방법에 대한 기록입니다

1. 타오바오 터치스크린에서도 사용하는 방식인 메타 뷰포트 방식을 사용하세요

일반적으로 사용되는 모바일 HTML 뷰포트 설정은 다음과 같습니다. Follows

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

구체적인 내용은 언급하지 않겠습니다. 즉, 페이지를 높게 만드는 것입니다. 너비는 장치의 높이와 너비 픽셀로 0.5픽셀 뷰포트를 쉽게 그릴 수 있도록 다음과 같이 설정합니다

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
具体意思就不多提，它就是让页面的高宽度即为设备的高宽像素，而为了方便绘制0.5像素的viewport的设置如下

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
这样html的宽高就是设备的2倍，此时依然使用css board为1像素的话，肉眼看到页面线条就相当于transform:scale(0.5)的效果，即为0.5像素

但是这种方式涉及到页面整体布局规划以及图片大小的制作，所以若采用这个方式还是事先确定为好

二、采用 border-image的方式

这个其实就比较简单了，直接制作一个0.5像素的线条和其搭配使用的背景色的图片即可

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

로그인 후 복사

三、采用background-image的方式

我这里采用的是渐变色linear-gradient的方式，代码如下

<!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；<meta name="viewport" 내용 ="initial-scale=0.5, maximum-scale=0.5, maximum-scale=0.5, user-scalable=no" />

이렇게 하면 html의 너비와 높이가 기기의 두 배가 됩니다. 이때 CSS 보드를 여전히 1픽셀로 사용한다면 페이지 라인은 육안으로 볼 때 변환과 동일합니다. 스케일(0.5)의 효과는 0.5픽셀입니다

그러나 이 방법은 전체 레이아웃 계획과 관련됩니다. 페이지와 이미지 사이즈를 제작하기 때문에 이 방법을 사용한다면 미리 정하는 것이 좋습니다

둘째, 테두리 이미지 방법을 사용하세요

실제로는 비교적 간단합니다. 0.5 크기의 사진을 생성하면 됩니다. 픽셀 라인과 이에 어울리는 배경색

🎜

<!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{
                position: relative;
            }
            p:last-child:after {
                position: absolute;
                content: &#39;&#39;;
                width: 100%;
                left: 0;
                bottom: 0;
                height: 1px;
                background-color: red;
                -webkit-transform: scale(1,0.5);
                transform: scale(1,0.5);
                -webkit-transform-origin: center bottom;
                transform-origin: center bottom
            }
        
    </style>
</head>
<body>
    <p>
        <p>点击1</p>
        <p>点击2</p>
    </p>
</body>
</html>

로그인 후 복사

🎜🎜셋, 배경 이미지 방식을 사용합니다🎜🎜🎜저는 여기서 사용합니다. 그라디언트 색상의 선형 그라데이션 방식입니다🎜🎜🎜🎜rrreee 🎜

linear-gradient(하단,빨간색 50%,투명50%); 아래쪽부터 그라데이션 색상을 그린다는 뜻으로 색상은 빨간색으로 비율은 50%로 전체 너비가 설정되었습니다. 100%로 설정하고 전체 높이는 1픽셀입니다. background-size: 100% 1px;

🎜🎜이것은 0.5픽셀 라인을 표시합니다🎜🎜🎜 4. 변환 사용: scale() 메소드🎜🎜🎜는 높이를 조정하는 것입니다. 코드는 다음과 같습니다🎜🎜🎜🎜rrreee

위 내용은 프런트 엔드 페이지에 0.5픽셀을 그리는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!