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 📃新人博主 ：欢迎点赞收藏关注，会回访！ 💬舞台再大，你不上台，永远…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
dify打造数据可视化图表
一、概述 在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...