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-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移动端显示问题的更多相关文章
- pc端页面在移动端显示问题
1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...
- 关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结
关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结 <dl> <dt>抵押房产:</dt> <dd>1.北京市大兴区兴华大街丽园小区3单大兴 ...
- Ubuntu下ssh连接在服务端显示图形界面
Ubuntu下ssh连接在服务端显示图形界面 step1 安装ssh服务 服务端安装运行ssh,在终端运行命令如下: sudo apt-get install openssh-server 在客户端安 ...
- 学习EChart.js(四) 移动端显示
ECharts.js 移动端显示 现在很多时候,我们是在用手机.pad等一些移动端设备来进行办公获取数据.所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡 ...
- checkbox 在移动端显示为小圆圈问题
在desktop显示正常,但是在移动端显示变为小圆圈,无法正确展示选中取消选中效果问题解决方案: display: block; width: 58px; height: 20px; -webkit- ...
- 自动PC端显示 手机端隐藏CSS代码判断实现
实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...
- 解决poshytip 表单高度大于屏幕高端 显示问题
Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提示条.信息的内容直接可以在HTML里设定也可以是从服务端调用的数据,该插件还提供了很多属性和方法. ...
- 设置UITableView的separatorInset值为UIEdgeInsetsZero,分隔线不最左端显示的问题
一.问题描述 UITableView分割线要显示到最左端 查看UITableView的属性,发现设置separatorInset的值可以自定义分割线的位置. @property (nonatomic) ...
- iOS拍照上传后,在web端显示旋转 Swift+OC版解决方案
问题描述: 手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题. 并且照片竖怕才会有此问题,横拍不存在. 原因分析: 手机拍照时,用相机拍摄出来 ...
随机推荐
- 小小粉丝度度熊 二分答案 + two pointer
http://acm.hdu.edu.cn/showproblem.php?pid=6119 发现自己的two pointer能力超弱. 这题是合并时间后,二分答案. 可以知道对于每个时间区间,合法的 ...
- E. Beautiful Subarrays 字典树
http://codeforces.com/contest/665/problem/E 给定一个序列,问其中有多少个区间,所有数字异或起来 >= k 看到异或,就应该想到异或的性质,A^B^B ...
- 【密码学】DES、3DES
文章1: 这一篇文章要解决数据加密——数据补位的问题.DES算法的两种模式ECB和CBC问题以及更加安全的算法——3DES算法. 一.数据补位 DES数据加解密就是将数据按照8个字节一段进行DES加密 ...
- Docker | 第七章:Docker Compose服务编排介绍及使用
前言 前面章节,我们学习了如何构建自己的镜像文件,如何保存自己的镜像文件.大多都是一个镜像启动.当一个系统需要多个子系统进行配合时,若每个子系统也就是镜像需要一个个手动启动和停止的话,那估计实施人员也 ...
- spring运用的设计模式
1.代理模式(典型的aop) 2.工厂模式(beanFactory) 3.观察者模式(ApplicationContextEvent && ApplicationContextList ...
- 添加SAP_ALL权限
更新usr04,ust04,usrbf2这三张表 REPORT ZTESTCREATEUSER. data: l_USR04 LIKE USR04 , l_UST04 LIKE UST04 , l_P ...
- Python之HTML的解析(网页抓取一)
http://blog.csdn.net/my2010sam/article/details/14526223 --------------------- 对html的解析是网页抓取的基础,分析抓取的 ...
- cms-写帖子内容实现
写帖子后台: mapper: <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperP ...
- 微软高性能缓存AppFabric(二)使用
原文链接:http://www.cnblogs.com/Qbit/p/6102614.html 从AppFabric 的安装目录中选择两个dll添加到项目中, 默认安装位置:C:\Program Fi ...
- linux 命令——61 wget(转)
Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...