开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么在CSS中调整屏幕大小时，图像会缩小而不是移动？

在CSS中调整屏幕大小时，图像会缩小而不是移动，是因为CSS中的默认行为是根据视口的大小来调整元素的尺寸，而不是位置。

CSS中的尺寸单位有两种：绝对单位和相对单位。绝对单位如像素（px）和英寸（in）是固定的，不会随着屏幕大小的改变而改变。相对单位如百分比（%）和视口单位（vw、vh）则是相对于父元素或视口的大小来计算的。

当调整屏幕大小时，CSS会根据视口的大小重新计算元素的尺寸。如果图像的尺寸使用了相对单位或是以百分比为基础计算的，那么图像的大小会相应地缩小或放大以适应新的视口大小。这是因为相对单位会根据父元素或视口的大小进行缩放。

然而，图像的位置通常是使用绝对单位或固定的像素值来定义的，这些值不会随着屏幕大小的改变而改变。因此，当调整屏幕大小时，图像的位置不会发生变化，而只是图像的尺寸会相应地缩小或放大。

总结起来，CSS中调整屏幕大小时，图像会缩小而不是移动是因为CSS默认根据视口大小调整元素的尺寸，而图像的位置通常是使用固定的像素值来定义的，不会随着屏幕大小的改变而改变。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生应用平台（TKE）：https://cloud.tencent.com/product/tke
腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/umeng
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

探讨移动端适配

在探讨移动端适配前我们先要了解下面几个概念像素分辨率物理像素 CSS像素像素像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。...设备像素（物理像素）设备屏幕的物理像素，表示屏幕上可以铺多少个点点，而不是一个绝对长度单位（例如in,mm）; 单位是px，比如iPhone6的 (750 x 1334px) CSS像素是Web...这是为了让pc端的网页也能在移动端完整展示如果pc端网页超过了980px那么移动端浏览器会对网页进行缩放以正常显示通过结合上面的规律我们得出，视口小于物理像素时，页面展示的元素会放大，视口大于物理像素时元素会缩小...这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好这也就是我们常说的布局视口完美视口（理想视口）默认情况下移动端的像素比为...在视口宽度为 375px大小时渲染处理的盒子宽度为 375px vw,vh与百分比不同的时vw,vh永远相当于视口的宽度，而百分比是相当于父元素的宽度开发者拿到设计稿（假设设计稿尺寸为750px

1.3K1 0

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

其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 1、为什么要移动端适配？...这样就暴露出来一个问题，我们如果手机分辨率翻倍，我们的图像不就要被缩小一倍，我们难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同啊，其实你担忧的问题，我们的乔帮主在很多年前就想到了。...为什么要知道设备像素比呢？因为这个像素比会产生一个非常经典的问题，1像素边框的问题。...在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：我们根据这个像素比，来算出他对应应该有的大小,但是暴露个非常大的兼容问题 ?...屏幕如果你按照设计稿还原的话，字体大小实际上不一样，而人们在一样的距离上希望看到的大小其实是一样的，本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。

1.3K1 0

移动端web开发入门笔记

由于本身没有深入移动端开发，但也可以预见一些移动端开发会碰到的问题： css与js跨平台的问题 h5及诸多新特性的使用响应式布局及屏幕分辨率问题 native交互的使用调试方法性能优化等等当前移动设备的市场...viewport不是一个HTML结构，所以你不能用CSS来控制它。浏览器的这一性质会带来一些影响，比如我们的导航条的宽度设置成100%，那么当页面放大的时候，就会出现下面的状态： ?...它的作用是调整layout viewport的宽度（或者其他，参见文档），那么这里解释一下为什么ppk大神认为移动端上实际还有另一个viewport叫做ideal viewport。...当浏览器窗口缩小时，内容会被剪掉，实际上由于viewport的原因，这种固定大小的页面在移动端的展示也是很不友好的。...%（流式布局）流式布局实际上就是百分比宽度 + 固定高度，当前国内百度的移动端页面就是这么做的。当浏览器宽度缩小，容器也跟着缩小，当设备屏幕较小时，体验也会好一点。

