移动端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. 常用的SQL

    --时间计算: select GETDATE() ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) --查 ...

  2. java调试打断点和不打断点执行结果不一致问题解决

    java程序在调试的时候需要debug来跟踪一下结果,有一种情况是这样的,正常执行java程序就会出现问题,而断点debug跟踪此方法的时候却是正常的,不断测试结果都是这样,由此判断有可能是因为此方法 ...

  3. php扩展swoole的安装

    这个明星php安装是要装php-pear yum install php-pear 然后通过pear命名安装swoole pecl install swoole 配置php.ini 添加 extens ...

  4. ubuntu更新出错--Could not get lock /var/lib/dpkg/lock

    ubuntu在vps上安装好后,通常第一个命令是更新系统软件.然而在运行的过程中,却出现这样的错误: E: Could not get lock /var/lib/dpkg/lock - open ( ...

  5. centos5.5 快速安装mysql

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

  6. C#多枚举值的写法与读法

    首先,定义枚举的时候必须是2,4,8,16这种2的次方的值. using System; using System.Collections.Generic; using System.Linq; us ...

  7. [svc]expect的爱恨情仇

    背景 openvpn生成证书想把它做成一键化,这样添加新用户时候就方便 遇到的问题 我的代码 gg_vpn_keys.exp #!/usr/bin/expect set user [lindex $a ...

  8. 教程-Delphi中的GExperts搜索代码快捷键

    Shift+Ait+S  打开搜索 Ctrl+Ait+R 打开上次搜索结果

  9. STM32F10x_硬件I2C主从通信(轮询发送,中断接收)

    Ⅰ.写在前面 关注我分享文章的朋友应该知道我在前面讲述过(软件.硬件)I2C主机控制从机EEPROM的例子.在I2C通信主机控制程序是比较常见的一种,可以说在实际项目中,很多应用都会使用到I2C通信. ...

  10. javascript 学习笔记(1)

    一.引入js方法 js引入(内部.外部). 内部方法引入js可以放到html文档的任何地方方法alert();可以弹出一个对话框 二.注意事项 注释: 单行注释 // 多行注释 /*注释内容*/大小写 ...