在不同的手机端dpi会影响1px的宽度，需要进行处理

最新推荐文章于 2021-05-25 21:13:18 发布
原创 最新推荐文章于 2021-05-25 21:13:18 发布 · 646 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了不同手机端DPI对1px宽度的影响及解决方案，通过使用CSS3的transform属性中的scaleY实现不同DPI屏幕上的内容缩放。

在不同的手机端dpi会影响1px的宽度，需要进行处理

css部分stylus书写

主要运用了css3 的 transform 中 的 scaleY 在不同dpi的屏幕上进行 缩放

具体例子

15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR
CapejasmineY的博客
08-06 1283
移动端布局基础——DPI、PPI、物理像素、css像素、DPR、viewport、DPR
Android手机分辨率基础知识（DPI,DIP计算）
2401_84121588的博客
04-16 2300
Px（Pixel像素）不同设备显示效果相同。这里的“相同”是指像素数不会变，比如指定UI长度是100px，那不管分辨率是多少UI长度都是100px。也正是因为如此才造成了UI在小分辨率设备上被放大而失真，在大分辨率上被缩小。（屏幕尺寸）一般所说的手机屏幕大小如1.6英寸、1.9英寸、2.2英寸，都是指的对角线的长度，而不是手机面积。我们可以根据勾股定理获取手机的宽和长，当然还有面积。Resolution（分辨率）指手机屏幕垂直和水平方向上的像素个数。
揭秘移动端px,dpi,dpr
qq_34998786的博客
05-25 1307
前言移动端开发的时候，我们拿到的 UI设计稿通常都是 640px或者是 750px,明明我们的 设备视口宽度是设计稿的 一半,这是为什么呢？经常听到设计同学说，你这图片在 苹果手...
解析Android mdpi hdpi xhdpi xxhdpi xxxhdpi 之间关系
热门推荐
QQ84549557的专栏
12-23 11万+
分辨率对应DPIldpi  QVGA (240×320) mdpi  HVGA (320×480)hdpi  WVGA (480×800),FWVGA (480×854)xhdpi  720P（1280*720）xxhdpi 1080p（1920*1080 ）xxxhdpi 4K（3840×2160） 手机常见分辨率: 4:3 VGA    640*480 (Video Graphics
线 border-bottom:1px solid #ccc 解决1px在不同手机上粗细不一样的问题
sally18的博客
04-28 6488
因为1px在手机端是识别不了的，所以可以通过缩放scaleY(0.5)实现把1px的高度缩放到0.5px，可以用于表单元素的下滑线 .parent { position: relative; } .parent::after { /* 绝对定位到父元素最低端，可以通过left/right的值控制边框长度或者定义width:100%;*/ position: absolute; ...
pc端px和移动端px的区别
最新发布
11-12
- 在PC端，屏幕通常有较低的像素密度（如96dpi），所以1px通常对应一个物理像素。 - 在移动端，高分辨率屏幕（如Retina显示屏）有更高的像素密度，所以1px可能对应多个物理像素。 - 例如，iPhone 5：CSS逻辑像素320...
手机分辨率和网页中的 px 是一回事吗？
IT修真院：初学者转行到互联网的聚集地
05-22 1330
大家好，这里是修真院前端小课堂，今天给大家分享的是 《手机分辨率和网页中的 px 是一回事吗？》 1. 背景介绍 对于 pc 端适配的问题（除开布局方式），在不改变电脑分辨率，和缩放网页状态下。通常只需要设置中设置 viewport 即可。但是放在手机上时候就不一样了，你需要了解 px,dips,ppi 等等有关知识，才能应付移动端各种适配问题以及坑，光是 Android 各种花式...
微信小程序 （适配小结、移动端1px与选择器权重）
weixin_45343878的博客
08-16 612
WXSS选择器权重与优先级 WXSS优先级与CSS类似，权重如下图所示 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式 权重案例 适配小结 上节介绍的物理像素与逻辑像素相关概念， 关键词： 物理像素dp （1）物理像素(physical pixel) 物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。 一个设备的物理像素...
H5 浏览器：使用标准的 CSS 像素渲染（96dpi） 微信小程序：使用手机原生渲染引擎（iOS 约 163dpi，Android 约 160dpi） 结果：相同像素值的字体在小程序物理尺寸更小,如何解决上述问题
06-16
在H5和小程序都使用相对单位（H5用rem，小程序用rpx），并按照设计稿750px宽度进行适配。这样，两者在视觉比例上会保持一致。2.如果必须要求物理尺寸相同，那么需要用户输入设备的DPI（或通过其他方式获取，如服务器...
前端如何使用媒体查询展示手机端和web端和小程序端
09-19
1. **针对手机端**（如响应式设计）： - 使用 `@media screen and (max-width: <宽度>)`，比如 `@media only screen and (max-width: 600px)`，当窗口宽度小于或等于600像素时，应用特定的CSS规则，如调整字体大小...
Android适配不同的屏幕密度和DPI的方法
冰雪世界
12-18 3786
在Android开发中有时会遇到在不同的手机上界面不适配的问题，控件忽大忽小，而且就连两个分辨率相同的手机有时也会出现这种问题。其实出现界面适配问题的原因，并不仅仅有分辨率，还有一个更重要的因素是：屏幕密度与DPI。屏幕密度与DPI这个概念紧密相连，屏幕密度是对每个像素点的缩放比例，DPI全拼是dots-per-inch，即每英寸显示的像素点数。 有种方式可以解决上述问题，即：smallestWi...
移动端1px像素问题及解决办法
xuexizhe88的博客
06-04 1万+
        在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。一、像素的理解        像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细...
mobile web retina 下 1px 边框解决方案
weixin_34355715的博客
06-05 269
http://www.tuicool.com/articles/ZRv6bun 再谈mobile web retina 下 1px 边框解决方案 时间2015-01-03 12:03:31Hugo Web前端开发 原文http://www.ghugo.com/css-retina-hairline/ 主题WebKitiOSCSS 本文实际上想说的是i...
一像素1px在浏览器上出现视觉上的差异，显示的粗细不一样
wjq_xxq的博客
11-30 3888
一像素1px在浏览器上出现视觉上的差异，显示的粗细不一样出现的问题解决方案after不管用 出现的问题 最近做页面，出现一个问题，页面上有几条线，我直接写成height为1px的div,结果页面写完了发现，命名用的同一个类名，为什么显示的粗细不一样，很确定这就是一条线，用的样式一毛一样的。而且浏览器放大缩小，变成了一会粗一会细，很郁闷，有没有。觉得这是浏览器对像素处理的问题，就么有管。结果测试说会...
Android 屏幕适配
wangqing830414的专栏
05-19 1万+
众所周知，Android机型尺寸各种各样，于是屏幕适配就成了Android开发中很重要的一环。Android屏幕适配可能一些开发者都会遇到这样的问题，今天就来分享下屏幕适配，其实Android屏幕适配也可以很简单。 基本概念 Android屏幕适配必须要理解的一些概念： px 是英文单词pixel的缩写，意为像素，屏幕上的点。我们通常所说的分辨率如480X800就是指的像素
android中不同手机分辨率适配问题
村头那抠脚大叔的专栏
02-13 2702
在项目开发的过程中，同一个布局对应不同的手机会显示出不同的效果。导致这个现象产生的原因是不同手机的分辨率不同。在android sdk提供的帮助文档中，我们可以看到各种手机的分辨率和对应的屏大小。QVGA (240x320)，WQVGA400(240x400)，WQVGA432 (240x432)，HVGA (320x480)，WVGA800 (480x800)，WVGA854 (480x854)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值