当前位置： 首页 > news >正文

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

news 2026/4/19 7:21:16

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的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博客

相关文章：

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

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍&#xff0c;1px的边框在devicePixelRatio2的移动显示屏下会显示成2px&#xff0c;所以在高清瓶下看着1px总是感觉变胖了 <!DOCTYPE html> <html lang"en"> <head&g…...

编程日记 2023/11/11 15:23:53

vue3使用vuex的示例(模块化功能)

目录 1. store/index.ts 2. main.ts 3. App.vue调用 4. 如果删除moduleA的namespaced属性, 保留moduleB的namespaced:true 5. 则App.vue修改为: 1. store/index.ts 注意: 需要使用时带上模块名称的namespaced必须为true, 不写或者为false时调用时不需要写模块名称(获取st…...

编程日记 2023/11/11 15:22:51

Vatee万腾的科技决策力奇迹：Vatee科技决策力的独特之选

在金融投资的复杂领域中&#xff0c;Vatee万腾以其独特的科技决策力创造了一场真正的奇迹。这不仅是一种引领投资者走向成功的选择&#xff0c;更是一种开启新时代的科技决策奇迹。 Vatee的科技决策力背后蕴藏着强大的智慧和创新。通过大数据分析、智能算法的运用&#xff0c;V…...

编程日记 2023/11/11 15:21:51

ai技术是怎么换脸的，实现原理是什么，有那些软件

人工智能&#xff08;AI&#xff09;在近年来的迅猛发展中&#xff0c;带来了许多令人惊叹的技术创新&#xff0c;其中之一就是人工智能换脸技术。这项技术通过深度学习和图像处理的手段&#xff0c;使得用户可以将自己的面孔替换成其他人物&#xff0c;引发了广泛的讨论和应用…...

编程日记 2023/11/11 15:20:50

在IDEA中使用maven项目总结

一 什么是maven Maven本身也是Java写的&#xff0c;他是一款服务于Java平台的自动化构建工具 Maven是一个项目管理工具&#xff0c;旨在简化软件项目的构建、依赖管理和项目信息管理。它使用基于项目对象模型&#xff08;Project Object Model&#xff0c;POM&#xff09;的…...

编程日记 2023/11/11 15:19:49

oracle备份一个表需要做的操作

在 Oracle 中备份一个表可以通过以下步骤完成&#xff0c;包括备份表结构&#xff08;DDL&#xff09;和备份表数据&#xff08;DML&#xff09;&#xff1a; 备份表结构&#xff08;DDL&#xff09;&#xff1a; 使用 CREATE TABLE AS SELECT&#xff1a; 创建一个新表&#…...

编程日记 2023/11/11 15:18:48

C 语言 switch 语句

C 语言 switch 语句 在本教程中&#xff0c;您将通过一个示例学习在C语言编程中创建switch语句。 switch语句使我们可以执行许多代替方案中的一个代码块。 虽然您可以使用if…else…if阶梯执行相同的操作。但是&#xff0c;switch语句的语法更容易读写。 switch … case的语…...

编程日记 2023/11/11 15:17:47

架构师：构建高可用服务治理Consul集群与Kong网关管理

1、简述 在微服务架构中，高可用性和服务治理是非常重要的方面。Consul作为一个开源的服务发现和配置工具，可以帮助我们实现高可用服务治理。Kong是一个用于管理 API 网关的工具，它可以提供强大的流量控制和安全功能。本文将介绍如何构建一个高可用的Consul集群，并结合Kong…...

编程日记 2023/11/11 15:16:46

elemenui的Upload上传整合成数组对象

1. 普通直接上传 <el-upload action"" :before-upload"doBeforeUpload"><el-button type"success" size"mini">导入</el-button></el-upload> methods:{doBeforeUpload(file) {let reader new FileReader(…...

编程日记 2023/11/11 15:15:45

莫桑比克市场开发攻略，收藏一篇就够了

中国与莫桑比克之间的经贸关系源远流长&#xff0c;两国之间的贸易和投资合作呈现出快速增长的趋势。莫桑比克是农业国&#xff0c;生产以及生活资料依赖进口&#xff0c;市场潜力还是非常不错的&#xff0c;今天就给大家分享一下。文章略长&#xff0c;大家点赞收藏关注慢慢看…...

编程日记 2023/11/11 15:14:44

go语言学习

1、示例代码&#xff1a; imgName : g.Cfg().MustGet(ctx, "migrate.img-arm-rbd").String() 在给定的代码行中&#xff0c;g.Cfg() 是一个函数调用&#xff0c;它返回一个配置对象。MustGet(ctx, "migrate.img-arm-rbd") 则是在这个配置对象上调用的方法…...

编程日记 2023/11/11 15:13:43

安哥拉市场开发攻略，收藏一篇就够了

安哥拉是非洲南部的一个国家&#xff0c;中国是安哥拉最大的贸易伙伴&#xff0c;安哥拉是中国在非洲的第二大贸易伙伴&#xff0c;中国人在安哥拉也是非常受欢迎的&#xff0c;虽然安哥拉经济比较落后&#xff0c;但是市场潜力还是非常不错的。今天就来给大家分享一下安哥拉的…...

编程日记 2023/11/11 15:12:42

第六章 ：Spring Boot web开发常用注解（一）

第六章 &#xff1a;Spring Boot web开发常用注解&#xff08;一&#xff09; 前言 本章节知识重点&#xff1a;作者结合自身开发经验&#xff0c;以及觉察到的一个现象&#xff1a;Springboot注解全面理解和掌握的并不多&#xff0c;对注解进行了全面总结&#xff0c;共分两个…...

编程日记 2023/11/11 15:11:41

Unity DOTS系列之System中如何使用SystemAPI.Query迭代数据

最近DOTS发布了正式的版本, 我们来分享一下System中如何基于SystemAPI.Query来迭代World中的数据&#xff0c;方便大家上手学习掌握Unity DOTS开发。 SystemAPI.Query的使用 System有两种&#xff0c;一种是Unmanaged 的ISystem,一种是managed 的SystemBase,这两种System都可…...

编程日记 2023/11/11 15:10:38

【objectarx.net】创建渐变填充

net.gradientHatch(创建渐变填充)...

编程日记 2023/11/11 15:09:37

【软考】信息安全基本要素

目录 一、机密性二、完整性三、可用性四、可控性五、可审查性六、可鉴别性七、不可抵赖性八、可靠性 一、机密性 1.保证信息不泄露给未经授权的进程或实体&#xff0c;只供授权者使用 二、完整性 1.信息只能被得到允许的人修改&#xff0c;并且能够被判别该信息是否已被篡改过…...

编程日记 2023/11/11 15:07:35

[C++ ]：7.内存管理+模板引入。

内存管理模板引入 一.内存管理&#xff1a;1.内存区域划分图&#xff1a;2.区域划分实例&#xff1a;3.C 内存管理方式&#xff1a;newdelete4.自定义类型的new和delete&#xff1a;一.简单类&#xff1a;二.日期类&#xff1a;三.栈类&#xff1a;四.队列类&#xff08;栈实现…...

编程日记 2023/11/11 15:06:34

【计算机网络】HTTPS

文章目录 前言为什么会出现 HTTPSHTTPS 是如何进行加密的1. 对称加密非对称加密中间人攻击3. 引入证书 前言 前面我们学习了应用层中使用比较常见的 HTTP 协议&#xff0c;但是呢&#xff1f;在实际的使用中&#xff0c;浏览器和服务器之间的通信其实很少使用到 HTTP&#xff…...

编程日记 2023/11/11 15:04:32

阿里云服务器怎么样？阿里云服务器优势、价格及常见问题介绍

阿里云&#xff08;Alibaba Cloud&#xff09;是阿里巴巴集团旗下的云计算服务提供商&#xff0c;其提供的云服务器&#xff08;ECS&#xff09;是其核心服务之一。在云计算市场中&#xff0c;阿里云服务器备受用户的青睐&#xff0c;那么&#xff0c;阿里云服务器究竟怎么样呢…...

编程日记 2023/11/11 15:02:29

【狂神说Java】Dubbo + Zookeeper

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;狂神说Java &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c;永远…...

编程日记 2023/11/11 15:01:29

混合型MMC多电平整流侧仿真：电压电流双闭环控制、环流抑制与电容电压均压控制策略采用载波移相调...

混合型MMC多电平&#xff0c;整流侧仿真&#xff0c;加入了电压电流双闭环&#xff0c;环流抑制&#xff0c;子模块电容电压均压控制&#xff0c;采用载波移相调制 PS&#xff1a;仿真搭建不易&#xff0c;仅一个仿真最近在实验室熬了几个通宵&#xff0c;终于搞定了混合型MMC多…...

编程新知 2026/4/19 6:41:10

OpenClaw实操指南19｜SOUL.md + AGENTS.md实战：给AI注入性格、边界和判断力

上一篇介绍了 Workspace 的六个文件&#xff0c;这篇专门拆解最难配的两个&#xff1a;SOUL.md 和 AGENTS.md。 难不在于语法&#xff0c;而在于"写什么"。很多人配完之后发现 AI 还是老样子&#xff0c;原因通常是&#xff1a;写得太抽象、太笼统&#xff0c;AI 根…...

编程新知 2026/4/19 6:28:40

HeyGem数字人视频生成系统性能优化建议：如何加快视频生成速度

HeyGem数字人视频生成系统性能优化建议&#xff1a;如何加快视频生成速度 1. 系统性能瓶颈分析 1.1 计算资源限制 HeyGem数字人视频生成系统的处理速度主要受以下硬件资源限制&#xff1a; GPU显存容量&#xff1a;唇形同步模型推理需要大量显存&#xff0c;显存不足会导致…...

编程新知 2026/4/19 6:10:31

nli-distilroberta-base基础教程：NLI任务与相似度计算、语义匹配的本质区别

nli-distilroberta-base基础教程&#xff1a;NLI任务与相似度计算、语义匹配的本质区别 1. 项目概述 nli-distilroberta-base是一个基于DistilRoBERTa模型的自然语言推理(NLI)Web服务。这个轻量级但强大的工具能够判断两个句子之间的逻辑关系&#xff0c;为文本理解任务提供了…...

编程新知 2026/4/19 5:09:10

AGI将重塑全球GDP格局：2026年前必须掌握的5个关键经济指标与应对框架

第一章&#xff1a;SITS2026专家&#xff1a;AGI的经济影响预测 2026奇点智能技术大会(https://ml-summit.org) 劳动力市场结构性重塑 SITS2026专家组基于多国宏观经济模型与AGI渗透率模拟指出&#xff0c;到2030年&#xff0c;具备自主目标建模与跨域推理能力的通用人工智能…...

编程新知 2026/4/19 4:21:56

告别手动输入：在Windows Terminal与Powershell中实现类iTerm2的智能补全体验

1. 为什么Windows开发者需要iTerm2般的智能补全体验 作为一个从macOS转回Windows的开发者&#xff0c;最让我抓狂的就是命令行环境的效率落差。在iTerm2里&#xff0c;轻轻按个Tab键就能自动补全路径和命令&#xff0c;上下箭头可以快速切换历史记录&#xff0c;这种丝滑体验在…...

编程新知 2026/4/19 4:13:31

深入浅出FOC：为什么你的电机‘跑不快’？聊聊磁链圆限制与PWM死区的那些事儿

深入浅出FOC&#xff1a;为什么你的电机‘跑不快’&#xff1f;聊聊磁链圆限制与PWM死区的那些事儿 当你第一次尝试用STM32实现FOC&#xff08;磁场定向控制&#xff09;时&#xff0c;可能遇到过这样的困惑&#xff1a;明明按照教科书上的算法写好了代码&#xff0c;电机在低速…...

编程新知 2026/4/19 4:03:07

宁德时代第四大股东拟减持5800万股 可套现超200亿 黄世霖去年套现172亿

雷递网 雷建平 4月18日宁德时代新能源科技股份有限公司&#xff08;证券代码&#xff1a;300750证券简称&#xff1a;宁德时代&#xff09;日前发布股东询价转让计划书。本次拟参与询价转让的股东为宁波联合创新新能源投资管理合伙企业&#xff08;有限合伙&#xff09;&#x…...

编程新知 2026/4/19 3:05:08

从双非到东南网安：一名普通考生的备考心路与策略复盘

1. 从迷茫到坚定&#xff1a;我的考研目标选择历程 作为一个双非院校的普通学生&#xff0c;我最初对考研这件事充满了迷茫。记得大三上学期结束时&#xff0c;身边的同学都在讨论考研目标&#xff0c;而我却连考什么专业、什么学校都没想清楚。这种状态持续了整整半年&#xf…...

编程新知 2026/4/19 1:22:23

动网格实战：Spring光顺法原理详解与案例剖析

1. Spring光顺法入门&#xff1a;为什么需要动网格处理&#xff1f; 做流体仿真的时候&#xff0c;经常会遇到边界运动的场景。比如汽车发动机里的活塞上下运动&#xff0c;或者心脏瓣膜的开合。这时候如果网格不动&#xff0c;就会出现边界穿过网格的尴尬情况——就像用固定渔…...

编程新知 2026/4/19 1:07:55