图标在不同设备上的视区和像素密度会变得模糊 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

移动端与PC端页面布局区别、background-size 背景图片的缩放

视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况...这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。...视网膜屏幕（retina屏幕）清晰度解决方案视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2...倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。...图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css

2.9K2 0

移动端自适应的常见手段

物理像素（Physical pixels）物理像素是一个设备的实际像素数。逻辑像素（Logical pixels）是一种抽象概念。在不同的设备下，一个逻辑像素代表的物理像素数不同。...CSS 像素是逻辑像素。为了在不同尺寸和密度比的设备上表现出一致的视觉效果，使用逻辑像素描述一个相同尺寸的物理单位。在具有高密度比的屏幕下，一个逻辑像素对应多个物理像素。...相关问题：图片或 1px 边框显示模糊在移动端中，常见图片或者 1px 的边框在一些机型下显示模糊/变粗的问题。基于对像素相关的概念理解，可知 CSS 中的 1px 是指一个单位的逻辑像素。...一个单位的逻辑像素映射到不同像素密度比的设备下，实际对应的物理像素不同。因此，同样尺寸的图片在高密度比的设备下，由于一个位图像素需要应用到多个物理像素上，所以会比低密度比设备中的视觉效果模糊。...source 元素可以按需配置 srcset、media、sizes 等属性，以便用户代理为不同媒体查询范围或像素密度比的设备配置对应的图片资源。

1.8K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端不止：Retina屏幕下两倍图

根据上面的分析，分辨率提升了，那么图标和文字尺寸就会变小，但是Mac的操作系统不同，它自动采取相应的模式（如Mac下的HiDPI）进行适配，将缩小后的字体（苹果一直采用矢量字体）和图标重新放大，这样苹果用了更多的像素数来显示同样的内容...但是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，导致每个像素点实际上有4倍的普通像素点。对于图片来说也是如此：这个时候，屏幕会怎么处理呢？...只不过，这里是苹果Retina屏幕的计算方法，一个CSS像素点实际分成了四个，造成颜色肯定会存在偏差（非全保真的显示），于是，我们看上去就变得模糊了（特别是图片，非常的明显）。...devicePixelRatio设备像素比 window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。...常常需要被处理的图片有：网站的logo、彩色图片图标，因为他们的图像大小都偏小，在Retina上物理像素放两倍显示就会出现模糊情况，这个时候，你就需要通过媒体查询或者JS操作来替换图片。

2.7K5 0

Android设计 - 图标设计概述（Iconography）

但是你可以在所有的设备上通过为每个图标提供多尺寸来为你的图标提供更好的视觉效果。当你的app运行时，安卓检查设备屏幕的特性并且加载适当的指定密度的你app中的资源文件。...因为你将为每个图标实现多个尺寸以支持多个不同的密度，下面的设计指南使用 dp 作为图标尺寸的计量单位，它是以中等密度（MDPI）屏幕作为像素尺寸的基础。 ?...尺寸和缩放启动图标在移动设备中必须是48x48dp 在Google Play显示的启动图标必须是512*512像素比例大小完整的资源，48x48 dp 样式使用独特的侧影，三维的，前景视图的...使用大纸板开始因为你需要为不同的屏幕密度创建资源，最好在大的多倍于目标图标尺寸的纸板上开始你的图标设计。...【译者注：大意是：将一个位图放大的话，会导致图像失真，变得模糊脆弱】为图标资源使用公共的命名规范尝试去为文件命名，这样的话，当它们按字母顺序排列时，相关联的的资源将会作为一组在一起存在于一个文件夹内

9700 0

浅谈移动端中的视口（viewport）

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。...那么，当我们在 CSS 中为一个元素设置属性 width: 250px; 时，会发生什么？这个元素的宽度究竟是多少像素呢？事实上，这里已经涉及了两种不同的像素：物理像素和 CSS 像素。...它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。...这等于拿一个2倍的放大镜去看图片，图片就会变得模糊。这时，就需要使用 @2x 甚至 @3x 图来避免图片的失真

2K2 0

了解 Android 的矢量图片格式：`VectorDrawable`