1.7K9 0

移动端web开发入门笔记

由于本身没有深入移动端开发，但也可以预见一些移动端开发会碰到的问题： css与js跨平台的问题 h5及诸多新特性的使用响应式布局及屏幕分辨率问题 native交互的使用调试方法性能优化等等当前移动设备的市场...viewport不是一个HTML结构，所以你不能用CSS来控制它。浏览器的这一性质会带来一些影响，比如我们的导航条的宽度设置成100%，那么当页面放大的时候，就会出现下面的状态： ?...它的作用是调整layout viewport的宽度（或者其他，参见文档），那么这里解释一下为什么ppk大神认为移动端上实际还有另一个viewport叫做ideal viewport。...当浏览器窗口缩小时，内容会被剪掉，实际上由于viewport的原因，这种固定大小的页面在移动端的展示也是很不友好的。...%（流式布局）流式布局实际上就是百分比宽度 + 固定高度，当前国内百度的移动端页面就是这么做的。当浏览器宽度缩小，容器也跟着缩小，当设备屏幕较小时，体验也会好一点。

1.1K1 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

这是营销网站的常见布局，例如，可能有一行 3 个项目，通常带有图像、标题，然后是一些描述产品某些功能的文本。在移动设备上，我们希望它们能够很好地堆叠，并随着我们增加屏幕尺寸而扩展。...，这些 flex 项目会缩小和增长。...但是，这次是水平尺寸（宽度）而不是垂直尺寸（高度）。...对于这些卡片，它们被放置在 Flexbox 显示模式中，使用 flex-direction: column 将方向设置为 column。这会将标题、描述和图像块放在父卡片内的垂直列中。...这只是简单地保持图像的宽高比。使用 aspect-ratio 属性，当我调整卡片大小时，绿色视觉块保持 16 x 9 的宽高比。我们通过 aspect-ratio: 16 / 9 保持此宽高比。

4.5K2 0

详细的聊一聊如何使用响应式图片，提升网页加载速度

这可能会让人困惑，因为w不是CSS单位，实际上w代表图像的实际宽度，以像素为单位。您可以通过在文件浏览器/资源管理器中检查图像来轻松找到这个宽度。...，您可能会注意到下载的图像实际上比您预期的要大。...例如，如果您的页面有一个宽度跨越整个页面的大标题，您可能希望在移动设备和桌面设备上显示不同的图像，因为您可以在桌面设备上使用更多细节的图像。这就是picture元素的用途。...如果你使用的是移动设备，你可能需要缩放来观察图像的变化。我们为较小的屏幕尺寸提供了更裁剪的图像版本，因为在较小的屏幕上，图像的焦点——人物——会变得太小。...为什么要使用picture元素而不是其他替代方案对于picture元素的一个大误解是，为什么要使用它而不是img元素的sizes属性或CSS。

3433 0

为什么你永远不应该在CSS中使用px来设置字体大小

在显示器通常是一个相对可预测的低分辨率像素比例，比如1024×768的时代， 1px 通常等于屏幕上的一个实际像素。屏幕使用称为像素的彩色光点阵来显示图像。...在高分辨率屏幕上浏览网页，如果CSS中的 1px 仍然对应于一个字面设备像素，那么甚至阅读任何内容都将非常困难，因为像素本身正在迅速缩小。毕竟，现代智能手机的分辨率甚至比高清电视还要高。...(zh-Hans) 所以，这里的总结是：当用户更改字体大小时， px 值不会缩放。 em 和 rem 的值会随字体大小成比例调整。...虽然我认为如果你选择这条路，你可能会没事，但我仍然认为 px 有其存在的意义。我们知道当用户调整字体大小时 px 值不会改变，这意味着像素单位实际上是某些美学元素的不错选择。...如果用户设置了非常大的字体大小，则可能不是这种情况，将媒体查询设置为 rem 而不是 px 可以帮助我们避免这种假设并响应用户的偏好。我在这个网站上遇到了这个问题；我把所有的断点都设置在 px 上。

