设计图上的标注要有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-width: 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>

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

1px移动端显示问题的更多相关文章

  1. pc端页面在移动端显示问题

    1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...

  2. 关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结

    关于dl  dt dd 文字过长换行在移动端显示对齐的探讨总结 <dl> <dt>抵押房产:</dt> <dd>1.北京市大兴区兴华大街丽园小区3单大兴 ...

  3. Ubuntu下ssh连接在服务端显示图形界面

    Ubuntu下ssh连接在服务端显示图形界面 step1 安装ssh服务 服务端安装运行ssh,在终端运行命令如下: sudo apt-get install openssh-server 在客户端安 ...

  4. 学习EChart.js（四） 移动端显示

    ECharts.js 移动端显示 现在很多时候,我们是在用手机.pad等一些移动端设备来进行办公获取数据.所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡 ...

  5. checkbox 在移动端显示为小圆圈问题

    在desktop显示正常,但是在移动端显示变为小圆圈,无法正确展示选中取消选中效果问题解决方案: display: block; width: 58px; height: 20px; -webkit- ...

  6. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

  7. 解决poshytip 表单高度大于屏幕高端 显示问题

    Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提示条.信息的内容直接可以在HTML里设定也可以是从服务端调用的数据,该插件还提供了很多属性和方法. ...

  8. 设置UITableView的separatorInset值为UIEdgeInsetsZero，分隔线不最左端显示的问题

    一.问题描述 UITableView分割线要显示到最左端 查看UITableView的属性,发现设置separatorInset的值可以自定义分割线的位置. @property (nonatomic) ...

  9. iOS拍照上传后，在web端显示旋转 Swift＋OC版解决方案

    问题描述: 手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题. 并且照片竖怕才会有此问题,横拍不存在. 原因分析: 手机拍照时,用相机拍摄出来 ...

随机推荐

  1. 【JavaEE】怎么设置tomcat管理员的用户名和密码

    如果我们输入错误的Tomcat管理员密码,那么就有提示如下: 2 从它的提示信息中,我们就能找到解决方法,请留意上图中标出的位置!   我们首先打开Tomcat的配置文件,具体如下:   我们进入To ...

  2. java简单使用netty

    一 整合 由于本人的学过的技术太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的github项目地址 https://github.com/247292980/spri ...

  3. Java学习笔记--类和对象

    1.介绍面向对象的编程          面向对象是现在主流的编程样例,它替代了以前C语言使用时的“结构体”,Java是一门面向对象的语言,所以需要熟悉面向对象的概念.面向对象的程序由很多对象组成,每 ...

  4. mysql存储方式MyISAM 和 InnoDB的区别

    MyISAM 和 InnoDB 讲解: InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级 ...

  5. SpringBoot2.0之三 优雅整合Spring Data JPA

      在我们的实际开发的过程中,无论多复杂的业务逻辑到达持久层都回归到了"增删改查"的基本操作,可能会存在关联多张表的复杂sql,但是对于单表的"增删改查"也是不 ...

  6. spring mvc <mvc;resources>

    spring mvc 的<mvc;resources mapping="***" location="***">标签是在spring3.0.4出现的 ...

  7. Java字节流与字符流的区别详解

    字节流与字符流 先来看一下流的概念: 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入 ...

  8. Tomcat中配置JAVA_HOME

    一般来说我们在使用Tomcat时配置JAVA_HOME都是采用的系统环境变量直接配置,下面我提供一种新的配置思路. 这里我们使用的是免安装版的apache-tomcat-7.0.35,首先我们安装好j ...

  9. iOS核心动画高级技巧之图层变换和专用图层(二)

    iOS核心动画高级技巧之CALayer(一) iOS核心动画高级技巧之图层变换和专用图层(二)iOS核心动画高级技巧之核心动画(三)iOS核心动画高级技巧之性能(四)iOS核心动画高级技巧之动画总结( ...

  10. 线程池模块thernd

    from concurrent.futures import ThreadPoolExecutor,ProcessPoolExecutor import time def task(i): print ...