因为 Android 设备通常具有不同的尺寸、形状和屏幕像素密度，所以我更喜欢用与分辨率无关的矢量资源（vector assets）。但它们究竟是什么？有什么益处？需要什么成本？什么时候应该使用它们？...但是，位图资源在重新调整大小后会变得很糟糕。缩小栅格资源是 OK 的（意味着会丢失一些信息），但是放大它们会导致模糊或者色带状的失真，因为它们必须插入缺失的像素。 ?...放大的位图（左）与放大的矢量图（右）这就是为什么在 Android 上我们需要为不同密度的屏幕提供多个版本的位图资源： res/drawable-mdpi/foo.png res/drawable-hdpi...Android 在受限制的移动设备上运行，因此支持整个 SVG 规范并不是一个现实的目标。然而，SVG 包含一个路径规范，它定义了如何描述和绘制形状。使用此 API，您可以表达大多数矢量形状。...第二个视口大小定义虚拟画布，或者定义所有后续绘制命令的空间坐标。固有和视口尺寸可以不同（但应该以相同的比例）— 如果你需要，可以在 1*1 画布中定义矢量。

2.4K3 0

H5移动端开发学习总结

CSS像素:px(设备独立像素) 逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript...但当在高密度屏幕上，例如苹果的视网膜屏幕，一个CSS像素跨越了多个设备像素。如果用户缩小到足够的程度，一个CSS像素会变得明显比一个设备像素小。...这个width为200px的元素跨越了200个CSS像素。而200个CSS像素相当于多少个设备物理像素取决于屏幕的特性(是否是高密度)和用户进行的缩放。...例如：在苹果的视网膜屏幕上，视网膜屏幕的像素密度是普通屏幕的两倍，那么这个元素就跨越了400个设备物理像素。如果用户放大，它将跨越更多的设备物理像素。...理论上：1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。

9422 0

【学习图片】1.图片简史

在我们认为我们对用户体验有更多影响力的时候，使用固定宽度布局使这个过程变得简单易懂。设置图像尺寸特别容易。对于一个宽500像素，高300像素的图像，只需指定相同大小的图像就行了。...你通常不希望放大图像，也就是说，把显示为比源图像的固有大小更大的大小。显示的图像会显得模糊和有点像颗粒的样子。...随着第一款“Retina”设备的出现，情况变得更加糟糕，因为显示密度成为了视口大小的关注点。为了适应高密度显示器，图像源需要更大的内在宽度。...通过在src中提供浏览器一个800像素宽的源图像，并在CSS中指定它应该以400像素宽显示，结果是以双倍像素密度渲染的图像。...单一图像源适合布局中最大的可能空间和高密度显示，当然可以在视觉上适合所有用户。巨大的高分辨率图像源在小的低密度显示器上呈现出来就像其他任何小的低密度图像一样，但感觉更慢。

1.1K4 0

前端必备，响应式Web设计的9项基本原则

相对单位你的设计对象可能是台式桌面，也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同，所以我们需要使用灵活可变，并且能够适应各种情况的单位。...使用百分比时，我们说宽度50%就是表示宽度占屏幕大小（或者叫视区，也就是指所打开浏览器窗口的大小）的一半。...断点断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显示3栏，在移动设备上仅显示1栏。大多数CSS属性都可以实现断点之间的变形。断点放置的位置通常取决于内容。...最大和最小值有时候内容占满整个屏幕宽度（例如在移动设备上）是好事，但如果相同的内容在电视屏幕上也撑得满满的，貌似就不太合理了。这就是为什么要有最大/最小值。...因此，将要素放置到容器中就会让它们变得更加好理解，并且简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。

5651 0

【学习图片】11.描述性语法

