zoukankan      html  css  js  c++  java
  • 1px移动端显示问题

    设计图上的标注要有1px的线条,css本来以为直接写个1px就能万事大吉了,手机上怎么看都很粗。

    至于具体为什么会这样,百度看了一圈,有点懵懵懂懂,大概就是物理分辨率高于实际网页的像素分辨率的原因吧。

    试过了几种办法:

    1. 阴影设置RGBA

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charset="utf-8" />
        <style type="text/css">
            .page {
                max-width: 750px;
                margin: 0 auto;
                padding: 0;
            }
    
            #testLine {
                height: 100px;
                width: 100px;
                -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
                -ms-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div id="testLine">
    
        </div>
    
    
    </body>
    </html>

    圆角支持,手机上效果不错,线条看起来没那么粗,也挺和谐的,缺点颜色不好调。

    2.渐变

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charset="utf-8" />
        <style type="text/css">
            .page {
                max- 750px;
                margin: 0 auto;
                padding: 0;
            }
    
            #testLine {
                background-image: -webkit-linear-gradient(#000 50%,transparent 50%);
                background-image: linear-gradient(#000 50%,transparent 50%);
                background-size: 100% 1px;
                background-repeat: no-repeat;
                background-position: bottom;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="testLine">
    
        </div>
    
    
    </body>
    </html>
    

    这种划线颜色是支持最好的,基本可以调整到设计的颜色要求,但是圆角呢,感觉有点困难,因为当前的项目只需要画个直线,所以采用了这个

  • 相关阅读:
    BPM平台在企业业务系统中使用的价值讨论
    零售餐饮行业的信息化建设
    LINQ 与Oracle应用 :转帖
    k2之于.NET流程应用开发者
    利用xslt导出复杂样式的excel,支持多个worksheet
    利用偏移量快速定位数据内容
    简单天气项目中观察者模式解析
    作业3:基于墨刀的:视频剪辑软件原型设计
    必做作业2:视频剪辑软件调研
    .Net Core项目依赖项问题
  • 原文地址:https://www.cnblogs.com/stealth7/p/6394803.html
Copyright © 2011-2022 走看看