为什么在像素比例相同的手机上，2个元素的高度会不同？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

面试官：你了解过移动端适配吗？

其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 1、为什么要移动端适配？...就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。...为什么要知道设备像素比呢？因为这个像素比会产生一个非常经典的问题，1像素边框的问题。...这些浏览器会忽略用rem设定的字体大小举个例子： //假设我给根元素的大小设置为14px html{ font-size：14px } //那么我底下的p标签如果想要也是14像素 p{...这个方案只是个过渡方案，为什么说是过渡方案因为当年viewport在低版本安卓设备上还有兼容问题，而vw，vh还没能实现所有浏览器兼容，所以flexible方案用rem来模拟vmin来实现在不同设备等比缩放的

1.4K1 0

移动 web 开发最佳实践

所以说，移动端web开发面临的最大问题就是就是多屏适配，这是一个设计师、开发和测试都要面临的问题，如何做到在不同分辨率，不同屏幕密度上的手机上，同样大小的UI元素，看起来是一样大的。...说白了就是同一套代码在不同分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。 1、一些概念在解决问题之前，先了解一些概念。...这个尺寸在H5上非常流行，iphone 6 6s 7的尺寸大小相同，分辨率相同，都为750x1334，向上拉伸，向下压缩，失真的比例不会太大。...当遇到这种情况时，浏览器会取它们两个中较大的那个值。但为什么要写两个？...(rem基准值相同)，而事实上他们的屏幕宽度并不相等，它们的布局也应该有所不同。

3.1K1 0

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

是的

没有找到

【总结】移动应用界面设计的尺寸设置及规范

尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数。...* 简单理解的话，px（像素）是我们UI设计师在PS里使用的，同时也是手机屏幕上所显示的，dp是开发写layout的时候使用的尺寸单位。为什么要把sp和dp代替px？...原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。...手机上看来同一大小的字磅值是一样的，但是换算成不同分辨率手机的字号px值不一样。...在iPhone界面上元素的定位、尺寸是通过一个单位point，而非px，屏幕上固定有320x480pt，retina屏两倍的分辨率改变的只是pt和px之间的比例而已，这样就能实现不改变程序，只上传两套图片就兼容两个分辨率

3.6K4 0

Android 目前最稳定和高效的UI适配方案

首先，大家都知道，在标识尺寸的时候，Android并不推荐我们使用px这个真实像素单位，因为不同的手机之间，分辨率是不同的，比如一个96*96像素的控件在分辨率越来越高的手机上会在整体UI中看起来越来越小...dp指的是设备独立像素，以dp为尺寸单位的控件，在不同分辨率和尺寸的手机上代表了不同的真实像素，比如在分辨率较低的手机中，可能1dp=1px,而在分辨率较高的手机中，可能1dp=2px，这样的话，一个96...比如，几部相同分辨率不同尺寸的手机的ppi可能分别是是430,440,450,那么在Android系统中，可能dpi会全部指定为480.这样的话，dpi/160就会是一个相对固定的数值，这样就能保证相同分辨率下不同尺寸的手机表现一致...的Pixel2（19201080）的dpi是420，也就是说，在Pixel2中，1dp=2.625px,这样会导致相同分辨率的手机中，这样，一个100dp100dp的控件，在一般的1080P手机上，可能都是...然后我们就可以直接在布局文件里面使用具体的像素值了，比如，设计稿上是96*96,那么我们可以直接写96px，APP运行时，框架会帮助我们根据不同手机的具体尺寸按比例伸缩。

1.4K2 0

Android开发稳定和高效的UI适配方案总结

首先，大家都知道，在标识尺寸的时候，Android并不推荐我们使用px这个真实像素单位，因为不同的手机之间，分辨率是不同的，比如一个96*96像素的控件在分辨率越来越高的手机上会在整体UI中看起来越来越小...比如，几部相同分辨率不同尺寸的手机的ppi可能分别是是430,440,450,那么在Android系统中，可能dpi会全部指定为480.这样的话，dpi/160就会是一个相对固定的数值，这样就能保证相同分辨率下不同尺寸的手机表现一致...我们可以说，通过dp加上自适应布局和weight比例布局可以基本解决不同手机上适配的问题，这基本是最原始的Android适配方案。...的Pixel2（1920*1080）的dpi是420，也就是说，在Pixel2中，1dp=2.625px,这样会导致相同分辨率的手机中，这样，一个100dp*100dp的控件，在一般的1080P手机上...然后我们就可以直接在布局文件里面使用具体的像素值了，比如，设计稿上是96*96,那么我们可以直接写96px，APP运行时，框架会帮助我们根据不同手机的具体尺寸按比例伸缩。