1.6K2 0

超越媒体查询：使用更新的特性进行响应式设计

屏幕较小的设备也要下载在大屏幕展现的大尺寸图片。在网页上使用图像时，我们必须确保它们在分辨率和大小方面得到了优化。...注意，我们仍以这种方式使用媒体查询，但是元素本身驱动了响应行为，而不是在CSS中定义了断点 ?。...基本上，这意味着我们可以为支持高分辨率和低分辨率的小版本的屏幕显示高质量的图片。值得注意的是，尽管移动设备的屏幕较小，但通常分辨率较高，这也说明了仅依靠分辨率可能不是一种好的做法。...它可能会导致将高分辨率的大图像提供给非常小的屏幕，这是我们不希望看到的。...使用响应单位你是否曾经建立过一个带有大标题或副标题的页面，并且在 PC 屏幕上的显示效果良好，但在移动设备上却发现它太大了？我猜肯定会遇到这种情况，在本节中，我们将介绍如何处理此类问题。

4.1K1 0

从零开始学 Web 之 CSS3（八）CSS3三个案例

3、像素密度 DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI...通过以往CSS的知识，我们都能理解的大小是会影响到我们的网页布局的，而viewport又决定了的大小，所以viewport间接的决定并影响了我们网页的布局。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸...但是由于我们手机的屏幕很小，而 viewport 的值却很大，所以页面所有的内容就会缩小以适应屏幕，所以用手机看起来，这些字体和图片就会特别小，这就像手机设置里面有个电脑版显示一样。...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢

1.3K1 0

什么是移动端开发【重点学习系列—干货十足–一万字详解】

屏幕分辨率与显示分辨率不同。计算机可以修改显示分辨率，信号传递给屏幕，屏幕会进行计算，在屏幕上显示。...CSS 像素不能直接跟现实中的长度单位换算 CSS 像素主要用在 CSS 与 JS 中控制元素的大小位图像素位图像素也是一个长度单位。...在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。...理想视口的好处注意：理想视口不是真实存在的视口设置理想视口的方法 2-缩放 PC 端放大时布局视口变小视觉视口变小元素的像素大小不变 缩小时 布局视口变大视觉视口变大元素的像素大小不变...移动端放大时布局视口不变视觉视口变小 缩小时 布局视口不变视觉视口变大注意：移动端缩放不会影响页面布局真机测试流程（重点）真机测试是项目测试必要的一个流程，一定要掌握！！！

2.3K2 0

Css-移动端适配总结前言PC端Mobile总结参考&引用

原理则是因为我们的PC中1个设备像素等于1个css像素。当用户放大或者缩小屏幕时（按住ctrl+滚动鼠标轮，也就是改变zoom值），则有所不同。...以下是引用ppk大神的三张图片，下面深蓝色为设备像素，上面浅蓝色为css像素正常情况下： ? 缩小时： ? 放大时： ?...css像素和设备像素在移动端中， 1个css像素并不等于1个设备像素，而是取决于设备像素比（物理像素（设备像素）/独立像素（css像素）），像Iphone的Retina屏幕，就有2倍屏（ip6s）...大佬认为，当用户使用更大的屏幕的时候，他应该能看到更多的内容，而且设计稿被放大或者缩小的话，会失去他原来的感觉。...为什么很多web项目还是使用 px，而不是 rem？总结本文多是概念上的，也参考了许多文章，要真正理解还需要多参考实际项目。

2.3K2 0

从零开始学 Web 之移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

