zoukankan      html  css  js  c++  java
  • 移动webApp 1像素实现(点5像素的秘密)

    在移动web项目中,经常会实现以下1像素的边框

    移动web设计中,在retina显示屏下网页会由1px会被渲染为2px,那么视觉稿中1px的线条还原成网页需要css定义为0.5px

    但是正当我们去用0.5px定于boder的时候发现css的border- 0.5px不起作用,那是不是真的不支持0.5px呢?

    我们在定义0.5px的时候发现的一些问题

    • css的border-width值支持.5px,但是显示状态受屏幕分辨率的影响
    • ios 8和winphone 8的设备对高清屏做了特殊处理,支持显示border-.5px
    • android 几乎所有的机型不支持显示.5px的边框

    实现.5px的线条


    网络上有很多方法,如设置viewport,box-shawdow,border-image,background-image,transform:scale等,这里不做介绍(百度或者谷歌“retina 1px 边框”有答案),本文只介绍一种觉得比较好用的方法,一来兼容性好,二来不依赖图片。

    transform:scale(x,y)

    通过css支持定义border或者height为.5px大的线条,在android设备中的无法显示出来,这里有个小技巧,果设置线条为1px,然后通过transform:scale(x,y)来缩放线条为原来的一半,可显示0.5px的线条。

    <style type="text/css">
    .line {
        height: 50px;
        line-height: 50px;
        background-color: #CCC;
        border-bottom:1px solid red
    } 
        
    .scale {
        position: relative;
        height: 50px;
        line-height: 50px;
        background-color: #CCC
    }
    .scale:after {
        position: absolute;
        content: '';
         100%;
        left: 0;
        bottom: 0;
        height: 1px;
        background-color: red;
        -webkit-transform: scale(1,.5);
        transform: scale(1,.5);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
    </style>
    
    
    <div class="line">1px</div>
    <div class="scale">0.5px</div>
    
    
  • 相关阅读:
    Binary Tree Maximum Path Sum
    ZigZag Conversion
    Longest Common Prefix
    Reverse Linked List II
    Populating Next Right Pointers in Each Node
    Populating Next Right Pointers in Each Node II
    Rotate List
    Path Sum II
    [Leetcode]-- Gray Code
    Subsets II
  • 原文地址:https://www.cnblogs.com/jingxuan/p/7151159.html
Copyright © 2011-2022 走看看