4913 0

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

或者说，当设备尺寸相同时，像素越密集，画面就越精细。那么，当我们在 CSS 中为一个元素设置属性 width: 250px; 时，会发生什么？这个元素的宽度究竟是多少像素呢？...事实上，这里已经涉及了两种不同的像素：物理像素和 CSS 像素。物理像素（设备像素，device pixels）指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。...在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度。...1.2 三种视口移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。...定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale [0.0-10.0] 定义放大最大比例，它必须小于或等于maximum-scale

2.3K2 0

前端自适应方案总结，前端最佳自适应方案

一个CSS像素对应多少个设备像素是根据当前的缩放比例 12px对应36px，缩放0.5，12px对应18px。扩大2.0,12px对应72px。...，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？...没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。...可以看做是字符高度,(不一定等于行高)，半角符号或字母(长方形)的宽度为px值的一半，全角符号或汉字，由于是正方形，宽度即等于高度，因此宽高都等于px值 6.为什么要根据不同大小的屏幕设置rem？...仍有不足通过vw无法设置最小的网页宽度，网页会随着屏幕的缩小无限缩小通过Flex Column去自适应高度，rem作为单位自适应宽度。

2.4K3 0

QQ天气H5-前端完整解析

并且为了更好的交互效果，天气页面会根据8种不同的天气信息，展现相应的天气动画。如下雨下雪，飘云，日光闪烁等动画效果。 ? 在开发手Q天气的时候，学习到许多，发现有许多地方值得写一下。以下是我的总结。...3、单纯的rem没解决高度适配的问题。单纯的rem没解决高度适配的问题，当然目前也没有特别多高度适配的场景，因此建议如果需要在使用rem基础上还做相应的高度适配，就要通过相应的js去辅助啦。...会有不同的宽度而导致不均分如上面css所示，我设置了子元素width为1%（只有设置了item是统一的width就行，不一定需要是1%）就可以解决这个问题 ---- HTML5 canvas 我们可以看到在页面中带有温度折线图以及下雪下雨的动画...具体实现可以看下面这个文章 - 前端如何呼风唤雨 canvas需注意点 1、canvas高清屏模糊在绘制折线图的时候，我们发现，折线图在高清屏下十分模糊，这是为什么呢？...的值为2，一张100x100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，因此该图片在retina屏幕上实际会占据200x200像素的空间，相当于图片被放大了一倍，因此图片会变得模糊

2.2K3 0

QQ天气H5-前端完整解析

并且为了更好的交互效果，天气页面会根据8种不同的天气信息，展现相应的天气动画。如下雨下雪，飘云，日光闪烁等动画效果。 ? 在开发手Q天气的时候，学习到许多，发现有许多地方值得写一下。以下是我的总结。...3、单纯的rem没解决高度适配的问题。单纯的rem没解决高度适配的问题，当然目前也没有特别多高度适配的场景，因此建议如果需要在使用rem基础上还做相应的高度适配，就要通过相应的js去辅助啦。...会有不同的宽度而导致不均分如上面css所示，我设置了子元素width为1%（只有设置了item是统一的width就行，不一定需要是1%）就可以解决这个问题 HTML5 canvas 我们可以看到在页面中带有温度折线图以及下雪下雨的动画...具体实现可以看下面这个文章 - 前端如何呼风唤雨 canvas需注意点 1、canvas高清屏模糊在绘制折线图的时候，我们发现，折线图在高清屏下十分模糊，这是为什么呢？...的值为2，一张100x100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，因此该图片在retina屏幕上实际会占据200x200像素的空间，相当于图片被放大了一倍，因此图片会变得模糊

2.8K10 1

移动端viewport属性说明笔记

屏幕中的像素越多，同一范围内能看到的内容就越多。或者说，当设备尺寸相同时，像素越密集，画面就越精细。...根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。...iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。 ?...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值，即当页面第一次 load 的时候缩放比例

1.6K2 0

移动web开发

IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....PC端页面,1px等于1个物理像素点,但是移动端就不尽相同. 一个px点能显示的物理像素点的个数,称为物理像素比或者屏幕像素比....不同设备的不同像素比: PC端和早前的手机屏幕/普通手机屏幕:1CSS像素=1物理像素 Retina(视网膜屏幕)概念,可以把更多的物理像素点压缩在一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度...对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊. 在标准的viewport中,使用倍图来提高图片质量,解决在高清设备中的模糊问题....背景缩放 background-size 语法: background-size: 宽度高度; 假如有两个值,那么就是直接拉大或缩小图片,如果是只有一个值,那就必然是宽度,高度默认不变,所以是按照宽度等比例缩放

2.3K2 1

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

理论上来讲，在白色手机上相同大小的图片和文字，在黑色手机上会被缩放一倍，因为它的分辨率提高了一倍。这样，岂不是后面出现更高分辨率的手机，页面元素会变得越来越小吗？ ?...我们必须用一种单位来同时告诉不同分辨率的手机，它们在界面上显示元素的大小是多少，这个单位就是设备独立像素( DeviceIndependentPixels)简称 DIP或 DP。...为了适配所有机型，我们在写样式时需要把物理像素转换为设备独立像素：例如：如果给定一个元素的高度为 200px(这里的 px指物理像素，非 CSS像素)， iphone6的设备像素比为 2，我们给定的 height...为什么强调普通的使用距离下呢？...六、移动端适配方案尽管我们可以使用设备独立像素来保证各个设备在不同手机上显示的效果类似，但这并不能保证它们显示完全一致，我们需要一种方案来让设计稿得到更完美的适配。

2.1K1 0

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

理论上来讲，在白色手机上相同大小的图片和文字，在黑色手机上会被缩放一倍，因为它的分辨率提高了一倍。这样，岂不是后面出现更高分辨率的手机，页面元素会变得越来越小吗？ ?...我们必须用一种单位来同时告诉不同分辨率的手机，它们在界面上显示元素的大小是多少，这个单位就是设备独立像素( DeviceIndependentPixels)简称 DIP或 DP。...为了适配所有机型，我们在写样式时需要把物理像素转换为设备独立像素：例如：如果给定一个元素的高度为 200px(这里的 px指物理像素，非 CSS像素)， iphone6的设备像素比为 2，我们给定的 height...为什么强调普通的使用距离下呢？...六、移动端适配方案尽管我们可以使用设备独立像素来保证各个设备在不同手机上显示的效果类似，但这并不能保证它们显示完全一致，我们需要一种方案来让设计稿得到更完美的适配。

2K2 0

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

理论上来讲，在白色手机上相同大小的图片和文字，在黑色手机上会被缩放一倍，因为它的分辨率提高了一倍。这样，岂不是后面出现更高分辨率的手机，页面元素会变得越来越小吗？ ?...我们必须用一种单位来同时告诉不同分辨率的手机，它们在界面上显示元素的大小是多少，这个单位就是设备独立像素( DeviceIndependentPixels)简称 DIP或 DP。...为了适配所有机型，我们在写样式时需要把物理像素转换为设备独立像素：例如：如果给定一个元素的高度为 200px(这里的 px指物理像素，非 CSS像素)， iphone6的设备像素比为 2，我们给定的 height...为什么强调普通的使用距离下呢？...六、移动端适配方案尽管我们可以使用设备独立像素来保证各个设备在不同手机上显示的效果类似，但这并不能保证它们显示完全一致，我们需要一种方案来让设计稿得到更完美的适配。

1.9K4 1

java移动端开发_移动端开发

