CSS 移动端 1px(线条/边框) 不同机型上显示粗细不同,解决办法

news2024/11/24 8:52:34

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="helang.love@qq.com">
    <title>移动端 1px(线条/边框) 解决方案</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            font-size: 14px;
            color: #333;
            font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
        }
 
        /* 线条 */
        .list{
            margin: 0 20px;
            list-style: none;
            line-height: 42px;
            padding: 0;
        }
        .list>li{
            padding: 0;
            position: relative;
        }
        .list>li:not(:first-child):after{   /* CSS匹配非第一个直接子元素 */
            content: "";
            display: block;
            height: 0;
            border-top: #999 solid 1px;
            width: 100%;
            position: absolute;
            top: 0;
            right: 0;
            transform: scaleY(0.5); /* 将 1px 的线条缩小为原来的 50% */
        }
 
        /* 边框 */
        /* 
            其他作者可能会通过设置4个边的线条凑出边框线的效果,
            这样做不仅代码不够精简,而且调整圆角问题也会非常麻烦
        */
        .button{
            line-height: 42px;
            text-align: center;
            margin: 20px;
            background-color: #f8f8f8;
            position: relative;
            border-radius: 4px;
        }
        .button:after{
            content: "";
            position: absolute;
            top: -50%;
            right: -50%;
            bottom: -50%;
            left: -50%;
            border: 1px solid #999;
            transform: scale(0.5);
            transform-origin: 50% 50% 0;
            box-sizing: border-box;
            border-radius: 8px; /* 尺寸缩小 50%,即圆角半径设置为按钮的2倍 */
        }
    </style>
</head>
<body>
<ul class="list">
    <li>线条 1px</li>
    <li>xxxxxxx</li>
    <li>aaaaaa</li>
</ul>
<div class="button">边框 1px</div>
</body>
</html>

解决方法来源于浪哥博客  respect! 

 CSS 移动端 1px(线条/边框) 解决方案_css 移动端按钮细边框 bottom: -50%;-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1194020.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Git Gui的使用及ssh协议-IEDA使用git

目录 一.Git Gui的使用 二.ssh协议 2.1 什么是ssh key 2.2 配置用户名和邮箱&#xff08;如果已经配置&#xff0c;就跳过&#xff09; 2.3 生成(或删除)秘钥 ​编辑 2.4 远程仓库绑定公钥 三.IEDA使用git 3.1 idea配置Git 3.2 项目上传Git 3.3 演示 一.Git Gu…

使用Java语言实现基本RS触发器

使用Java语言实现计算机程序来模拟基本RS触发器的工作过程&#xff0c;通过本账号2023年10月17日所发布博客“使用Java语言实现数字电路模拟器”中模拟基本逻辑门组成半加器电路的方法来模拟基本触发器的组成和时间延迟。 1 基本RS触发器电路结构 基本RS触发器&#xff08;又…

【入门Flink】- 08Flink时间语义和窗口概念

Flink-Windows 是将无限数据切割成有限的“数据块”进行处理&#xff0c;这就是所谓的“窗口”&#xff08;Window&#xff09;。 注意&#xff1a;Flink 中窗口并不是静态准备好的&#xff0c;而是动态创建——当有落在这个窗口区间范围的数据达到时&#xff0c;才创建对应的窗…

BI 数据可视化平台建设(1)—交叉表组件演变实战

作者&#xff1a;vivo 互联网大数据团队 - Zhu Jianchen 本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第1篇 - 交叉表组件。 交叉表在数据分析里应用广泛&#xff0c;通过本文&#xff0c;你将了解到&#xff1a; 交叉表的基本概念&#xff0c;以及BI可视化平…

canal实操应用

一、MySQL的binlog日志 1.1、binlog的分类 binlog一般分为三类&#xff1a;statement语句级&#xff0c;记录一条一条的SQL&#xff0c;一条SQL可能更改多行&#xff0c;且SQL语句中如果用到now()函数或者random()函数&#xff0c;会存在数据不一致的问题。row行级&#xff0…

大容量疯了!居然想把磁带放到硬盘,100TB+是否可以实现?

1.引言 上一篇关于大容量硬盘的文章&#xff08;HDD最后的冲刺&#xff1a;大容量硬盘的奋力一搏&#xff09;中&#xff0c;我们针对大容量硬盘研发状态&#xff0c;小编最近又有了新发现。WDC希望可以通过HDD和磁带结合&#xff0c;把盘的容量提升到100TB。 2.数据大爆炸的…

C# Socket通信从入门到精通(7)——单个异步TCP服务器监听单个客户端C#代码实现

前言: 我们在开发TCP服务器程序的时候,有的时候需要一些异步的应用,比如我读取客户端发送的数据,但是服务器程序不能一直等待客户端数据发送过来,服务器要先做一些别的事情,这个时候C# Socket通信从入门到精通(5)——单个同步TCP服务器监听一个客户端C#代码实现这篇文…

低代码平台受欢迎度排行榜:揭秘市场热门之选

