移动端一倍图，二倍图，三倍图尺寸的问题

最新推荐文章于 2024-11-15 10:36:53 发布
原创 最新推荐文章于 2024-11-15 10:36:53 发布 · 1.9w 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解析了在不同倍率图片下如何使用REM单位进行尺寸换算，包括1倍图、2倍图及3倍图的实例说明。

1 rem = html font-size = 50px

在reset.css文件中

假如一个二倍图的div高度是86px

那么对应的我们应该填43px

移动端一般用rem表示宽高

所以这里我们应该填写0.86rem

如果一个一倍图的高度是23px

那么我们应该填写0.46rem

同理3倍图

day20 - 响应式布局、媒体查询media、倍图、picture标签
u010544438的博客
08-10 119
响应式布局与图片优化摘要 响应式布局通过媒体查询实现同一页面在不同设备上的适配显示，主要使用min-width/max-width判断视口宽度。常见应用场景是官网展示类页面，业务复杂系统不建议使用。 关键知识点： 物理像素与逻辑像素的区别，设备像素比(DPR)概念 二倍图/三倍图原理：为高清屏提供更高分辨率图片 图片优化方案： picture元素配合source根据媒体条件切换不同图片 img的srcset属性配合sizes按需加载适配图片 暗黑模式适配方案 实际开发建议： 从大屏到小屏实现布局 合理设置临
十五、移动端vw+rem等比缩放布局开发的详细步骤：包含px与rem的单位换算、二倍图以及如何使用UI给的设计稿等（开发工具HBuilder）
快乐de馒头
09-05 624
我们在上一步中设置了根元素的大小，进行vw单位换算时，使用的是font-size:100px。确定页面的哪一块是固定的，哪一块是可以滑动的。例如商城应用中，顶部的搜索框和底部的导航栏是固定的，中间的内容区域是可滑动的，即上中下结构。用ps之类的软件打开UI给的二倍图的设计稿，如果测量得到的是750px,除以2后就是 375px，即该。根元素字体大小会转换vw单位，具体的值根据UI给的设计稿决定。根据设计稿，发现大部分的字体大小是24px，24/2/100=0.12rem。2 此时就能确定根元素的设置。
前端一倍图、二倍图、多倍图
热门推荐
wgod
07-25 2万+
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素， 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。 这里是引用 设备像素:也叫物理像素，显示设备上最微小的物理部件。 比...
UI设计中的倍图
COOL_BEAR_XX的专栏
04-22 6848
IOS开发中需要把UI设计的图片适配为1x,2x,3x倍图的大小，如何在Photoshop中加工呢？ 之前建的工程为375x667大小的，以为就是iPhone的屏幕大小，最后发现这样的大小不符合切图的像素大小。 在网上查到如下的设置像素大小图示， 最好一开始就把工程设置为3x图，1242*2208的大小，这样在需要2x图的时候就可以把3倍图拿来修改就OK了图片就不会模糊。
二倍图三倍图什么意思_ios切图（一倍图+二倍图+三倍图）
weixin_42185419的博客
02-22 4260
工作中，一直做移动端app(不包括ios和ipad)，所以对一些手机端的比较熟悉，但没做过ipad端的，今天工作中正好有碰到一个ipad设计(效果图+切图)，刚开始以为和手机端一样，但做的过程中发现还是有不一样的地方，比如常识性的切图(一倍图，@2x,@3x)，我开始以为只要图片够大，就不用整什么两倍图，三倍图的，只要图片能自适应各种屏幕就行了吧，但后来发现还是必须要有的，ios系统必须要这个bg...
网页布局中的 px,em,rem,pt
weixin_30773135的博客
07-05 223
设备像素:也叫物理像素，显示设备上最微小的物理部件。 比如 iphone 5：640 x 1136px.不同的机型有不同的设备像素,固定死的。 这里需要讲一下显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。 高分辨率屏幕：在 Windows 系统下，提高屏幕分辨率一般都是通过提高屏幕尺寸。而随着屏幕分辨率的提升，图像和文字显示...
Android 倍图
shi450561200的博客
10-07 347
通过计算可以得出，一般情况下：360px 宽的屏幕为mdpi（1倍图）480px 宽的屏幕为hdpi（1.5倍图）720px 宽的屏幕为xhdpi（2倍图）1080px 宽的屏幕为xxhdpi（3倍图）1440px 宽的屏幕为xxxhdpi（4倍图）· 分辨率：屏幕水平方向上的像素 × 垂直方向上的像素，单位为px；Pixel per inch，每英寸像素数，为像素密度，单位：像素/每英寸针对显示器设计时，ppi=dpi。dots per inch，每英寸像素点，为像素密度，单位：像素/每英寸；
ios切图（一倍图+二倍图+三倍图）
xysypch的博客
11-23 2万+
工作中，一直做移动端app（不包括ios和ipad），所以对一些手机端的比较熟悉，但没做过ipad端的，今天工作中正好有碰到一个ipad设计（效果图+切图），刚开始以为和手机端一样，但做的过程中发现还是有不一样的地方，比如常识性的切图（一倍图，@2x,@3x），我开始以为只要图片够大，就不用整什么两倍图，三倍图的，只要图片能自适应各种屏幕就行了吧，但后来发现还是必须要有的，ios系统必须要这个bg...
移动端三倍图 UI设计
weixin_40003755的博客
11-15 575
在移动端开发中，设备屏幕的分辨率越来越高，尤其是Retina屏幕的出现，使得屏幕的物理像素密度大大增加。例如，iPhone 6的屏幕分辨率为375px * 667px，但其物理像素密度为440ppi，这意味着每个CSS像素由多个物理像素组成。如果直接使用1倍图（即1px CSS像素对应1px 物理像素）三倍图：按1242X2208 至于为什么三倍图是这个尺寸，有兴趣的可以百度下。iOS系统的基准设计尺寸是375*667（也就是俗称的一倍图）二倍图：按750X1334。
CSS3移动端(介绍、Chrome DevTools、视口、倍图、backgroud-size、开发方案、CSS初始化、特殊样式)
Bulut0907
02-26 1118
国内的手机浏览器都是根据Webkit内核修改的，所以兼容移动端主流浏览器，处理Webkit内核浏览器即可不同型号的手机，屏幕尺寸不同、像素分辨率不同、物理像素比不同如iphone 12 pro屏幕的像素分辨率为(1170 x 2532), 正常可以显示宽1170px像素和高2532px像素的内容。但其物理像素比为3(Retina视网膜屏幕显示技术)，则只可以显示宽390px像素和高844px像素的内容，这样3个物理像素点显示1px像素会更清晰。
三倍图生成二倍图
06-15
三倍图生成二倍图，或者二倍图生成三倍图。很好用的一个XCode插件
移动端Web开发入门学习笔记
最新发布
11-23
在设计移动端网页时，为了解决高清设备上的图片模糊问题，通常使用二倍图、三倍图或四倍图。二倍图意味着实际准备的图片尺寸比需要的尺寸大两倍，从而在移动端看到的是原图效果。背景图的缩放可使用CSS的...
React - Sass 移动端使用 2 3倍图
sinat_33184880的博客
04-03 728
安装 node-sass npm i node-sass -D 项目目录结构 mixins.scss 文件 // mixins.scss @mixin bg-image ($url) { background-image: url($url + '@2x.png'); background-size: 100%; background-repeat: no-repeat; ...
3倍屏字体大小设置
Hu_wenpeng的博客
01-05 1227
package com.example.two;import com.example.two.utils.UiUtils;import android.app.Activity; import android.os.Bundle; import android.util.TypedValue; import android.view.View; import android.widget.TextV
为什么常用二倍图，流式布局中一倍图是否靠得住
夸克IT
10-14 1852
常用布局第一篇——流式布局 回顾 上一篇中我们结束了 css3 中的内容，回顾css3 我们深入的学习了css中的东西，在css的基础上c3又有了非常好的创新，这些都在日常的工作中特别的常用，所以需要好好温故而知新。h5c3的基础学完之后，就开始布局了，今天是布局的第一篇。先来看看流式布局。 视口 视口（viewport） 就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口 布局视口 一般移动设备的浏览器默认设置了一个布局视口，用于解决早期pc端页面在手机上显示的问题 IOS、
安卓设计尺寸记录
sd2131512的专栏
06-01 2196
近期尝试按照UX设计的图稿，开发一个安卓应用。中间遇到了一些尺寸问题，记录一下。UX使用sketch设计，上传到蓝湖，用的是1倍图360dp.(通常1倍图安卓是360dp，苹果是375dp)，蓝湖右上角是可以调整其他倍图的。目前我收上的测试手机是华为P40，参考谈谈安卓屏幕相关信息_dev晴天的博客-优快云博客可以打印出该手机，宽度为1080px，高度2211px ，相对密度3通过学习视频 安卓设计规范_基础篇（上）_哔哩哔哩_bilibili了解到：常见安卓尺寸： 720*1280px 1080*
[css] 说说你对前端二倍图的理解？移动端使用二倍图比一倍图有什么好处？
歌谣的博客
02-20 2971
[css] 说说你对前端二倍图的理解？移动端使用二倍图比一倍图有什么好处？ 二倍图是指单位面积下设备像素与css像素个数之比为 4 的位图。 移动端使用二倍图可以在Retina屏幕下保真展示。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值