:after伪类方法解决移动端1px变粗的原因

最新推荐文章于 2024-12-27 21:04:34 发布

原创最新推荐文章于 2024-12-27 21:04:34 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用 CSS 的 :after 伪类创建底部边框效果，通过相对定位和绝对定位结合，实现一个简单的带边框的线条样式。该技巧适用于网页布局中的各类元素修饰。

:after伪类方法

.border-line{position:relative;}
.border-line:after{position: absolute; width: 100%; left: 0;bottom: 0; display: block;border-top: 1px solid rgba(7,17,27,0.1); content: ' ';}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

web_qdkf

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

移动端1px问题解析：解决方案、对比与总结

pzhdv的博客

07-17

1232

移动端1px视觉偏差问题源于CSS像素与物理像素的映射差异（DPR）。本文解析了四种主流解决方案：1）CSS伪类+transform缩放（推荐），通过媒体查询适配不同DPR设备；2）viewport动态缩放，使1CSS像素=1物理像素；3）SVG矢量绘制实现精细边框；4）box-shadow模拟简单边框。各方案各有优劣，其中伪类+transform方案兼容性好、样式灵活，是复杂场景首选；viewport缩放适合整站统一规范的新项目。开发者可根据项目需求选择最适合的方案。

8种方案解决移动端1px边框的问题

林恒的博客

07-05

1212

css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。

参与评论您还未登录，请先登录后发表或查看评论

手机1像素线粗_移动端开发1px像素线条变粗的原因与解决方法

weixin_36079387的博客

01-13

722

移动端1px像素线变粗的原因在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，UI审查的时候也常常会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经是1px了，为什么看着还是那么粗呢？要知道问题的原因首先要了解一下几个概念：(1)物理像素(phy...

利用伪类和tranform实现1px 边框border

gxr的博客

11-13

630

.border-1px{ position: relative; } .border-1px:after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #ccc; content: ' ';...

关于移动端1px线处理和伪类组合使用

zhongzai2010的专栏

12-14

828

问题：前端UI工程师有强迫症，非得把手机端的线条弄的最细。分析：由于移动端页面普遍不允许缩放，所以设置viewport=1相关的scale也都设置为1，倒置在手机浏览器的显示时其实是有devicePixelRatio=2 或=3 这样的放大的，所以普通代码border=1px，在设备上实际上会显示为2px或3px。看上去确实比较粗壮。解决：参考网上实现，最终选择了使用：before af

一像素1px在浏览器上出现视觉上的差异，显示的粗细不一样

wjq_xxq的博客

11-30

3890

一像素1px在浏览器上出现视觉上的差异，显示的粗细不一样出现的问题解决方案after不管用出现的问题最近做页面，出现一个问题，页面上有几条线，我直接写成height为1px的div,结果页面写完了发现，命名用的同一个类名，为什么显示的粗细不一样，很确定这就是一条线，用的样式一毛一样的。而且浏览器放大缩小，变成了一会粗一会细，很郁闷，有没有。觉得这是浏览器对像素处理的问题，就么有管。结果测试说会...

::after 1px 间隔线在 Safari 显示颜色不同于其它的问题

学习笔记

04-03

630

前言在一个菜单面板的时候，把间隔线设置成了 1 绝对像素，生成的效果是下面这样的，在一个线跟其它的不一样。但在 Chrome 上就不会出现这问题。 width: 100%; bottom: 0; left: 0; content: ''; display: block; border-bottom: 1px solid #8E8E93; position: absolute; transform...

H5页面在移动端常见问题及解决方案

qq_29896351的博客

12-27

448

移动端总会遇到一系列特定于移动设备的问题，分享下常见的移动端常见问题的处理方案。

h1::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--primary-color); }

最新发布

07-15

这段CSS代码通过伪元素为`<h1>`标题添加了一个居中的装饰性下划线。以下是详细解析和优化建议： ### 代码解析 ```css h1::after { content: ''; /* 必须属性，生成伪元素 */ position: absolute; /* 绝对定位 */ ...

