zoukankan      html  css  js  c++  java
  • 1像素边框

    公司的设计师在做设计图的时候都是以iphone6(宽为750物理像素)为基准进行设计的。iphone6的设备像素比(即css像素与物理像素的比例)是2,所以设计师在设计图画了边框为1px的box的时候,相对于css代码来说就是0.5像素。

     

    设计师的设计稿是375*2和667*2这样作图

    对于这个问题,最直观的方法就是css直接设置边框为0.5px,经过测试,iPhone可以正常显示,android下几乎所有的浏览器都会把0.5识别为0,即无边框状态,所以这种方式行不通

     CSS3有缩放的属性,我们可以利用这个属性,缩小50%的1px的边框,来实现这个功能,具体实现代码如下:

     1   .border {
     2     position: relative;
     3   }
     4   
     5   .border::before {
     6     content: '';
     7     font-size: 0;
     8     position: absolute;
     9     left: 0;
    10     top: 0;
    11     display: block;
    12     width: 100%;
    13     height: 100%;
    14     border: 1px solid #000;
    15     transform-origin: 0 0;
    16     box-sizing: border-box;
    17   }
    18 
    19   @media (min-resolution: 2dppx) {
    20     .border::before{
    21        200%;
    22       height: 200%;
    23       transform: scale(.5);
    24     }
    25   }
    26 
    27   @media (min-resolution: 3dppx) {
    28     .border::before{
    29        300%;
    30       height: 300%;
    31       transform: scale(.33);
    32     }
    33   }

    这段代码使用了媒体查询判断设备像素比是2还是3,然后再进行设置,应为通常使用的手机就是2倍或3倍,当然有4倍和5倍等等,这些设备比较少。。

    <resolution>

    表示分辨率(表示设备的像素密度),单位dppx表示每个px的点数,如果设置3dppx则表示3个CSS像素宽度是1个物理像素宽度(即css像素与物理像素的比例是3)

    @media (min-resolution: 3dppx) {}

    更多内容查看MDN

  • 相关阅读:
    Pandas学习整理与实践
    数据描述性统计整理
    关于购置硬盘的相关注意点
    福大软工 · 最终作业
    福大软工 · 第十二次作业
    Beta冲刺 (7/7)
    Beta冲刺 (6/7)
    深度剖析Vue中父给子、子给父、兄弟之间传值!
    mysql 增删改插
    前端必学TypeScript之第一弹,st基础类型!
  • 原文地址:https://www.cnblogs.com/wuxianqiang/p/12427882.html
Copyright © 2011-2022 走看看