CSS 移动端 1px(线条/边框) 不同机型上显示粗细不同，解决办法
由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的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倍，1px的边框在devicePixelRatio2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了 <!DOCTYPE html> <html lang"en"> <head&g…...
)
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…...
Vatee万腾的科技决策力奇迹：Vatee科技决策力的独特之选
在金融投资的复杂领域中，Vatee万腾以其独特的科技决策力创造了一场真正的奇迹。这不仅是一种引领投资者走向成功的选择，更是一种开启新时代的科技决策奇迹。 Vatee的科技决策力背后蕴藏着强大的智慧和创新。通过大数据分析、智能算法的运用，V…...
ai技术是怎么换脸的，实现原理是什么，有那些软件
人工智能（AI）在近年来的迅猛发展中，带来了许多令人惊叹的技术创新，其中之一就是人工智能换脸技术。这项技术通过深度学习和图像处理的手段，使得用户可以将自己的面孔替换成其他人物，引发了广泛的讨论和应用…...
在IDEA中使用maven项目总结
一 什么是maven Maven本身也是Java写的，他是一款服务于Java平台的自动化构建工具 Maven是一个项目管理工具，旨在简化软件项目的构建、依赖管理和项目信息管理。它使用基于项目对象模型（Project Object Model，POM）的…...
oracle备份一个表需要做的操作
在 Oracle 中备份一个表可以通过以下步骤完成，包括备份表结构（DDL）和备份表数据（DML）： 备份表结构（DDL）： 使用 CREATE TABLE AS SELECT： 创建一个新表&#…...
C 语言 switch 语句
C 语言 switch 语句 在本教程中，您将通过一个示例学习在C语言编程中创建switch语句。 switch语句使我们可以执行许多代替方案中的一个代码块。 虽然您可以使用if…else…if阶梯执行相同的操作。但是，switch语句的语法更容易读写。 switch … case的语…...
架构师：构建高可用服务治理Consul集群与Kong网关管理
1、简述 在微服务架构中，高可用性和服务治理是非常重要的方面。Consul作为一个开源的服务发现和配置工具，可以帮助我们实现高可用服务治理。Kong是一个用于管理 API 网关的工具，它可以提供强大的流量控制和安全功能。本文将介绍如何构建一个高可用的Consul集群，并结合Kong…...
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(…...
莫桑比克市场开发攻略，收藏一篇就够了
中国与莫桑比克之间的经贸关系源远流长，两国之间的贸易和投资合作呈现出快速增长的趋势。莫桑比克是农业国，生产以及生活资料依赖进口，市场潜力还是非常不错的，今天就给大家分享一下。文章略长，大家点赞收藏关注慢慢看…...
go语言学习
1、示例代码： imgName : g.Cfg().MustGet(ctx, "migrate.img-arm-rbd").String() 在给定的代码行中，g.Cfg() 是一个函数调用，它返回一个配置对象。MustGet(ctx, "migrate.img-arm-rbd") 则是在这个配置对象上调用的方法…...
安哥拉市场开发攻略，收藏一篇就够了
安哥拉是非洲南部的一个国家，中国是安哥拉最大的贸易伙伴，安哥拉是中国在非洲的第二大贸易伙伴，中国人在安哥拉也是非常受欢迎的，虽然安哥拉经济比较落后，但是市场潜力还是非常不错的。今天就来给大家分享一下安哥拉的…...
第六章 ：Spring Boot web开发常用注解（一）
第六章 ：Spring Boot web开发常用注解（一） 前言 本章节知识重点：作者结合自身开发经验，以及觉察到的一个现象：Springboot注解全面理解和掌握的并不多，对注解进行了全面总结，共分两个…...
Unity DOTS系列之System中如何使用SystemAPI.Query迭代数据
最近DOTS发布了正式的版本, 我们来分享一下System中如何基于SystemAPI.Query来迭代World中的数据，方便大家上手学习掌握Unity DOTS开发。 SystemAPI.Query的使用 System有两种，一种是Unmanaged 的ISystem,一种是managed 的SystemBase,这两种System都可…...
【objectarx.net】创建渐变填充
net.gradientHatch(创建渐变填充)...
【软考】信息安全基本要素
目录 一、机密性二、完整性三、可用性四、可控性五、可审查性六、可鉴别性七、不可抵赖性八、可靠性 一、机密性 1.保证信息不泄露给未经授权的进程或实体，只供授权者使用 二、完整性 1.信息只能被得到允许的人修改，并且能够被判别该信息是否已被篡改过…...
[C++ ]：7.内存管理+模板引入。
内存管理模板引入 一.内存管理：1.内存区域划分图：2.区域划分实例：3.C 内存管理方式：newdelete4.自定义类型的new和delete：一.简单类：二.日期类：三.栈类：四.队列类（栈实现…...
【计算机网络】HTTPS
文章目录 前言为什么会出现 HTTPSHTTPS 是如何进行加密的1. 对称加密非对称加密中间人攻击3. 引入证书 前言 前面我们学习了应用层中使用比较常见的 HTTP 协议，但是呢？在实际的使用中，浏览器和服务器之间的通信其实很少使用到 HTTPÿ…...
阿里云服务器怎么样？阿里云服务器优势、价格及常见问题介绍
阿里云（Alibaba Cloud）是阿里巴巴集团旗下的云计算服务提供商，其提供的云服务器（ECS）是其核心服务之一。在云计算市场中，阿里云服务器备受用户的青睐，那么，阿里云服务器究竟怎么样呢…...
【狂神说Java】Dubbo + Zookeeper
✅作者简介：CSDN内容合伙人、信息安全专业在校大学生🏆 🔥系列专栏 ：狂神说Java 📃新人博主 ：欢迎点赞收藏关注，会回访！ 💬舞台再大，你不上台，永远…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...