如何在更大的设备上设置图像的最大宽度而不破坏Retina屏幕上的外观？_让英雄图像在移动设备上填满整个屏幕而不破坏质量的最好方法？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

H5移动端开发学习总结

而完美视口需要通过viewport meta标签来进行相应的设置。 ###像素### 一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。...每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。理论上：1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。...在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。...如果不指定该属性（或者移除viewport meta标签），则layout viewport宽度为浏览器默认值。如：iPhone为980px。...但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此，我们需要给页面设置最大的宽度和最小宽度。

9392 0

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

响应式界面的四个层次同一页面在不同大小和比例上看起来都应该是舒适的；同一页面在不同分辨率上看起来都应该是合理; 同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；同一页面在不同类型的设备...RWD 倾向于只改变元素的外观布局，而不大幅度改变内容。Jeffrey Zeldman 总结说，我们就把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术。...后果是在支持它的网页上该属性正常展示，而不支持它的网页该属性不生效，但也不影响用户的基本使用。...优化图像通常可以最大限度地减少从网站下载的字节数以及提高网站性能。...其次，很多早期的文章规范都建议不要使用奇数级单位来定义字体大小（如 13px，15px...），容易在一些低端设备上造成字体模糊，出现锯齿。

3K3 2

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

是的

没有找到

移动web开发

布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题....IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....不同设备的不同像素比: PC端和早前的手机屏幕/普通手机屏幕:1CSS像素=1物理像素 Retina(视网膜屏幕)概念,可以把更多的物理像素点压缩在一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度...单位:长度|百分比|cover|contain cover把背景图片扩展至足够大,以使背景图像完全覆盖背景区域. contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域. cover和contain...-webkit-tap-highlight-color: transparent; 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式: -webkit-appearance

2.2K2 0

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

当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。 2.3 图像分辨率我们通常说的图片分辨率其实是指图片含有的像素数，比如一张图片的分辨率为 800x400。...它不能单纯的表达分辨率和 PPI，只能一种表达视觉效果。让多个物理像素渲染一个独立像素只是 Retina屏幕为了达到效果而使用的一种技术。而不是所有 DPR>1的屏幕就是 Retina屏幕。...4.6 缩放上面提到 width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置 initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是 width和视觉视口宽度的最大值...例如：若手机的理想视口宽度为 400px，设置 width=device-width， initial-scale=2，此时视觉视口宽度=理想视口宽度/initial-scale即 200px，布局视口取两者最大值即...如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

2K1 0

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

当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。 2.3 图像分辨率我们通常说的图片分辨率其实是指图片含有的像素数，比如一张图片的分辨率为 800x400。...它不能单纯的表达分辨率和 PPI，只能一种表达视觉效果。让多个物理像素渲染一个独立像素只是 Retina屏幕为了达到效果而使用的一种技术。而不是所有 DPR>1的屏幕就是 Retina屏幕。...4.6 缩放上面提到 width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置 initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是 width和视觉视口宽度的最大值...例如：若手机的理想视口宽度为 400px，设置 width=device-width， initial-scale=2，此时视觉视口宽度=理想视口宽度/initial-scale即 200px，布局视口取两者最大值即...如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

1.9K4 1

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

当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。 2.3 图像分辨率我们通常说的图片分辨率其实是指图片含有的像素数，比如一张图片的分辨率为 800x400。...它不能单纯的表达分辨率和 PPI，只能一种表达视觉效果。让多个物理像素渲染一个独立像素只是 Retina屏幕为了达到效果而使用的一种技术。而不是所有 DPR>1的屏幕就是 Retina屏幕。...4.6 缩放上面提到 width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置 initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是 width和视觉视口宽度的最大值...例如：若手机的理想视口宽度为 400px，设置 width=device-width， initial-scale=2，此时视觉视口宽度=理想视口宽度/initial-scale即 200px，布局视口取两者最大值即...如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

1.9K2 0

第135天：移动端开发经验总结

