移动端1px

简介:
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>像素为1px</title>
        <style type="text/css">
            .border {
                position: relative;
                margin-bottom: 20px;
            }

            .border:after {
                content: '';
                display: block;
                position: absolute;
                width: 100%;
                left: 0px;
                bottom: 0px;
                height: 1px;
                background-color: red;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }

            .border3 {
                width: 100%;
                height: 40px;
                border: 1px solid red;
                margin-bottom: 20px;
            }

            .border2 {
                margin: 50px;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x;
                background-size: 100% 1px;
            }
        </style>
    </head>

    <body>
        <div class="border">像素为1px解决方法一</div>

        <div class="border2">像素为1px解决方法二</div>
        <div class="border3">像素为1px解决方法二</div>
    </body>

</html>
目录
相关文章
|
小程序 JavaScript
微信小程序:px与rpx之间转化
微信小程序:px与rpx之间转化
微信小程序:px与rpx之间转化
|
8月前
|
前端开发 JavaScript
6种解决移动端1px的方案
6种解决移动端1px的方案
108 0
|
4月前
|
前端开发
移动端1px的解决方案
移动端1px的解决方案
41 0
设计稿750px移动端自适应,100px=1rem
设计稿750px移动端自适应,100px=1rem
|
8月前
|
小程序 前端开发 JavaScript
微信小程序 - rpx和px互转,以及系统给的 pixelRatio 值比例不对
微信小程序 - rpx和px互转,以及系统给的 pixelRatio 值比例不对
607 0
|
9月前
|
移动开发 前端开发
|
前端开发
css:移动端实现1px、0.5px的细线
css:移动端实现1px、0.5px的细线
96 0
css:移动端实现1px、0.5px的细线
|
前端开发 JavaScript Android开发
|
前端开发
前端使用postcss-px-to-viewport实现移动端或者PC端自适应
前端使用postcss-px-to-viewport实现移动端或者PC端自适应
1120 0