小于1px不识别的解决办法

最新推荐文章于 2022-08-31 10:36:34 发布
最新推荐文章于 2022-08-31 10:36:34 发布
阅读量910 收藏 1
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010007013/article/details/96869378
版权

在移动端开发中，有时候会遇到height小于1px的情况。
而有的手机不识别1px以下，设置height:1px和设置height:0.5px看上去效果一样。
解决的办法是:
1.利用transform里面的scale来缩小height

height:1px;
transform:scaleY(0.5)

2.利用vw来设置height,先将height:1px转为对应的vw值（比如1px对应0.133vw）

height:0.133vw
明月松江
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器小于1px渲染的差异
weixin_33714884的博客
12-25 638
前言 穷，太多东西没法测，有错误的地方可以来喷哦~~~ 在非retina屏下，如果设计让我们弄个.5px的边框啥的其实很麻烦，貌似只有safari(ios8+)支持使用border: .5px;，所以我们有了如下四种方法： border: < 1px：听天由命，通常会被美工锤死 图片模拟：同上 scale（本文要说的） box-shadow，我更喜欢这个，其实原理和scale一样还不占...
css笔记--web端小于1px设计的处理方法
weixin_30478923的博客
05-20 241
HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>last-child</title> <style> body{ colo...
火狐border从1px变为0.8的原因
FezZZZ的博客
11-12 739
firefox的盒子边框宽度显示为输入样式的0.8倍。笔记本默认会又一个缩放功能，如图默认刚好是125%
深受1px的困扰，如今终于解决了
椰卤工程师的个人博客
08-31 1053
移动端适配主要就分为两方面，一方面要适配不同机型的屏幕尺寸，一方面是对细节像素的处理过程。如果你在项目中直接写了 1px ，由于 dpr 的存在展示导致渲染偏粗，其实是不符合设计稿的要求。...
如何解决存在的1px问题？
前端达人
06-08 1777
最近在项目开发中一直深受 1px 的困扰，移动端展示的样式不是偏粗就是偏细、甚至无法看清。也许大家都尝试过或正在使用着各种解决方案，可是对于物理像素、逻辑像素、设备像素比等概念到底是什么，为什么会产生 1 像素等问题始终是一头雾水。。在进行了一番调研后，发现网上对于一些细节原理描述的都不太清晰。故本文结合了个人的一些理解，重点对其原理及实现进行探讨，希望能对像素相关问题彻...
多种方法解决min-width 不兼容ie6的问题
09-25
当视窗宽度小于 900px 时，_width 表达式会确保宽度不会小于 900px。 方法四： 针对需要最小宽度的元素，可以使用类似的方法来确保其在不同浏览器中的表现一致性： 方法四： #mpage{ width:100%; min-width:980...
webpack实现一个行内样式px转vw的loader示例
10-18
文章中提到的postcss-px-to-viewport是一个已存在的解决方案，它本来用于处理css文件中的px转vw转换，但不支持行内样式。因此，我们需要自己实现一个loader来弥补这一功能的不足。在开发loader时，可以参考postcss-...
车牌识别源代码（matlab）
12-15
dw = I(PY1:PY2, PX1:PX2, :); ``` ### 6. 二值化与滤波 最后，对剪切出的车牌图像进行灰度化、二值化处理，并应用均值滤波以进一步提高字符识别的准确性。 ```matlab a = imread('dw.jpg'); b = rgb2gray(a); % ...
DIV+CSS+JS不间断横向滚动实现代码
10-27
- **滚动控制逻辑**：当`scroll_end`元素的宽度减去`scroll_div`的水平滚动距离小于或等于零时，将`scroll_div.scrollLeft`减去`scroll_begin`的宽度，实现向左滚动。否则，`scroll_div.scrollLeft`正常增加，继续向...
车牌识别matlab代码
04-13
- **深度学习方法**：近年来，深度学习方法在图像识别领域取得了巨大成功，如何将其应用于车牌识别中？ 通过不断的学习与实践，我们可以不断提高车牌识别系统的性能，更好地服务于实际应用场景。
解决ie8-不兼容0.5px的问题
vcxiaohan的博客
12-18 1050
有时候我们设置定时器的时候，需要让div移动0.2px/s，当然在ie8-以外的浏览器这样做完全没问题，那么如何兼容ie8-(小于1px会向下取整为0)的浏览器呢？ 1 功能检测(判断某个对象只有ie8支持，针对该浏览器做相应处理) 2 浏览器检测(判断浏览器的类型，针对ie8做相应处理) //判断浏览器 function getInternetExplorerVersion() //
css width 100% 火狐,“height: 100%”在Firefox浏览器中的问题
weixin_39759107的博客
08-04 879
如果是二栏式分布的页面，一边内容比较长的时候在浏览时，在IE浏览器中浏览正常，但在Firefox中浏览时，左右二边不能对齐：IE浏览器中浏览正常，左右对齐：Firefox中浏览时，左边内容长右边就短：Firefox中浏览时，底部就对不齐：先查一下CSS中的定义：中部内容的CSS定义：#mainall {width: 760px;height: 100%;padding: 0px !importan...
CSS——给 div 设置显示效果小于 1px 宽度的边框
BetterGG的博客
12-18 1626
.box text { color: #2298fc; padding: 5rpx 10rpx; } .box text.borderB { position: relative; } .box text.borderB:after { display: block; content: ''; position: absolute; top: 0; botto...
解决前端浏览器字体小于12px办法
dt1991524的博客
11-08 6252
做项目时，UI设计的字体10px,看效果图时发现字体仍然蛮大，改变12px时字体还是那么大，改变到14px时，字体变大了，发现规律，才知道原来浏览器为了让用户字体看的清楚，最小设置为12px。怎么办？设计就是10px? 最终实现的效果图如下： 百度时，各位网上大神说利用transform: scale(0.5)可以满足要求，具体使用时，发现把整个div宽高都缩放了，不满足要求， 反过来想...
移动端字体小于12px的解决方案
热门推荐
besttoby01的博客
03-21 2万+
1.移动端的字体大小最小为12px。两种解决方案：第一种，使用transform: scale(0.7);css的属性，可以缩放大小。第二种，使用display:table; display: table-cell;给其套一个父元素，使用table布局方式。也可以解决。第一种比较简单。第二种就一大堆css样式。.label-parent { display:table; heigh...
处理前端开发浏览器字体小于12px方法
zyg的博客
05-27 3702
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;小字体方法&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0; } p{ font-size: 12px
Google Chrome 特定情况下border设置1px会出现断线bug
weixin_42297518的博客
07-28 1496
摘要 我们在对组件进行定制开发的过程中会遇到许多的问题和各种兼容性的问题，我们要不断尝试去解决这些问题，并记下自己解决过程，是沉淀积累的一种不错的方式。 问题： 在对下拉菜单进行定制开发的过程中，出现了 border 断线的现象，并且在缩放页面或者点击下拉菜单的时候，边框会再次出现，而另一组与它共享同一个样式的下拉菜单并没有出现这样的问题，这个问题困扰了很久。首先排除了 DOM 优先级覆盖的问题...
CSS · 0.1px,0.2px......0.9px,1px效果
weixin_34319111的博客
02-26 1189
代码： &lt;div style="width:50px;height:50px;border:0.1px solid #333"&gt;&lt;/div&gt; &lt;div style="width:50px;height:50px;border:0.2px solid #333"&gt;&lt;/div&gt; &lt;div style="width:50px;height:
1px像素问题
布里渊区
11-04 2074
<div class="scale-1px"> 限时特惠 </div> .scale-1px{ position: relative; border:none; width:100px } .scale-1px:after{ content: ''; position: absolute; top:...
媒体查询小于1024px小于751px
最新发布
05-18
/* 在此设置小于1024px的样式 */ } @media screen and (max-width: 750px) { /* 在此设置小于751px的样式 */ } 注意，这两个媒体查询是互不包含的，如果你想在 750px 和 1023px 之间有不同的样式，可以使用媒体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值