一、移动端三种布局　　1、有最大、最小宽度的百分比自适应布局　　适用场景：门户网站首页，图片较多的首页。　　2、百分比自适应布局　　适用场景：信息文字较多的网页，内容较多网页。　　...不管当前有多少只手指 touchmove：当手指在屏幕上滑动时连续触发。...四、常见的移动端问题 1、什么是Retina 显示屏，带来了什么问题　　retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina...、禁止文本缩放当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止： html { 　　-webkit-text-size-adjust...; ｝ 9、如何禁止保存或拷贝图像（IOS）通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止： img { -

1.6K3 0

Web正文字体发展简史

这种设计可以吸引您的时间，而不是浏览文本。虽然这种设计可以在较小的屏幕（尤其是智能手机和平板电脑，在我的测试中）上提供良好的阅读体验，但我发现在较大的屏幕上很难。...在每个注视中（可能跨越四分之一秒），他们只会看到一小部分焦点文本：现在，如果相同的文本更大，但是其他参数（如眼屏距离）没有变化，我猜结果将如下所示：由于聚焦区域保持不变，并且文字较大，我怀疑眼睛在每次注视上正确识别的字母会更少...这就是为什么我的假设是，对于真正的大文本（如 Resilient Web Design 250%在更大屏幕上的正文），读者将需要使用更多的注视力来阅读同一文本，并且可能会失去阅读速度并更快地感到疲劳。...然后，根据我使用的字体、我想要的外观以及我在各种设备上测试的结果，我调整这些值。对于我们一直在追逐设备制造商，操作系统和浏览器开发人员，并试图每两年调整字体大小以适应市场上的情况，我也感到难过。...根据屏幕宽度稍微增加字体大小的概念很容易引起人们的注意。

1.1K1 0

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

在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。...那么，当我们在 CSS 中为一个元素设置属性 width: 250px; 时，会发生什么？这个元素的宽度究竟是多少像素呢？事实上，这里已经涉及了两种不同的像素：物理像素和 CSS 像素。...在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度。...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。...当设置屏幕分辨率为 1920px1200px 的时候，理想视口的宽度值是 1920px，那么 dip 的宽度值就是 1920px。

2K2 0

前端成神之路-移动web开发_流式布局

：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签 ?...最标准的viewport设置视口宽度和设备保持一致视口的默认缩放比例1.0 不允许用户自行缩放最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比...对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 4.0 移动开发选择和技术解决方案 ####4.1移动端主流方案 1.单独制作移动端页面（主流）通常情况下，网址域名前面加 m...transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

1.6K2 0

【CSS】872- 浅析rem布局方案

说完基本概念，来说一下几个问题： retina屏图片模糊首先普及一下位图像素：一个位图像素是图片的最小数据单元，每一个单元都包含具体的显示信息（色彩，透明度，位置等等）那为什么在dpr高的retina...在1dpr的屏幕上，位图像素和物理像素一一对应没什么问题，但是在retina屏上，由于一个px由4个甚至更多的物理像素组成，并且单个位图像素不能进一步分割，所以会出现就近取色的情况，如果取色不均，那么就会导致图片模糊...虽然这样在dpr为1的屏幕上会导致1个物理像素上有4个位图像素，但是这种情况的取色算法更优，影响不大，不做讨论。...1px实际可能有4、9个物理像素，ui想要的其实是1个物理像素，而不是1px，不过由于不是素所有的手机都能适配0.x，所以曲线救国，采用scale缩放或者设置meta都可以 ?...一个特性 viewport有六种可以设置的常用属性： width：定义layout viewport的宽度，如果不设置，大部分情况下默认是980 height：非常用 initial-scale：可以以某个比例将页面缩放

8022 0

6个最好的WordPress图像优化器插件提高WordPress网站性能

Imagify WordPress的图像优化器插件主要特点：通过压缩WordPress图像而不损失质量来提高网站速度压缩WordPress中的所有现有图像和新图像压缩各种尺寸的图像，包括缩略图等...从WPRetinax2压缩Retina图像与WooCommerce画廊兼容与NextGenGallery兼容调整现有图像的大小调整新图像的大小能够自定义Imagify插件设置备份原始图像以恢复图像的原始版本...50张图像图像调整大小-设置最大宽度和高度，大图像将在压缩时按比例缩小尺寸不正确的图像检测-快速定位降低您网站速度的图像 DirectorySmush–优化图像，即使它们不在媒体库中自动优化-异步自动压缩您的附件...Optimole WordPress的图像优化器插件主要特点：自动优化图像根据浏览器和访问者设备类型优化图像支持多种图像支持WebP和Retina图像如果浏览器兼容性，能够提供优化的webP图像...通过设置最大宽度和/或高度来自动调整巨大的图像上传大小，以获得更合理的浏览器显示。使用渐进式JPEG编码更快地显示JPEG图像。选择在原始图像中保留版权元数据、创建日期和GPS位置。

2.3K0 0

移动web开发_流式布局

：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签最标准的viewport...设置视口宽度和设备保持一致视口的默认缩放比例1.0 不允许用户自行缩放最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比物理像素点指的是屏幕显示的最小颗粒...对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 4.0 移动开发选择和技术解决方案 ####4.1移动端主流方案 1.单独制作移动端页面（主流）通常情况下，网址域名前面加 m...transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

1.3K1 0

像素终极作战指南

PHOTOSHOP的大体法则是网页与电子设备用图永远只用考虑图像所包含的总像素数，pixel dimension(上图绿框)，需要交付印刷的文档则需要考虑文件输出尺寸(上图篮框)。...自适应宽度(responsive web design)的最大原则则是网页上所有元素都没有固定的像素尺寸，而是把屏幕总宽度设为100%，其他元素的尺寸则以百分比设置。...#3 关于iOS APP尺寸设置的基础这里顺便提一下iOS APP的界面设置和一些UI设计师向程序员交付文档时所需要知道的常识，以保证交接的和谐平顺以及不返工，你懂的。...iPhone5我们这里暂时不讨论，因为5的ppi没有变化，兼容要做的只是类似增加首屏画面和程序上的判断。...还有一个细节问题是如何在屏幕上精确的得到iPhone的实际大小?

5722 0

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

屏幕分辨率注意几款手机的分辨率像素相关物理像素 / 设备像素设备独立像素 / 设备无关像素 Retina 屏幕几款手机的屏幕像素参数,[点击这里查看更多](https://uiiiuiii.com...普通屏幕下 1 设备独立像素等于 1 物理像素高清屏幕下 1 设备独立像素等于 N 物理像素 Retina 屏幕 Retina 是苹果公司 2010 年推出的一种显示标准，是把更多的像素点压缩至一块屏幕里...位图像素是栅格图像（如：png，jpg，gif等）最小的数据单元。位图和矢量图位图图像是由称作像素（图片元素）的单个点组成的。放大后会失真。...== 位图像素在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素等于 N 个物理像素像素密度屏幕上每英寸可以显示的像素点的数量，单位是 ppi...minimum-scale = 屏幕独立像素宽度 / 视觉视口 maximum-scale 设置允许用户最大缩放比例，苹果浏览器 safari 不认识该属性 maximum-scale = 屏幕独立像素宽度

2.3K2 0

将你的网站打造成一个iOS Web App

前言 iOS上的一个Web App（下图中的「念」）和Native App(原生应用)在外观上看起来基本上一样，但是其使用的技术是HTML，CSS，Javascript，而不是原生应用所使用的Objective-C...device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 其中width=device-width指的是移动浏览器所显示的宽度等于设备的物理宽度..." sizes="144x144" /> 如果你不指定size属性，那么默认为57x57，我们可以看到ipad所需icon的尺寸是72x72，retina屏幕的iphone所需的尺寸是114x114，...retina屏幕的ipad所需的尺寸是144x144。...如果没有当前设备所需尺寸的icon，那么iOS将会选用icon中所有大于此设备所需尺寸的最小的一个。如果没有比设备所需尺寸大的icon，那么选用最大的那个icon。

1.9K6 0

【小程序_02】布局方式

viewport宽度，可以设置device-width特殊值 hinitial-scale 初始缩放比，大于0的数字 maximum-scale 最大缩放比，大于0的数字 minimum-scale 最小缩放比...，大于0的数字 user-scalable 用户是否可以缩放，yes或no（1或0）标准 viewport 设置视口宽度和设备保持一致视口的默认缩放比例1.0 不允许用户自行缩放最大允许的缩放比例...Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。 ?...-- 单位：长度、百分比、cover、contain cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（不考虑图片是否有超出部分） contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域...注意他们要加小括号值解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度为了防止混乱

1.3K2 0

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

dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。...当你设置屏幕分辨率为 1920 * 1200 的时候，ideal viewport（理想视口）的宽度值是1920像素，那么 dip 的宽度值就是1920。设备像素比是1.5（2880/1920）。...设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式：逻辑像素宽度*倍率 = 物理像素宽度而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是...网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip..."> 那么布局宽度width=980px，初始缩放initial-scale为自动（缩放到屏幕大小）情况二：viewport只设置width，不设置initial-scale 那么initial-scale

1.7K5 0

细说移动端经典的REM布局与新秀VW布局

上图中， Retina为高清设备屏幕，它的一个css像素对应了4个物理像素位图像素一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。...每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示 ?...如上图：对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。...文本大小是否用rem单位有时我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现...从效果图能够看出，美中不足是无法设置容器最大最小宽度，vw是根据设备宽度进行计算的，所以无法解决。五、REM + VW布局讲的太乱了？

11.8K4 2

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

你通常不希望放大图像，也就是说，把显示为比源图像的固有大小更大的大小。显示的图像会显得模糊和有点像颗粒的样子。...使用 img { max-width: 100% } 意味着，当灵活的容器调整大小时，图像将根据需要缩小。与设置更严格的 width: 100% 不同，这也确保图像不会超过其固有大小而被缩放。...但是，他们仍然要传输和渲染 2000px 宽的图像，消耗大量带宽和处理能力，没有任何实际效益。随着第一款“Retina”设备的出现，情况变得更加糟糕，因为显示密度成为了视口大小的关注点。...单一图像源适合布局中最大的可能空间和高密度显示，当然可以在视觉上适合所有用户。巨大的高分辨率图像源在小的低密度显示器上呈现出来就像其他任何小的低密度图像一样，但感觉更慢。...用户将承受这个巨大的4000像素宽图像源的所有性能成本，没有任何好处。很长一段时间以来，只做了一件事 - “获取图像数据并将其放在屏幕上”。

1.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