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 📃新人博主 ：欢迎点赞收藏关注，会回访！ 💬舞台再大，你不上台，永远…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存 默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存 一级缓存（本地缓存&#…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机，交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息，系统版本：Ubuntu22.04.5 LTS；内核版本…...