实战：移动端适配的最佳解决方案

杏仁技术站

01-08

681

开局一张图理解这张图，需要先了解以下几个概念设备像素: 类似于密度，即每英寸的像素点数量，跟设备有关设备独立像素: 我们可以理解为css像素，跟设备无关设备像素比: 就是devicePi...

前端 移动端中1px 线条变粗解决方案

qq_45265272的博客

03-08

532

css 解决移动端1px像素变粗的问题

移动端开发1px像素线条变粗的原因与解决方法

細水、長流√的专栏

12-21

1335

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

柑橘乌云_

11-10

1182

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

在高清屏下，移动端的1px边框会很粗，如何解决这个问题？

破损的天堂鸟博客

10-15

1028

在高清屏下，移动端的1px边框会显得较粗，这是因为CSS中的1px并不等同于移动设备上的1px。不同手机的像素密度不同，导致了这一问题。例如，在Retina屏幕（设备像素比为2）上，设置的1px CSS像素实际上会用2个物理像素单元来渲染，因此看起来会比1px粗一些。：直接在CSS中设置0.5px的边框宽度。这种方法适用于支持0.5px边框的设备。例如，可以通过JavaScript检测浏览器是否能处理0.5px的边框，如果可以，则给html标签元素添加一个class来应用0.5px的边框。

关于移动端开发1px线的一些理解和解决办法

大转转FE

06-04

2829

作者 | 李兴瑞1px线变粗的原因在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样...

移动端 1px 像素问题及解决办法

想搞全栈的前端

06-02

744

移动端1px变粗的原因为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”&gt...

移动端1px相对比设计稿变粗的问题

w_shuhua的博客

08-08

671

问题描述设计最近找我说，文字的边框很粗，和设计稿不匹配，当时由于项目紧，没有特别注意这个细节，现在让我在这个版本迭代修改了。原因首先我么要先找到原因，因为css中的1px不等于移动设备的1px，由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：设备物...

移动端1px适配问题（既解决移动端1px看起来更粗的问题）

故里的博客

06-18

1273

兜兜转转又开始做移动端啦~相对于实习生时做的移动端功能，难上许多。今天忽然就有一个想法：上家公司我学到了很多pc端的知识，这家公司我可以学习更多的移动端知识。除此之外，更要精进对Js的掌握啦。 -----------上解决方案---------- 问题：1px的线框在移动端上看起来比较粗。解决办法1（本人常用）：解析：原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的

网页元素和元素之间有空白边框_1像素边框问题

weixin_39574708的博客

11-25

509

对于前端开发者来说，要处理这个问题，必须先补充一个知识点，就是设备的物理像素[设备像素] & 逻辑像素[CSS像素]；在我的另外一片文章设计稿的100%还原做了介绍，感兴趣的朋友可以查阅一下。 # 为什么1px变粗了？为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1p...

前端1px问题及解决方案

05-26

在移动端开发中，1px问题是一个常见的难题。由于移动端屏幕像素密度高，所以在CSS中设置1px的边框或者线条时，往往会出现模糊或者变粗的情况，影响用户体验。以下是几种解决方案： 1. 使用viewport单位 Viewport单位是指基于视口的单位，例如vw、vh、vmin、vmax，它们可以根据设备屏幕宽度自适应缩放，所以可以解决1px问题。例如，可以使用vw单位设置边框宽度。 2. 使用transform: scale() 使用CSS3的transform:scale()属性将元素缩小到原来的1/2或1/3，然后再放大，这样边框或线条就会变得更加细致，不会出现模糊或变粗的情况。 3. 使用border-image 可以使用CSS3的border-image属性来设置边框图片，可以使用一张像素为1的图片来解决1px问题。 4. 使用伪元素可以使用CSS的伪元素::before和::after来实现细线效果，例如： ``` border: none; position: relative; &::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #000; transform-origin: left bottom; transform: scaleY(0.5); } ``` 以上是一些解决1px问题的方法，可以根据实际情况选择合适的方法来解决。