(注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。)...(这种情况我也就不给大家演示了，这明显是一个显而易见的道理，比如你在pc端的网页放在手机上能一样吗？) 而且，不同手机的实际宽度是不一样的。...3.移动端尺寸是同一个网页在不同尺寸手机中的效果。...仔细观察，你会发现，网页中的很多元素，随着视口的宽度变大，尺寸也会随之变大，无论是字体、高度、间隙都有这样的特点(这当然不会是响应式布局啦，毕竟响应式布局那么麻烦，脑子有坑才会一点一点的去调吧)。...这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。注：border边框大小除外 (既然有问题，怎么会没有解决办法呢？

5K2 0

Android目前最稳定和高效的UI适配方案

首先，大家都知道，在标识尺寸的时候，Android并不推荐我们使用px这个真实像素单位，因为不同的手机之间，分辨率是不同的，比如一个96*96像素的控件在分辨率越来越高的手机上会在整体UI中看起来越来越小...比如，几部相同分辨率不同尺寸的手机的ppi可能分别是是430,440,450,那么在Android系统中，可能dpi会全部指定为480.这样的话，dpi/160就会是一个相对固定的数值，这样就能保证相同分辨率下不同尺寸的手机表现一致...我们可以说，通过dp加上自适应布局和weight比例布局可以基本解决不同手机上适配的问题，这基本是最原始的Android适配方案。...的Pixel2（19201080）的dpi是420，也就是说，在Pixel2中，1dp=2.625px,这样会导致相同分辨率的手机中，这样，一个100dp100dp的控件，在一般的1080P手机上，可能都是...然后我们就可以直接在布局文件里面使用具体的像素值了，比如，设计稿上是96*96,那么我们可以直接写96px，APP运行时，框架会帮助我们根据不同手机的具体尺寸按比例伸缩。

1.8K2 0

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

响应式界面的四个层次同一页面在不同大小和比例上看起来都应该是舒适的；同一页面在不同分辨率上看起来都应该是合理; 同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；同一页面在不同类型的设备...，区块的边距也应该变化能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏...我们通常说的H5手机适配也就是指的这两个维度：适配不同屏幕大小，也就是适配不同屏幕下的 CSS 像素适配不同像素密度，也就是适配不同屏幕下 dpr 不一致导致的一些问题适配不同屏幕大小适配不同屏幕大小...最早移动端屏幕 CSS 像素适配方案是CSS媒体查询。但是无法做到高保真接近 100% 的还原。适配不同屏幕大小其实只需要遵循一条原则，确保页面元素大小的与屏幕大小保持一定比例。...也就是：按比例还原设计稿假设我们现在拿到标注为 375*667 的大小的设计稿，其中一个元素的标注如下：以页面宽度为基准的话，那么，元素的宽度为：209/375 = 55.73% 元素的高度为：80

3.1K3 2

第119天：移动端：CSS像素、屏幕像素和视口的关系

iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...2、visual viewport（视觉视口）和物理像素 visual viewport（视觉视口）物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。...dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。...CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素）。...：属性名取值描述 width 正整数或 device-width 定义视口的宽度，单位为像素 height 正整数或 device-height 定义视口的高度，单位为像素，一般不用 initial-scale

1.7K5 0

再看CSS长度单位使用，做到胸有成竹

（设备像素） pt points (1pt = 1/72 of 1in) 逻辑像素 pc picas (1pc = 12 pt) 派卡：印刷行业使用的长度单位像素（px）在不同的设备有不同表现。...来看以下两种情况，px 和自然界标准长度单位（这里是英寸）的关系以及清晰度的问题：在相同的屏幕宽高下：如：15.6英寸（396.24毫米）的笔记本电脑：类型每单位像素点个数 1920*xxx的分辨率...1毫米 1920/396.24=4.8个px 1366*xxx的分辨率 1毫米 1366/396.24=3.4个px 结论：前者更清晰在相同的像素点下：如：1366*xxx的分辨率：类型每单位...转换关系：在100%缩放比例下，1个css像素等于1个设备像素。 dpr 为什么移动端设计稿通常是 750px ?...劣：有兼容性问题，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配。

2161 0

Carson带你学Android：最全面、最易懂的屏幕适配解决方案

目录定义使得某一元素在Android不同尺寸、不同分辨率的手机上具备相同的显示效果相关重要概念屏幕尺寸含义：手机对角线的物理尺寸单位：英寸（inch），1英寸=2.54cm Android...为了保证用户获得一致的用户体验效果：使得某一元素在Android不同尺寸、不同分辨率的手机上具备相同的显示效果于是，我们便需要对Android屏幕进行适配。...，要么就会充满所有可用的空间，即按需占据空间大小，能让你的布局元素充分适应你的屏幕尺寸 “图片资源”匹配本质：使得图片资源在不同屏幕密度上显示相同的像素效果做法：使用自动拉伸位图：Nine-Patch...答： “布局控件”匹配本质：使得布局组件在不同屏幕密度上显示相同的像素效果做法1：使用密度无关像素由于各种屏幕的像素密度都有所不同，因此相同数量的像素在不同设备上的实际大小也有所差异，这样使用像素...，如果有某个分辨率缺少，将无法完成该屏幕的适配过多的分辨率像素描述xml文件会增加软件包的大小和维护的难度 “图片资源”匹配本质：使得图片资源在不同屏幕密度上显示相同的像素效果做法：提供备用位图（

1.5K1 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