CSS 多倍图（移动端图片适配）

最新推荐文章于 2024-12-19 11:48:51 发布
最新推荐文章于 2024-12-19 11:48:51 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LttleJoker/article/details/109654425
本文讲解了CSS像素与物理像素的区别，特别是在高分辨率设备上的应用。介绍了如何制作和使用多倍图来确保在不同分辨率屏幕上的一致清晰度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先我们得先知道我们css中的像素（px）跟物理像素的区别。

在PC端和早期的移动端屏幕时，我们1 css像素就=1物理像素。但是随着手机屏幕的分辨率不断的提高，相当于同样大小的屏幕里面拥有了更多的物理像素点。

因此出现的物理像素比。

例如我们最常用的iphone6,7,8来说，他们屏幕1 css 像素就 = 2个物理像素，不仅如此，随着屏幕分辨率的提高，物理像素比也跟着提高。因此，如果我们需要在移动端上显示一张50 css像素的图片，则需要准备一张100物理像素或者更高的图片，再手动的设置为50px，才能在移动端上清楚的显示出来，否则就会出现下列效果。

这就是多倍图的概念。

tips：需要多倍图可以借助PS的cutterman插件进行导出

移动端开发-为什么需要“（二倍图，三倍图，四倍图）图解”
weixin_44684093的博客
11-04 9368
1.知其然，又要知其所以然。 2.知其前需要基础： 2.1：1.逻辑像素（CSS），2.物理像素， 3.一张在一个设备的某个区域内要想显示清晰的条件要素有什么? 2.2:1.逻辑像素：就是程序概念的横向或者纵向的(css px)像素点。 2.物理像素：就是物理设备的横向或者纵向提供的荧光点的像素点。 3.一张在一个设备的某个区域内要想显示清晰的条件要素是“ 设置的逻辑横纵向像素点需要刚好填满物理设备提供的物理 像素荧光点”。
移动端适配
low666的博客
04-08 493
移动端适配 参考文章： https://segmentfault.com/a/1190000008767416 https://www.jianshu.com/p/2c33921d5a68 适配的目标 在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。 viewport视口 viewport是严格的等于浏览器的窗口。 v...
Css-自适应加载多倍图
yan_danfeng的博客
04-07 434
在移动端展示图片时，由于设备的物理像素比不同，导致同一张图片在不同设备中展示的清晰度不同。因此项目开发过程中，通过使用多倍图从而提高图片质量，解决高清设备中的模糊问题。
css视口、多倍图
leekos的博客，分享web安全相关知识~
02-09 359
2.3理想视口ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 ● 理想视口,对设备来讲,是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 ● meta 视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽 2.4总结 ●视口就是浏览器 显示页面内容的屏幕区域 ●视口分为布局视口、视觉视口和理想视口 ●我们移动端布局想要的是理想视口就是手机屏幕有多宽 ,我们的布局视口就有多宽 ●想...
CSS基础：移动端开发常识，多倍图初始化等
u011863822的博客
03-26 2616
了解 移动开发页面也是需要考虑一些问题，具体如下 兼容性 移动端浏览器的兼容性要比PC版的兼容性要求会相对低一些，毕竟PC浏览器的除了五大内核不同衍生的浏览器外，还有就是版本，不同版本导致的兼容性，让前端开发的时候焦头烂额的，而浏览器要好点，毕竟安卓机子都是除了谷歌原生系统就是原生系统衍生的国内版本，所有其webkit内核在安装机子上都兼容，而浏览器也是用这个内核（sa’fari内核也是webkit）。 手机屏幕 移动端的设备屏幕，我们很容易发现不同的手机型号哪怕就是同一个牌子手机的屏幕大小有可能就不相同，
多倍图
weixin_42378409的博客
03-27 301
移动端基础知识以及适配方法.pdf
04-16
### 移动端适配方法 1. **视口（Viewport）**： - **布局视口（layout viewport）**：移动设备浏览器的默认视口，通常较宽，这样PC端的网站也可以在手机上正常显示。 - **视觉视口（visual viewport）**：代表...
解答移动端适配方案的正确姿势
最新发布
SevgiliD的博客
12-19 803
1. flex布局，2.百分比布局，3.vw+视口：px转成vw；⼿动计算vw； Less的映射来计算；postcss-px-to-viewport的插件（需依赖webpack或Vite）；ccsrem VSCode插.....
"移动端CSS学习笔记及技术要点
在学习移动端CSS的过程中，有一些基础知识和技巧是需要掌握的，比如移动端浏览器的调试、viewport设置、背景缩放、多倍图切图、移动端主流方案和特殊样式等。 移动端CSS的学习内容主要包括以下几个方面： 1. ...
移动端滑动特效
04-08
2. 使用CSS设置滑动容器的宽度为多倍内容宽度，以便于滑动。 3. 通过CSS3的`transform`和`transition`属性定义滑动效果。 4. 在JavaScript中添加事件监听器，处理`touchstart`、`touchmove`和`touchend`事件。 5. ...
移动端多倍图自适应
cxz
05-17 434
1.第一种方法 通过 css 的 DevicePixelRatio 媒体查询属性: /*默认大小*/ .photo { background-image: url(image100.png); background-size: 100px 100px; } /* 如果设备像素大于等于2，则用2倍图 */ @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) {
35. 多倍图
potato123232的博客
07-11 423
目录1 物理像素与物理像素比2 多倍图3 多倍精灵图物理像素(设备分辨率)是屏幕显示的最小颗粒，是真实存在的，移动端设备会在出厂时进行设置，比如苹果6的物理像素的750*1334我们使用的px不一定等于1个物理像素，我们以ipone6距离，虽然它的分辨率是750x1334，但它折成px，是375x667我们可以搞一个375x667的盒子看能不能把页面占满发现刚好可以完全占满（你可以在chrome调试工具中将宽与高减小1px，减小后发现会留出一条缝）那么这里就可以引入物理像素比(dpr)的概念，物理像素
2倍图-多倍图
qq_40231344的博客
07-12 760
物理像素是屏幕显示的最小单位，是物理真实存在的，在出厂的时候就已经设置好了。 PC端1px=一个物理像素点，但是在移动端就不尽相同。 物理像素比/屏幕像素比=1个px能显示的物理像素的个数 在PC端，1px=1个物理像素，但是在移动端就不尽相同。 1个px能够显示的物理像素点的个数称为物理像素比。 有的1px需要2个物理像素填充，这样图片看起来更加清晰。就是说在PC端的图片放在移动端时被放大了1倍。这时候就要做2倍图，先准备一个100*100的，在手动缩小成50*50，然后在移动端显示的时候会变成
移动端处理多倍屏的问题
weixin_30414635的博客
02-27 991
一、认识物理像素、设备独立像素、设备像素比 　　在css中我们一般使用px做单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同设备或不同环境中，CSS的1px所代表的物理像素是不同的。在pc端，CSS的1px一般对应着电脑屏幕的1个物理像素，但是在移动端，css的1px等于几个物理像素和屏幕像素密度有关。 物理像素(physical pix...
HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （一）
weixin_30279671的博客
06-16 276
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/31498319 上传基本是项目中经常出现的，一般采用： 1、form提交 2、flash 3、html5 form提交会刷新页面，很难做到异步上传；flash可能是用得比较多了，因为可以兼顾到几乎所有的浏览器，我之前一直会用jquery的uploadify作为项...
css二倍图的使用
weixin_30414305的博客
04-18 999
使用 CSS 的 DevicePixelRatio 媒查询属性 参考 CSS 或 srcset 让浏览器自动切换 1X/2X/3X图像 移动端项目中 @2x 图 和 @3x 图 的使用（需要支持css3） /*默认大小*/ .photo {background-image: url(image100.png);} /* 如果设备像素大于等于2，则用2倍图 */ @media screen and ...
前端一倍图、二倍图、多倍图
热门推荐
wgod
07-25 2万+
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素， 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。 这里是引用 设备像素:也叫物理像素，显示设备上最微小的物理部件。 比...
移动Web笔记——视口/二倍图/多倍图/背景缩放
Yomuki的博客
11-29 669
一、视口 视口 viewport 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口，理想视口。 1.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面再手机上显示的问题 IOS,Android基本将这个视口分辨率设置为980px,所以PC上的网页大多都能再手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 1.2 视觉视口 visual viewport 用户正在看到网站的区域 我们可以通过缩放去操
移动端2倍图和3倍图的处理方法
xiaopangzipy的博客
11-07 2178
/* 如果设备像素大于等于2，则用2倍图 */ @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) { .img { background-image: url(../images/[email protected]); background...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值