对于企业而言&#xff0c;低代码平台不仅仅是一个开发工具&#xff0c;它更是一个加速器&#xff0c;推动了企业的数字化转型进程。传统的开发模式下&#xff0c;业务部门与IT部门之间常常存在沟通障碍&#xff0c;导致需求难以实现或实现速度缓慢。而低代码平台打破了这种障碍…

C++学习贴---C++预处理器

文章目录 前言预处理器#define预处理条件编译#ifdef#ifndef#if、#elif、#else 和 #endif #和##运算符 预定义宏 前言 预处理器 预处理器是指一些指示编译器在实际编译之前所需要完成的指令。 预处理器负责处理以**井号&#xff08;#&#xff09;**开头的预处理指令&#xff0…

为啥$p(w|D)=p(y|X,w)$?

为啥 p ( w ∣ D ) p ( y ∣ X , w ) p(w|D)p(y|X,w) p(w∣D)p(y∣X,w)&#xff1f; p ( w ∣ X , y ) p ( w ∣ D ) p(w|X,y)p(w|D) p(w∣X,y)p(w∣D), p ( w ∣ D ) p ( D , w ) / p ( D ) p(w|D)p(D,w)/p(D) p(w∣D)p(D,w)/p(D)为啥 p ( D ∣ w ) p ( y ∣ X , w ) p(D|…

PLC开放式以太网通信网络状态查看工具netstat

在进行PLC的开放式以太网通信时,为了查看网络状态我们可以利用ping这个强有力的工具,还可以使用netstat这个工具。 博途PLC开放式以太网通信 UDP通信 博途PLC 1200/1500PLC开放式以太网通信TSEND_C通信(UDP)_RXXW_Dor的博客-CSDN博客文章浏览阅读1.7k次。开放式TSEND_C通信…

大数据毕业设计选题推荐-污水处理大数据平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

【Java】记一次服务内实现排队消费模式

主要是记录一下实现过程和实现的过程中遇到的坑。 我的业务 系统中有一个接口&#xff0c;是从大数据那边拉数据&#xff0c;之前的做法是&#xff0c;开个线程池&#xff0c;让SQL去执行&#xff0c;可是如果大量的慢SQL同时&#xff0c;请求数据库的话会适得其反。并且还有…

Python语法基础(字符串 列表 元组 字典 集合)

目录 字符串(str)字符串的创建特殊情况字符串的转义字符字符串的运算符字符串常用方法求字符串长度去掉多余空格是否包含某子串分割字符串合并字符串替换字符串统计统计字符串出现的次数 练习&#xff1a;判断字符串是否为回文串 列表(list)列表的创建列表常用方法遍历列表列表…

小程序如何设置下单提示语句

下单提示会展示在购物车和提交订单页面&#xff0c;它可以帮助商家告知客户事项&#xff0c;提高用户体验和减少错误操作。例如提示&#xff1a;商品是否包邮、某些区域是否发货、商品送达时间等等。 在小程序管理员后台->配送设置处&#xff0c;填写下单提示。在设置下单提…

基于ssm的高校失物招领管理系统

基于ssm的高校失物招领管理系统 摘要 失物招领管理系统是一种利用现代信息技术&#xff0c;为高校提供高效、便捷的失物招领服务的平台。本系统基于SSM框架&#xff08;Spring SpringMVC MyBatis&#xff09;&#xff0c;充分利用了各框架的优势&#xff0c;实现了系统的稳定…

1.微服务与SpringCloud

微服务和SpringCloud 文章目录 微服务和SpringCloud1.什么是微服务2.SpringCloud3. 微服务 VS SpringCloud4. SpringCloud 组件5.参考文档6.版本要求 1.什么是微服务 微服务是将一个大型的、单一的应用程序拆分成多个小型服务&#xff0c;每个服务实现特定的业务功能&#xff…

C#上位机序列10: Winform上位机通用框架

C#上位机序列1: 多线程&#xff08;线程同步&#xff0c;事件触发&#xff0c;信号量&#xff0c;互斥锁&#xff0c;共享内存&#xff0c;消息队列&#xff09; C#上位机序列2: 同步异步(async、await) C#上位机序列3: 流程控制&#xff08;串行&#xff0c;并行&#xff0c…

防火防盗防小人 使用 Jasypt 库来加密配置文件

⚔️ 项目配置信息存放在哪&#xff1f; 在日常开发工作中&#xff0c;我们经常需要使用到各种敏感配置&#xff0c;如数据库密码、各厂商的 SecretId、SecretKey 等敏感信息。 通常情况下&#xff0c;我们会将这些敏感信息明文放到配置文件中&#xff0c;或者放到配置中心中。…

原厂监视综合控制继电器 ZZS-7/1 AC220V 凸出端子固定安装

ZZS-7/11分闸、合闸、电源监视综合控制装置&#xff1b; ZZS-7/12分闸、合闸、电源监视综合控制装置&#xff1b; ZZS-7/13分闸、合闸、电源监视综合控制装置&#xff1b; ZZS-7/14分闸、合闸、电源监视综合控制装置&#xff1b; ZZS-7/102分闸、合闸、电源监视综合控制装置…