css在不同设备上实现实现border-1px

最新推荐文章于 2024-04-11 17:56:34 发布
最新推荐文章于 2024-04-11 17:56:34 发布
阅读量352 收藏
点赞数
分类专栏： css小技巧 文章标签： css 1px
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/foreverwy/article/details/82251055
版权 
border-1px($color)
	position: relative
	&:after
		display: block
		position: absolute
		left: 0
		bottom: 0
		width: 100%
		border-top: 1px solid $color
		content: ' '
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
	.border-1px
		&:after
			-webkit-transfrom: scaleY(0.7)
			transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
	.border-1px
		&:after
			-webkit-transfrom: scaleY(0.5)
			transform: scaleY(0.5)

 

foreverwy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS34 1px边框问题的解决方案
多啦的博客
07-11 2774
现象及原因 在移动端开发时，设计图中的1px的边框，如果我们直接在CSS中设置边框的宽度为1px，实际上在设备上显示的并不是1px。这是因为不同的手机有着不同的像素密度，即window.devicePixelRatio属性，它反应的是物理像素与逻辑像素的比值，IPhone6的dpr是2，也就是说，对于IPhone6来说，CSS的1px显示时会显示为2px的像素 当设置为1px的边框时，移动端的显示...
border.css(解决移动端1px问题)
aolohzd52984的博客
02-25 411
由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft,...
移动端1px解决方案 1px border.css
冲锋
07-08 4247
将以下代码放在border.css文件中，然后引入 @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topr...
css 移动端 border 1px
coffee豆丿
01-25 594
带圆角的边框 border-radius: 5px; box-shadow: 0 0 1px 0 #a09e9e; 单边框 height:1px; transform: scaleY(0.5); transform-origin:0 0; overflow: hidden; background: #000; 多边框 .border{ position: relative; heigh...
vue 实现手机端 1px (编写PC端的1px,在手机上显示会大于1px)
Libby的博客
10-19 639
此处是使用 stylus 预处理器 来预先处理css  -- 此处以 border-bottom:1px solid rgba(0,0,0,.2)来举例 在 项目中的 src文件夹 ---》assets 文件夹  中创建 stylus 文件夹来存放 .styl 文件 在stylus文件夹中新建一个 mixin.styl 文件 border-1px($color) position:...
实现CSS3中的border-radius(边框圆角)示例代码
12-11
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...
CSS3中border-radius属性设定圆角的使用技巧
01-21
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...
详解CSS3中border-image的使用
09-25
在CSS3中，`border-image`是一个非常强大的特性，它允许我们使用图像来定义元素的边框样式，从而创造出更具视觉吸引力的效果。这个属性是CSS3入门学习中的基础知识，对于提升网页设计的美观度具有重要作用。 首先，...
详解css样式中的border-image
09-24
在CSS样式中，`border-image` 是一个强大的特性，它允许你使用图像来定义元素的边框，从而创建出各种复杂且美观的边框效果。本文将深入解析`border-image`的相关属性及其用法。 首先，`border-image-source`属性...
CSS 1PX Border问题解决
最新发布
hawk2014bj的博客
04-11 390
CSS Border 在不同的设备，显示的宽度会不一致，原因就在于像素比，现在显示器动辄就 2k或者 4k，物理像素比逻辑像素都会大，CSS 用的是逻辑像素。CSS Border 就会看起来比设计稿宽，所以一般Border像素都会缩小 50%。做法主要有背景图片、CSS 伪元素和视口缩小，背景图在某些设备上可能会发虚，这里我们就看一下伪元素和视口的方式。
【CSS】画出宽度为1像素的线或边框
Primice个人空间
11-10 1577
由于多倍的设计图在移动设备上显示时会将设计图进行缩小到视口宽度，而1px的边框没有随着页面进行缩小而导致效果太粗，想要还原设计图1px的显示效果，因此需要一些方法来实现边框宽度小于1px。实现方法很多，下面是个人认为比较好的几种。
border-1px的实现（stylus）如何在移动端设置1px的border
weixin_30633949的博客
05-01 139
在这里我只介绍下边框的实现： 当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx，2Npx.为保设计稿还原度,解决就是用media + scale. 实现原理：伪类+缩放 工具：stylus预编译器 1、在 stylus文件夹中创建mixin.styl文件，内容如下：（即通过伪类+子绝父相 实现1px的下边框，这只是开始，并没有结束 ） ...
10.（初级）CSS边框border
MJ的博客
02-06 333
一、边框 边框四边同时设置： border:1px（宽度） solid（样式） #ddd（颜色）; 各边边框分别设置： border-top/border-left/border-right/border-bottom 二、边框样式   三、边框圆角 border-radius:1px（左上） 1px（右上） 1px（左下） 1px（右下）; 1、边框画圆形： 元素为正方形，b
移动端设置border的1px像素解决方案
@必意玲
04-24 3313
为了方便通用，使用 mixin 定义一个函数。（mixin是sass定义函数的关键字） /** $color是形参 **/ @mixin border-1px($color) { position: relative; &:after{ display: block; position: absolute; left: ...
移动端1px问题的几种常见解决方案
frontend_frank的博客
04-16 1920
前言在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。...
让1px在不同的浏览器和设备中显示真正的1像素的效果的方法
qq_35960760的博客
02-17 2363
1传统的实现方法 伪元素 + css3的缩放巧妙地实现； 基本步骤就是： 设置目标元素定位参照 给目标元素添加一个伪元素before或者after，并设置绝对定位 给伪元素添上1px的边框 设置伪元素的宽高为目标元素的2倍 缩小0.5倍（变回目标元素的大小） 使用border-box
如何在移动端设置1px的border
手掌日月摘星辰
06-28 2342
在这里我只介绍下边框的实现： 实现原理：伪类+缩放 工具：stylus预编译器 1、在 stylus文件夹中创建mixin.styl文件，内容如下：（即通过伪类+子绝父相 实现1px的下边框，这只是开始，并没有结束 ）   border-1px($color) position: relative &amp;:after display: block ...
实现真正的1px的边框 border
法研鲁迅的个人博客
12-10 7830
实现真正的1px的边框 border问题 解决的问题是1像素的边框在某些移动设备中会显示过粗,主要原因是设备进行了放大,成为了2px; 解决利用媒体查询和min-device-pixel-ratio 实现
移动端border 1px 问题完美解决方案
JJHuiQ的博客
08-13 3580
我是用sass写的，用其他的预处理器写法大同小异，新建mixin.scss文件： /*单条border样式*/ @mixin border-1px ($color, $direction) { content: ''; position: absolute; background: $color; @if $direction == left { left: 0; ...
如何实现view设置border-image后border-radius不失效
09-20
z-index: -1; border-radius: inherit; border-image: url(border-image.png) 30 round; } ``` 2. 使用`clip-path`属性来创建一个与视图形状相匹配的剪切路径，并将`border-image`应用于剪切路径而不是实际的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值