3、像素密度 DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI...通过以往CSS的知识，我们都能理解的大小是会影响到我们的网页布局的，而viewport又决定了的大小，所以viewport间接的决定并影响了我们网页的布局。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸...但是由于我们手机的屏幕很小，而 viewport 的值却很大，所以页面所有的内容就会缩小以适应屏幕，所以用手机看起来，这些字体和图片就会特别小，这就像手机设置里面有个电脑版显示一样。...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢

7432 1

一篇文章带你了解SVG 图标

SVG图标是SVG图像，用作Web应用程序或移动应用程序内的图标或图像按钮。SVG图标也可以用于徽标。文章说明了SVG图标如何创建自己的SVG图标，以及在何处可以下载高质量的预制SVG图标。...一、SVG图标的优势图标使用SVG的优点： 1、可以轻松地按比例放大和缩小图标，具体取决于要在应用程序中显示的位置以及显示应用程序的屏幕尺寸。...二、在Web Apps中使用SVG图标如在Web浏览器中显示SVG所述，有几种方法可以在Web浏览器中显示SVG，作为HTML页面的一部分。...但是，当使用img元素显示此SVG图标，并放大和缩小img元素的大小时，SVG图标不会放大或缩小。相反，或多或少会显示SVG画布。下面是将img CSS Height属性设置为32。...注：如何仅显示圆圈的一部分，而不是按比例缩小整个圆圈。造成此问题的原因是SVG图像文件缺少某些信息。必须为SVG viewBox属性设置一个值。

4.1K3 0

5个方法对于重量级网站的图片优化

不，我不是在谈论使用CSS或在HTML中调整大小。我正在谈论调整服务器上的图像大小，然后将其发送给浏览器。例如，对于要在电子商务网站上列出的产品，你有4000x3000像素的图像。...在将原始图像发送到浏览器之前，请确保将原始图像缩小到这些尺寸。调整大小的图像比原始图像小得多，并且加载速度比原始图像快得多。 XYZ Product Detail <!...另一种称为 WebP 的相对较新的图像格式结合了这些图像格式中的最佳格式，尺寸缩小了30％，并且在近 75％的现代浏览器中得到支持。...移动设备的另一个影响因素是设备像素比率或DPR值。现代移动电话具有高密度屏幕，在相同的平方英寸中包含更多像素。 [image.png] 在常规设备上看起来很好的图像在高密度屏幕上看起来会略微模糊。...例如，你可以使用CSS创建按钮，渐变和其他高级元素，而不是加载图像。你可以使用的另一个更重要的技术是延迟加载图像。延迟加载基本上意味着我们推迟加载不需要的图像。

1.5K2 0

两个 viewports 的故事-第二部分

平板设备如 ipad 以及传闻基于 webOs 的惠普产品将缩小桌面与手机的差距，但也无法改变最基本的问题。因为网站也需要在移动端显示，所以我们必须让它们在小屏幕上正常显示。...关键的一点是：布局视图在缩小模式下能够完全显示在屏幕上。（此时视觉视图等于布局视图） ? 如下图，布局视图的宽高与完全缩小模式下的宽高是相同的。当用户放大后，这些尺寸仍然相同。 ?...很明显，当用户放大或缩小时，由于更多或更少的 CSS 像素会适配屏幕，视觉视图尺寸会发生变化。 ? 不幸的是这种方法并不兼容。很多浏览器仍然需要增加对视觉视图尺寸的支持。...大多数浏览器会通过缩小来在屏幕上显示整个布局视图，如下图的效果 ? 所有的用户会立即放大查看，但是大多数浏览器会保持元素的宽度不变，这使得文本很难阅读。 ?...当用户放大的时候会看出来，而不是最初用户可能面对包含空白的缩小的页面。 ? 为了解决这个问题，苹果公司发明了meta viewport 标签。

1.7K7 0

Clamp()、Max() 和 Min() CSS 函数的用例