例如，固有宽度为400px的图像在原始的Google Pixel和较新的Pixel 6 Pro上几乎占据整个浏览器视口 - 这两个设备都有一个标准化的412px逻辑像素宽的视口。...设备的逻辑像素和物理像素之间的比率是该显示的设备像素比（DPR）。 DPR是通过将视口的CSS像素除以设备的实际屏幕分辨率来计算的。...在iPhone 4之前的任何设备的DPR为1：一个逻辑像素对一个物理像素。如果你在DPR为2的显示器上查看该400像素宽的图像，则每个逻辑像素被呈现在显示器的四个物理像素上：两个水平和两个垂直。...在一个 DPR 为2的设备上，选择 large.jpg 作为最接近的匹配项。如果同一图像在600像素宽的视口上渲染，所有这些数学计算的结果将完全不同：80vw 现在是480px。...在HTML规范中编码的源选择算法在选择源的方式上是明确模糊的。一旦源、它们的描述符和图像的渲染方式都被解析了，浏览器就可以自由地做任何它想做的事情，我们不能确定浏览器会选择哪个源。

1.1K2 0

07-移动端开发教程-移动端视口

PC端页面，但是页面缩放后文字会变得非常小，用户需要手动放大缩小才能看清楚，体验非常差。...PC端页面在手机上显示效果苹果首先在浏览器上引入了视口的功能，随后各大浏览器都跟随实现。视口（viewport）是用户网页的可视区域，也可称之为视区。...，不需要缩放查看页面了,而且在不同尺寸下都能基本表现一致，此时的布局视口的状态我们就称为理想视口（ideal viewport）。...(ideal viewport) 所谓的理想视口是：第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清...但是如果width和initial-scale都设置的时候，浏览器会取两个值较大的，所以可以通过width设置一个最小的布局视口宽度。

1.8K12 0

07-移动端开发教程-移动端视口

(css像素) 1.4.1 设备像素(device pixel): 设备像素是物理概念，指的是设备中使用的物理像素,也就是屏幕中的发光的点数(屏幕由很多个发光点组成，每个发光点可以显示不同的颜色，这些发光的点组成了屏幕...PC端页面，但是页面缩放后文字会变得非常小，用户需要手动放大缩小才能看清楚，体验非常差。...PC端页面在手机上显示效果苹果首先在浏览器上引入了视口的功能，随后各大浏览器都跟随实现。视口（viewport）是用户网页的可视区域，也可称之为视区。...，不需要缩放查看页面了,而且在不同尺寸下都能基本表现一致，此时的布局视口的状态我们就称为理想视口（ideal viewport）。...(ideal viewport) 所谓的理想视口是：第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清

1.4K8 0

关于移动端适配，你必须要知道的

导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ......上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。...理论上来讲，在白色手机上相同大小的图片和文字，在黑色手机上会被缩放一倍，因为它的分辨率提高了一倍。这样，岂不是后面出现更高分辨率的手机，页面元素会变得越来越小吗？ ?...所以，为了保证各种设备的显示效果， Android按照设备的像素密度将设备分成了几个区间： ?...这时，1个 CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。

1.9K2 0

关于移动端适配，你必须要知道的

导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ......上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。...理论上来讲，在白色手机上相同大小的图片和文字，在黑色手机上会被缩放一倍，因为它的分辨率提高了一倍。这样，岂不是后面出现更高分辨率的手机，页面元素会变得越来越小吗？ ?...所以，为了保证各种设备的显示效果， Android按照设备的像素密度将设备分成了几个区间： ?...这时，1个 CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。

1.9K4 1

关于移动端适配，你必须要知道的

导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ......上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。...理论上来讲，在白色手机上相同大小的图片和文字，在黑色手机上会被缩放一倍，因为它的分辨率提高了一倍。这样，岂不是后面出现更高分辨率的手机，页面元素会变得越来越小吗？ ?...所以，为了保证各种设备的显示效果， Android按照设备的像素密度将设备分成了几个区间： ?...这时，1个 CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。

2K1 0

移动web开发

上面还能选择手机的型号. 02 视口视口(viewport)就是浏览器显示页面内容的屏幕区域.视口可以分成布局视口,视觉视口和理想视口,当然,我们只需要理想视口....理想视口,对设备来讲,是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 meta...不同设备的不同像素比: PC端和早前的手机屏幕/普通手机屏幕:1CSS像素=1物理像素 Retina(视网膜屏幕)概念,可以把更多的物理像素点压缩在一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度...对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊. 在标准的viewport中,使用倍图来提高图片质量,解决在高清设备中的模糊问题....-webkit-tap-highlight-color: transparent; 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式: -webkit-appearance

2.2K2 0

揭秘移动端px,dpi,dpr

，该值只是个建议值，图片显示出来我们看到的尺寸由屏幕像素密度决定，像素密度越高，图片看起来越小设备独立像素(density-independent pixel) 「设备独立像素」(也叫密度无关像素)，...可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素 )，有时我们也说成是「逻辑像素」在CSS规范中，长度单位可以分为绝对单位和相对单位。...个CSS像素在不同设备上可能对应不同的物理像素数，这个比值是设备的属性（Device Pixel Ratio，设备像素比）设备像素比（dpr）设备像素比缩写为DPR或者DPPX，如下： Device...375 也就是说，1个逻辑像素，在x轴和y轴方向，都需要2个物理像素来显示，则如图： ?...，要渲染在 dpr为2 的Retina屏上，显然不能做到1个位图像素对应一个物理像素，这时候就会模糊，解决方式就是使用二倍图 8080px ?

