移动端，h5页面1px 1像素边框过粗解决方案

最新推荐文章于 2021-12-21 15:30:47 发布
最新推荐文章于 2021-12-21 15:30:47 发布
阅读量165 收藏
点赞数
文章标签： border 原创 h5 css3
原文链接：https://www.codeprj.com/blog/b965aa1.html
版权
本文介绍了在移动端H5页面中遇到1像素边框在不同设备上显示过粗的常见问题，并提供了两种解决方案，包括利用CSS3的scale hack和使用伪元素来实现精细的1像素边框效果，帮助开发者优化页面视觉效果。
摘要由CSDN通过智能技术生成
p15097962069
关注
h5移动端1px 问题解决方案
闫瑞锋的博客
05-19 225
【代码】h5移动端1px 问题解决方案。
移动端不兼容0.5px的解决方案
line233的博客
11-19 1559
众所周知，移动端的设备各种各样，分辨率、屏幕比等都会有差异，要想做到一套代码多种设备适用尤其困难，比如部分安卓手机不识别0.5px的边框，下面给出解决方案： 一、单条边框(上边框或者下边框) .box { width: 200px; height: 50px; background-color: #ccc; text-align: center; po...
解决移动端1像素边框
12-14
解决移动端存在的一像素边框问题，可以完美的展示在web端上，通用的方式调用即可
【H5开发基础】移动端1像素边框问题的解决方案
runwuwushengxiyu的博客
07-03 168
【H5开发基础】移动端1像素边框问题的解决方案
html5 retina 1像素,7种方法解决移动端Retina屏幕1px边框问题
weixin_39646405的博客
06-07 282
在之前的项目中，UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼，为什么我看不出什么差距了，结果UI把他的设计稿跟我的屏幕截图跟我看，居然真的不一样！！！没有办法，只有在后面的版本中去修改了，但是要改的话，需要知道是为什么。所以查了很多资料，终于搞懂了这个问题，并且总结了几种方法。造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不...
关于移动端开发 1px 线的一些理解和解决办法
前端大全
06-09 567
（给前端大全加星标，提升前端技能）作者：大转转FE/李兴瑞1px线变粗的原因在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式...
移动端H5实现1物理像素的技巧与解决方案
理解像素与设备像素的关系以及如何在移动端实现1px边框是移动端H5开发中的一个重要知识点，它涉及到用户界面的细腻度和视觉一致性，对提升用户体验具有关键作用。开发者需要根据项目的具体需求和目标设备，灵活运用...
吃透移动端 1px的具体用法
11-21
在移动端H5应用开发中，1px的问题主要源于设备像素比（DPR）与CSS像素之间的差异。在高分辨率屏幕（如Retina屏）上，一个CSS像素可能对应多个物理像素，导致1px边框在视觉上显得较粗。本文将深入探讨1px边框的由来、...
vue移动端h5适配解决方案(lib-flexible+px2rem-loader)
光
06-21 3775
先介绍用到的两个工具： px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了 lib-flexible：根据设备宽度，修改根元素html的font-size，以适配不同终端 配置 安装1：npm i px2rem-loader --save -dev 安装2：npm i lib-flexible --save 配置： build/utils....
移动端(手机)1像素边框真正实现
sunshine的博客
11-25 4529
iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决，可以看这里哦
移动端H5页面中1px边框的解决办法
我乃小神神的博客
03-25 1011
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。 简书中描述很好的文章，细节可以点击进去看，如果直接想看代码实现，请看下面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="ini.
border宽度一致但在安卓与ios上显示粗细不一致问题
weixin_45229447的博客
10-30 1524
border宽度一致但在安卓与ios上显示粗细不一致问题 使用H5开发app时常遇到各种兼容问题，特别是各种1px细线与边框问题 本次主要是遇到的边框问题 在安卓上设置边框border时显示没有问题，但是当运行在phone-xr或者phone-xs上时会出现明明border都是1px，`但是左边框更粗，或者更细，反正就是同一个宽度却显示粗细不一致的问题（如下图） 解决方法：设置border-radius:1px，边框就不会出现粗细不一致问题（不确定， 但我解决了，具体原理不知） ...
移动端开发1px像素线条变粗的原因与解决方法
細水、長流√的专栏
12-21 1181
移动端1px像素线变粗的原因 在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，UI审查的时候也常常会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经是1px了，为什么看着还是那么粗呢？ 要知道问题的原因首先要了解一下几个概念： (1)物理像素(physical pixel) 一个物理像素是显示器（手机屏幕）上最小的物理显示单元（像素颗粒），在操作
postcss解决移动端适配+1px边框问题
weixin_34370347的博客
03-26 1946
一 vw进行移动端适配 vw适配简介 VW是基于Viewport视窗的长度单位，1vw = window.innerWidth/window.innerHeight*1%，如果是750设计稿，100vw = 750px，即1vw = 7.5px，我们可以根据设计稿上的px值直接转为vw值。但是这样计算不太方便，所以引入postcss-px-to-viewport插件进行转换，我们在写样式的时候...
移动端1px适配问题（既解决移动端1px看起来更粗的问题）
故里的博客
06-18 1167
兜兜转转又开始做移动端啦~相对于实习生时做的移动端功能，难上许多。 今天忽然就有一个想法：上家公司我学到了很多pc端的知识，这家公司我可以学习更多的移动端知识。除此之外，更要精进对Js的掌握啦。 -----------上解决方案---------- 问题：1px的线框在移动端上看起来比较粗。 解决办法1（本人常用）： 解析： 原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的
移动端1px细线解决方案总结
aa243634473的博客
03-17 743
现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在那个版本没上线就迭代掉了,后面的版本针对这个问题做了些尝试, 这里总结下1px细线的处理方法 移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原...
安卓机 H5 页面加粗样式没有效果
FE-阿阳的博客
01-17 2666
安卓机 H5 页面加粗样式没有效果 问题描述 部分安卓机 h5 页面 css 设置加粗没有效果； 解决方案 这种情况的原因是部分安卓机对 font-weigth 的兼容问题；font-weight 需要设置 700 以上，才会起作用；不要用 数字 500 和600；bold 默认 700； ...
移动端1px相对比设计稿变粗的问题
w_shuhua的博客
08-08 621
问题描述 设计最近找我说，文字的边框很粗，和设计稿不匹配，当时由于项目紧，没有特别注意这个细节，现在让我在这个版本迭代修改了。 原因 首先我么要先找到原因，因为css中的1px不等于移动设备的1px，由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：设备物...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值