Clamp()、Max() 和 Min() CSS 函数的用例流体尺寸和定位在此示例中，我们有一个带有手机的部分，以及位于顶部的两个图像。...最初，它将如下图所示：当容器的宽度变小时，我们希望缩小图像的大小以适应可用空间。我们可以通过使用宽度或高度的百分比值（例如：宽度：20%）来做到这一点，但这并没有给我们太多的控制权。...在移动设备上，它们会占用太多空间，因此我们只想展示其中的一小部分。为了解决这个问题，我们可以在移动设备上使用媒体查询来控制它们。....hero { min-height: clamp(250px, 50vmax, 500px); } 调整屏幕大小时，你会注意到高度会根据视口宽度逐渐变化。...在 CSS 中，按钮可以绝对定位在左侧。

1.5K2 0

WebApp开发-Google官方教程

WebView中呈现的页面如果你在为Android开发Web应用或者在为移动设备重新设计一个Web应用，你需要仔细考虑在不同设备上你的页面看起来是怎样的。...然而，当你的页面在WebView中展现的时候，页面是以最大化形式加载的（而不是”overview mode”）。...如果在你的web页面中，图像是很重要的一部分，那么你就需要密切关注在不同分辨率下发生的缩放，因为图像缩放可能会带来模糊以及像素化的问题。...也就是说，一个web页面在扩张到整个屏幕之前占用的像素数据是由viewport的尺寸（dimensions）来定义的，而不是设备屏幕的尺寸。...例如，在figure 5中，展示了一个使用如上viewport设置并使用了一些CSS的页面，在这个CSS中，定义将高分辨率的图像用于高像素密度的屏幕。

9462 0

自适应与响应式的异同

于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？...而在响应式布局中你却要考虑上百种不同的状态: 响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。...'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'); Skill 3 不使用绝对宽度由于网页会根据屏幕宽度调整布局...，在HTML中，默认的单位就是px； pt是point，是印刷行业常用单位，等于1/72英寸。...rem是css3的出现，同时引进新的单位,而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需要。

6593 0

移动端H5开发基础

文章目录前言一、移动端屏幕相关概念 1. 屏幕尺寸 2. 屏幕分辨率 3. 屏幕像素密度（ppi = pixels per inch）二、像素 1. 物理像素 2. CSS像素 3....系统总结 ---- 前言随着移动端H5需求场景越来越多，例如微信公众号中H5页面的开发，APP中内嵌H5页面等，移动端H5开发基础知识和技巧是前端开发工程师必备的技能~ ---- 一、移动端屏幕相关概念...CSS像素 web开发的最小单位，一个CSS像素在移动设备上最终会转成物理像素去呈像一个CSS像素占用多少个物理像素，取决于【设备特性】、【用户缩放行为】 3....设备独立像素是一个抽象层，是设备对接CSS像素的接口，一旦CSS像素与设备独立像素挂钩（width=device-width），dpr才有意义。在PC web开发中无意义，无此概念。 4....视觉视口用户正在看到的网页的区域缩小页面，看到的网站区域将变大，视觉视口也会变大；同理，放大网站，网站区域将缩小，此时视觉视口也会变小。

1.3K2 0

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

"> 在 web 开发的大部分历史中，处理图像并不复杂。...响应式布局中的图像除了灵活的布局和使用CSS媒体查询之外，"灵活的图像和媒体"是响应式网页设计的三个重要方面之一。...从视觉上看，这完美无瑕-缩小光栅图像在视觉上是无缝的。通过一两行CSS，缩小的图像看起来就像我们指定了一个图像源，而这个图像源就是要以这个尺寸显示的。...使用 img { max-width: 100% } 意味着，当灵活的容器调整大小时，图像将根据需要缩小。与设置更严格的 width: 100% 不同，这也确保图像不会超过其固有大小而被缩放。...对于仅通过小视口查看页面的用户，一切都会看起来很正常，因为图像将很好地缩放。在呈现的页面中，一个巨大但缩小的源图像看起来与适当大小的图像没有任何区别。

1.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