zoukankan      html  css  js  c++  java
  • 在移动端画出真正的1px边框

    一、问题  

        写H5的样式时候,设置元素的边框为1px,不幸的事情在IOS设备上发生了,设计师会说,咦,边框怎么那么大,这是2px了吧?改成1px。我明明设置成1px了啊。

    二、为什么边框变粗了?

      IOS使用的是retina屏,因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px。所系css设置1px的样式,实际是2px的效果。
    devicePixelRatio的官方定义:”设备物理像素和设备独立像素的比例,也就是devicePixelRatio = 物理像素 / 独立像素。”

    获取devicePixelRatio方法: 

      在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的devicePixelRatio。而在CSS中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同devicePixelRatio的设备,做一些样式适配。

      要真正理解为什么retina屏有这样的特性,首先要涉及一些基本概念,viewport、物理像素(physical pixel)、设备独立像素(density-independent pixel)、CSS像素、屏幕密度、设备 素比(device pixel ratio),具体原因可以看《使用Flexible实现手淘H5页面的终端适配 》。

    三、画出真正的1px边框

    1、使用viewport 加 rem

    目前我们H5也是采用的是手淘的Flexible解决方案来适配不同的终端。根据设计稿结合less使用rem作
    为单位,基本上能完成一般终端的设配。后面遇到一个问题,当设计稿给出的元素边框为1~2px的
    时候,一开始直接转换成rem,后来在某些设备上,元素根本没有显示边框。解决的方案一般是, 针对1px的边框,直接使用1px作为单位就好了。

    2、0.5px?

    在IOS8以上可以使用,以下就不可以了。可以用js去判断是否支持0.5px的边框,不可以继续找其他方法?麻烦。

    3、trasform:scale(0.5);

    //html
    <p></p>
    
    //css 单边框
    div{
    	height:1px;
    	-webkit-transform: scaleY(0.5);
    	-webkit-transform-origin:0 0;
    	overflow: hidden;
    	background: #000;
    }
    
    //多边框
    
    div{
      position: relative;
    }
    div:after{
      content:"";
      position: absolute;
      bottom:0px;
      left:0px;
      right:0px;
      border-bottom:1px solid #000;
      -webkit-transform:scaleY(.5);
      -webkit-transform-origin:0 0;
    }

    vux这个ui库就是使用这个方法

    4、box-shadow 

    -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

    很明显这种,颜色不好控制啊。  

    5、background-image

    利用渐变 linear-gradient   (50%有颜色,50%透明);这方法也是醉醉的。

    如果h5采用看手淘的flexible,那么推荐使用方法1;

    如果没有,建议使用方法3;

  • 相关阅读:
    Hard Rock
    Codeforces Round #416 (Div. 2) B. Vladik and Complicated Book
    codeforces 793B. Igor and his way to work
    codeforces 1B Spreadsheets
    HDU 1069 Monkey and Banana
    codeforces 2B The least round way
    【机器学习】 通俗说拟合
    python-八皇后问题
    python-核心知识思维导图
    python-@property 属性
  • 原文地址:https://www.cnblogs.com/leaf930814/p/6986983.html
Copyright © 2011-2022 走看看