zoukankan      html  css  js  c++  java
  • (原)移动端的 .5 像素

    更新于20170623

    前言

    最近在写一个移动项目,然后我自己发现了纠结了好久的关于border-width 的问题。起初我跟大部分前端一样认为,0.5 的 border-width 浏览器不支持。

    然后我还发现 css: border-width= 1px 时,不同的手机显示出来的远远不止 1px ,有时候甚至有 2px ~ 3px

    偶尔有一天看到 白树的博客,才恍然大悟,让我更加重视了有疑虑疑惑马上查阅的习惯。

    所以,以下,整理了白树的博客,写成了方便我自己以后使用和阅读的博客。

    1、web移动项目中,在retina显示屏下网页会由1px 会被渲染成 2px 甚至 3px(例如 iphone 6 plus)。所以视觉设计稿中 1px 的border-width 还原成网页需要写成 .5px

     

    2、其实在PC端 .5px 是可以被支持的,只需要把浏览器分辨率放大到 200% ,即可看到。所以,css: border-width =1 px 是可以被支持的。只是:

      2-1: ios8+ 和 winphone 对高清屏做了特殊处理,所以能看到 .5px 。

      2-1: android 几乎所有机型都不支持 .5px 边框(但是我最近测试 MI 6 android 7.0可以显示)

     

    3、借用白树的测试图表

     

     

    4、使用方法:

    .btn {
        position: relative;
        width: 200px;
        height: 42px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align: center;
        line-height: 42px;
        background-color: #EDEDED;
    }
    .btn:before {
        content: '';
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        border-style: solid;
        border-width: 1px;
        border-color: red;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }

    以上。

  • 相关阅读:
    Leetcode-Daily: Jewels and Stones
    Spark专题(二):Hadoop Shuffle VS Spark Shuffle
    Spark专题(一):Spark工作原理图
    我司建立图书借阅的一点思考
    机器学习的分类方法——逻辑回归
    机器学习的分类算法——集成学习
    浅谈对离散型随机变量期望的理解
    sklearn学习:make_multilabel_classification——多标签数据集方法
    外星人在阴间修仙
    RabbitMQ
  • 原文地址:https://www.cnblogs.com/microhuu/p/7068739.html
Copyright © 2011-2022 走看看