1.9K1 0

新Sketch设计背后的故事：如何重设计Sketch的工具栏图标？

第一，默认图标尺寸变化对不同密度显示器效果的影响。第二，如何为单色图标带来更多的可识别性。第三，1.5pt线条如何进行描边填充处理？...“如果您没有以正确的方式将形状放置在像素网格上的话，带有 1.5pt 线条的图标在 Retina (@2x) 和非 Retina (@1x) 显示器上看起来非常模糊。”Janik 解释说。...我们知道 4K 和 5K 显示器对于与像素网格不完全对齐的图标更为宽容——但他们认为让图标在低密度屏幕上看起来清晰也很重要。这个问题的答案其实很简单——只要让形状的外边缘看起来很清晰即可。...“虽然在某些情况下使用内部边框会更容易，但当你需要一个带有开放路径的图标时，事情很快就会变得混乱或不一致，”他说。...如您所见，当外边缘没有以完整像素展示时，图标最终看起来会很模糊。最后，Janik 将形状层的每边的周长扩大了 0.25pt，以在完成的图标上创建清晰的外边缘。

1.3K2 0

移动 web 开发最佳实践

还有，就算两个设备尺寸一样，也会存在不一样的屏幕密度（dpi或ppi，每英寸的屏幕包含多少个像素），同样大小的字体或者宽高，放到这两个设备上，屏幕密度大的字体就会显得小。...所以说，移动端web开发面临的最大问题就是就是多屏适配，这是一个设计师、开发和测试都要面临的问题，如何做到在不同分辨率，不同屏幕密度上的手机上，同样大小的UI元素，看起来是一样大的。...物理像素(px，physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。.../ 设备独立像素下图为同样设置css宽高为2px的矩形，在不同的设备上所占的物理像素。...4、1像素问题上述的方法还存在一个问题，先看下图我们设置了width=device-width，这样css样式和设备像素无关了，1px在普通屏上占用了1行像素，在高清屏上占用了2行像素，在3倍屏上就占用了

3K1 0

最新iOS设计规范八｜3大图标和图像规范（Icons and Images)

标准分辨率显示器的像素密度为1:1（或@1X），其中一个像素等于一个点。高分辨率显示屏具有更高的像素密度，提供2.0或3.0的比例因子（称为@2x和@3x）。因此，高分辨率显示需要更多像素的图像。...为所有支持的设备，提供所有图标/图片的高分辨率图像。根据设备的不同，你可以将每个图片中的像素数乘以特定的比例因子来实现这个目的。 ? 设计高分辨率作品使用8像素x 8像素的网格。...在整个应用程序中看到用于不同目的的图标可能会造成混淆。相反，请考虑合并图标的配色方案。参见颜色。针对不同的墙纸测试您的图标。...您无法预测人们会为他们的主屏幕选择哪些壁纸，因此，不要仅仅针对浅色或深色测试您的应用。查看不同照片的外观。在具有动态背景的实际设备上尝试使用该设备，该动态背景会随着设备的移动而改变视角。...iOS会自动为所有图标添加1像素描边，以便它们在“设置”的白色背景上看起来更友好。用户可选的应用程序图标对于某些APP来说，定制是一项能够唤起用户共鸣并增强用户体验的功能。

2.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