移动端1px会显示为2px;

解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放

1. 上边框 相当于 border-top

<div class="bordert1px"></div>

css

/*top*/
.bordert1px {
position: relative;
}
.bordert1px:before {
content: " ";
position: absolute;
left:;
top:;
width: 100%;
height: 1px;
background-color: #d8d8d8;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5); // 纵向缩放
}

细线--直接缩放就好了

<hr />

css

hr{background: #d8d8d8;width:1px;height:1rem;border:none;transform: scaleX(0.5);margin:;}

如果使用vux的话,vux也提供了1px解决方案 https://doc.vux.li/zh-CN/css/1px.html

移动端1px细线解决方案--利用transform缩放方式的更多相关文章

  1. 移动端1px细线解决方案总结

    现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...

  2. 移动端1px细线的处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 移动端1px边框解决方案

    在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...

  4. 移动端1px细线问题

    1可以用伪类实现 .con{position: relative;.con:before { content: " "; position: absolute; left: 0; ...

  5. 移动端高清适配方案(解决图片模糊问题、1px细线问题)

    本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...

  6. 移动 web 1px 边框解决方案

    在移动端web页面开发中,为了使css中使用的尺寸与设计稿一致,通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配,在IOS设备上 flexible.js 会根据设备的分辨率动 ...

  7. 移动端1px

    移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配: @media(-webkit-min-device-pixel-r ...

  8. 移动端1px边框实现

    问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...

  9. 移动端web常见问题解决方案

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...

随机推荐

  1. express 设置header解决跨域问题

    //设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...

  2. Spring mvc注解方式使用事务回滚

    项目名:1ma1ma jdbc.xml <bean  id="dataSource" class="org.apache.commons.dbcp.BasicDat ...

  3. hdoj4864 Task (贪心)

    题目来源: 2014 Multi-University Training Contest 1--by FZU 题意:有N个机器和m个工作.机器和工作都有一个时间xi和价值yi,一个工作仅仅有满足xi和 ...

  4. ctags简明用法

    1.安装: sudo apt install ctags 2.生成tags文件: //进入目标目录 ctags -R . 3.在vim中设置tags的绝对目录,这样就可以在任何子目录使用了. :set ...

  5. centos5.5 快速安装mysql

    安装MySQL. [root@sample ~]# yum -y install mysql-server ← 安装MySQL[root@sample ~]# yum -y install php-m ...

  6. 什么是:before和:after?

    前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式.今天主要想在这篇学习笔记中写的也不多,主要是针对:bef ...

  7. 从零开始,跟我一起做jblog项目(二)Maven

    从零开始,跟我一起做jblog项目(一)引言 从零开始,跟我一起做jblog项目(二)Maven maven是一个项目管理工具,尤其适用于JAVA世界 在jblog的开发前期,还没有系统使用过mave ...

  8. linux 无外网情况下安装 mysql

    由于工作需要,需要在一台装有 CentOS 系统的测试服务器上安装 MySQL ,由于该服务器上存有其他比较重要的测试数据,所以不能连接外网.由于之前安装 MySQL 一直都是使用 yum 命令一键搞 ...

  9. H2 Database 支持数据类型

    整数(INT) -2147483648 到 2147483647 java.lang.Integer 布尔型(BOOLEAN) TRUE 和 FALSE java.lang.Boolean 微整数(T ...

  10. C++ new delete操作符

    //new delete操作符 #define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace std; /* 1.n ...