如何使用 CSS、HTML、WordPress 等制作响应式图像!

neiro

34人浏览 · 2022-08-19 17:27:21

neiro · 2022-08-19 17:27:21 发布

! zoz100037](https://devpress-image.s3.cn-north-1.jdcloud-oss.com/a/9d3424814b_1*-NQNmBiW1K11GJ-Rgq9x6Q.jpg)

不到十年前,没有人谈论网站的响应能力。唯一的口头禅是,“如果它适合你的系统,那么它就适合其他人”。但是今天,每个开发人员在开发网站时最关心的是“响应能力”。随着技术的进步和移动制造的蓬勃发展,每个客户都在问这样一个问题:“我的网站响应速度快吗?它在我的大多数观众所在的手机和平板电脑上是否准确?”。这就是为什么响应式测试的过程比以往任何时候都更加严格的原因。如果您从事 Web 开发,我相信您一定遇到过很多次这样的问题。

嘿!你知道吗?random-number-generator— 这是一个在线随机数生成器,它使用您定义的自定义范围内的数学公式创建正数或负数伪随机数没有重复。

什么是网站响应性?

响应性是网站根据屏幕大小、窗口或分辨率自行调整的能力。 2019 年,移动设备访问互联网的次数超过了台式机和笔记本电脑。作为 Web 开发人员,您不能忽略此统计信息。随着全球 50 亿台移动设备的活跃,响应能力已成为 Web 开发行业的一项主要要求。那么,问题是,开发响应式网站或转换现有网站有多难?

响应性如此流行,以至于 CSS 内置了查询规则,用于将网站转换为可自我调整的网站。我们将在后面的部分中讨论这一点,但在制作响应式图像的过程中要记住的第一件事是,“您需要计算屏幕尺寸以据此调整图像”。为此,我们使用“view-port meta tag”规则。

通过这个面向初学者的响应式测试教程,您将学习如何在 LambdaTest 平台上对您的网站执行响应式测试。

视口元标记

视口是用户可见的区域。因此,从逻辑上讲,我们可以构造一个类似于用户正在查看网站的屏幕大小的视口。视口标签做同样的工作。它计算屏幕的视口并返回我们可以调整网站元素的值。视口元标记如下所示:

如果您在页面上写下这一行并在浏览器中运行该页面,您将看到文本已经响应(可能是也可能不是)。但是即使这个标签指示浏览器考虑视口调整,开发人员的工作也不会在这里完成。创建一个完整的响应式网站包括许多元素,例如为容器元素设置相对宽度、浏览器兼容性测试以及放置根据屏幕大小呈现的图像。在所有这些元素中,最具挑战性的是图像。

我们可以完全依赖视口标签吗?

当然不!仅仅依靠视口标签对于文本来说是不够的,对于图像来说绝对是不可能的。通过一些调整设置,浏览器可能会向网页提供错误的视口信息,这可能会导致突然的行为。最好遵循其他规则以制作响应式图像。

如何检查响应性?

作为一名网络开发人员,我相信您会感到困惑,“我如何检查我的网站是否响应足够快并且在所有设备上都可以正常运行?”或者您可能会想到一个问题:如果我的图像地图坐标中断怎么办在其他设备上?不用担心。当我开始进行响应式图像设计或者只是建立我的第一个网站时,我也遇到了这些问题。

根据我的经验,我建议使用基于云的跨浏览器测试来检查图像的响应能力。跨浏览器测试可帮助您在无法手动执行的成百上千个浏览器上测试您的网站。网上有大量可用的工具。您可以选择 LambdaTest 跨浏览器测试平台,尤其是响应式设计,因为它有一个单独的部分。

以上截图是在 LT Browser 上截取的,这是一款用于响应式测试的浏览器。 LT浏览器是一款移动友好测试器,可以保证您的网站同时在多个设备上的响应。您可以从 50 多种不同的设备中进行选择,还可以使用 LT 浏览器通过并排查看功能同时测试多个设备上的响应能力。您可以在上面的示例中看到这一点,因为我正在比较 iPad Air 中的纵向模式和 Galaxy 手机中的横向模式。 LT Browser 可用于执行屏幕分辨率测试并同时在 android 和 iOS 设备上调试您的网站,您甚至可以创建自己的自定义设备。

在这个 LT Browser 教程视频的详细演练中,我们将帮助您开始使用 LT Browser。

在网站制作响应式图片有哪些问题?

图片是网站的重要元素。俗话说,他们确实会说一千个单词,并且自 Web 开发时代开始以来,Web 开发人员就利用了这一点。今天,很难找到没有图片的网站(如果真的存在的话)。

开发者尝试使用越来越多的图片来吸引用户,而不是用冗长的内容让他厌烦,这势必会增加网站的跳出率。但在响应性方面,图像比书面内容更具挑战性。图像可以通过我上面提到的 viewport 标签来管理,但问题是系统或 CSS 不知道它正在调整什么类型的图像。

让我们以下图为例:

上图取自developers.google.com。现在,看看图像如何渲染到不同的屏幕尺寸。在桌面上,它是它的本意。笔记本电脑几乎相似。在平板电脑中,它被裁剪掉,而在移动设备中,图像只聚焦在主要主题上,即人。这不仅仅是 viewport 标签的工作。如果它只是带有视口的标签,即使在小屏幕上,我们也可以获得完整的图像,而使主要主题失焦。

这可能会让我们想,我们可以使用更多的 CSS 和 JavaScript 来解决问题吗?

答案是不!使用 CSS 和 JavaScript,您可以加载图像的多个副本,并让 JS 动态检测屏幕大小并加载适当的图像。问题是由于图像尺寸过大,CSS 开发人员构建 CSS 的方式是在加载完整文档之前加载图像,因为很明显这需要更多时间。通过我们的一些小调整,我们将结束上传原始图像以及所需的裁剪图像,从而导致网站加载时间变慢,并且可能会让用户感到沮丧。

为了进一步阐明如何制作响应式图像,我将介绍在 HTML、CSS 和 WordPress 中制作响应式图像的调整和技术。

如何制作 HTML 响应式图片?

秉承图像对响应性的巨大需求,在 HTML 中引入了新的和修改的标签,直接解决了根据图像大小调整图像的问题。从更广泛的角度来看,图像的响应能力存在两个主要挑战:

不同屏幕分辨率的图片。
不同屏幕大小的图片。

HTML响应式图片的Srcset属性和分辨率切换

在查看制作 HTML 响应式图像的解决方案之前,让我们先弄清楚我们的问题陈述。我们需要找到一种可以节省网络带宽并根据屏幕大小加载适当图像的方法。这可以通过我们用于将图像放置到网站上的旧 pal 标签来解决。

大多数不熟悉响应式设计的人使用的原始 img 标签如下所示:

在上面的标签中,src 表示我们指定图片位置的图片来源。 alt 属性定义未加载图像时显示的替代文本。这是大家都知道的。为了使这个标签与响应式设计相抗衡,添加了以下新属性:

srcset 属性负责根据屏幕大小从可用的多个图像中放置正确的图像。 srcset 包含保存在服务器上的多个图像的多个图像 URL。计算分辨率时,选择宽度最接近的图像。不用说,这涉及将具有不同分辨率的同一图像的多个副本保存到服务器上。

第一个参数是图像的名称,在我们的示例中,它是boat-480.jpg。图片名称后跟空格,然后我们指定图片的真实分辨率。

请注意,大小应以“w”格式而不是“px”格式写入。

这里使用的另一个属性是大小。 Sizes 属性包含一个媒体查询(将在下一节中详细讨论)和一个在媒体集为真时应该选择的分辨率。

例如,在上面的例子中 (max-width: 600px) 480px 意味着当视口的最大宽度为 600px 时,转到 srcset 并选择分辨率最接近 480px 的图像。

Opera Mini 浏览器和 Internet Explorer 不支持 srcset 和 size 属性。 因此,如果您在这些浏览器中加载网页,它们将忽略 srcset 和 size 属性,而只会正常引用 src 属性,渲染 src 属性中指定的图像。

我们也可以更喜欢以与上面使用的方式略有不同的方式编写 img 标签。看下面对上面写的<img>标签的变换:

使用这种类型的属性称为分辨率切换。在这里,我们没有指定不同的大小,而是指定图像的不同分辨率。因此,为了获得更高分辨率的显示,将选择boat-640w.jpg 2x。请记住,这个数字越大,分辨率就越好。

引入这种方法是因为移动用户不关心图像的分辨率。他们更关心网站的加载时间,他们通常是在糟糕的网络上。无法适应网站封面上出现的颗粒状图像的是桌面用户。使用分辨率切换方式,可以节省带宽,提高网站加载时间。总而言之,我们根据屏幕尺寸和分辨率制作响应式图像。

图片元素与艺术指导

在上述情况下,我们尝试根据显示器的分辨率制作响应式图像。但是还有另一个问题,让我们回到上面突出显示的船图像。

在这张图片中,虽然焦点在主要主题上,但我们不希望在每台设备上都加载完整的图片。这将不必要地加载网络,从而导致移动设备上的网站加载时间变慢。一个很好的解决方案是,为什么我们不在服务器上保留一个尺寸较小的裁剪图像,以便需要它们的设备不会在网络上挣扎?当我们不希望我们的主题在较小的屏幕上淡出时,我们需要遵循此策略,如下图所示:

在更大的屏幕(笔记本电脑和台式机)上如下所示:

这是完美的!为了在适当的屏幕上显示不同尺寸的不同图像,我们使用了 < 图片 > 标签。

上图是一个带有 src 和 alt 属性的简单标签。这可以修改为以下带有图片元素的代码。

<图片>

<源媒体 u003d “(最大宽度:799px)” srcset u003d “kutch-480.jpg”>

<源媒体u003d“(最小宽度:800px)”srcset u003d“kutch-800.jpg”>

</图片>

如果您之前从事过 Web 开发,您会注意到图片元素类似于这里的视频标签,它也是包含多个 <source> 标签的包装元素。

在上面的示例中,源标签包含一个媒体属性,该属性指定浏览器应选择 srcset 上的图像的最大宽度。如果我的视口是 800 像素,则将选择第二张图像。通过这种方法,我们可以将多张裁剪后的图片放到服务器上,让浏览器选择最合适的一张。

在图片元素中指定 <img> 标记很重要,否则屏幕上不会显示任何图像。

如果我在我的图像上运行相同的代码,我会在浏览器上得到以下输出:

! zoz100076](https://devpress-image.s3.cn-north-1.jdcloud-oss.com/a/70cad7cd6f_1*kmnyN9r9Q5W9CgWiDXQLVQ.jpg)

这次主题是焦点,因为我裁剪了照片并指示图片元素将这张照片上传到较小的屏幕上。您现在可以看到照片之间的差异。

这种情况或问题称为艺术指导,我们需要为不同的屏幕尺寸制作多个裁剪图像。

不幸的是,图片元素不能在 Internet Explorer 和 Opera 迷你浏览器中使用。这些浏览器只会渲染 <img> 标签图像而忽略其他元素。

你知道吗?random-paragraph-generator— 免费在线工具,轻松生成随机段落。

分辨率切换和美术指导的区别

我承认,这两个概念起初看起来相似且令人困惑,但它们的区别很容易弄清楚。

分辨率切换侧重于通过为以低分辨率工作的屏幕提供低分辨率图像来利用网络带宽。移动用户并不真正关心您的高分辨率图像,他也可以使用低分辨率图像解决问题。由于移动用户经常在低带宽网络上工作,因此对我们来说,仅以适当的分辨率显示必要的内容很重要。

艺术指导专注于用户体验,通过裁剪提供相同的图像,无论用户的大小如何,图像的主题都以几乎相同的比例可见。与分辨率切换相同的图像具有不同的分辨率不同,这里我们在服务器上放置了多个图像。一个很好的例子是,当通过投影仪投影您的显示器时,有时需要我们增加字体大小,因为它不可见。但是,这并不意味着我们需要调整显示器的分辨率。我们致力于相同的决议。在这里可以看到类似的效果。

如何在 CSS 中制作响应式图片?

我们通过制作 HTML 响应式图像和修改

为最终用户提供最佳体验的标签。在本节关于如何在 CSS 中制作响应式图像中,我将探索一些 CSS 元素,它们可以帮助我们为用户呈现最佳图像。

Object-Fit 和 Object-Position 属性在 CSS 中制作响应式图像

帮助我们实现这一目标的第一个属性是对象拟合属性。此属性指定图像在呈现到不同的屏幕尺寸时应如何调整自身大小。使用 object-fit 属性,我们可以定义是否要在更大的屏幕尺寸的情况下拉伸图像,或者为更小的屏幕尺寸缩小图像。

Object 属性与 <img> 标签一起使用:

将 object-fit 属性设置为“cover”将保持相同的纵横比,但会切断图像的边界以将图像覆盖到屏幕上。

object-fit 属性有五个值:

**适合:**这些值将拉伸图像以适合内容框,并且不会保留纵横比。

包含: 包含值将增加图像的大小或减小图像的大小,同时保留纵横比。

Cover: 此值完全填充内容框,但通过裁剪图像保留纵横比。

**无:**此值将忽略任何调整并渲染原始图像。

**缩小:**此值会将图像缩小到值“无”和“包含”之间的大小。

一个简单的例子如下所示:

! zwz 100085 zwz 100086 zwz 100084

此图片取自 cssmine.com_

除了 Internet Explorer 之外,所有主要浏览器都可以使用 object-fit。

CSS 中用于实现响应性的另一个重要属性是 object-position。除了 object-fit 之外,它还经常一起使用。 顾名思义,object-position 属性定义了图像的位置,即当渲染到浏览器。

object-position 属性有两个值 x 和 y,这决定了图像应该从左边 x px 和从顶部 y px 放置。例如:

在这里,我们希望图像从左侧移动 0px,从顶部移动 5px。

Object-Position 属性在 Internet Explorer 和 Opera Mini 浏览器中不可用。

使用 CSS 制作响应式图像的媒体查询

我们列表中的下一个是在 CSS 文化中也非常流行的媒体查询。 CSS 中的媒体查询与我们在 HTML 响应式图像部分中采用的方法略有不同。 Web 开发人员应该记住,如果我们通过 CSS 媒体查询制作响应式图像,我们将无法从服务器获取多个图像。无论我们做什么,我们都需要在客户端,即浏览器上做。 CSS 不处理任何与服务器相关的查询。

CSS 媒体查询具有以下语法:

@media<parameter> (conditions) {// 当这个媒体查询为真时你想要执行的代码。}

在下面的例子中,我们将通过计算屏幕的分辨率来改变图像的宽度。

<!DOCTYPE html>

<头部>

<风格>

@media screen and (max-width : 799px) {

img.resp {

宽度:300px;

}

@media 屏幕和(最小宽度:800px){

图像响应

{ 宽度:800 像素;

}

</style>

</head>

<正文>

</style>

</正文>

</html>

在上面的代码中,我们是在指示 CSS 计算屏幕的视口(通过 meta 标签),然后根据标签,调整图像宽度。对于小于 799 像素的视口,图像将是 300 像素宽,对于任何高于此的视口,它将是 800 像素。

当我在 LambdaTest 平台(Google Chrome / Win 10)上运行时,图像呈现如下

当我在同一平台的手机屏幕上运行它时,我希望这张图片可以缩小到 300px。

是的,它得到了我想要的渲染。如果我没有使用媒体查询,我会在较低分辨率的设备中获得以下图像(使用以下标准代码):

! swz 100103 swz 100104 swz 100102

使用这样的媒体查询,您可以为您的网站制作响应式图像。每个主要浏览器的每个版本(甚至 Internet Explorer)都支持媒体查询。

Image-Set 属性在 CSS RWD 中制作响应式图像

在 CSS 中制作响应式图像的另一种方法是使用 CSS 响应式网页设计的 image-set 属性。图像集属性类似于我在上面关于 HTML 响应图像的部分中提到的 srcset 属性。

与 srcset 类似,image-set 计算分辨率并渲染最适合屏幕的图像。因此,用户可以放置多个图像并指示 CSS 加载合适的图像。

现在你一定想知道我上面提到的 CSS 是如何不与服务器一起使用而只在客户端工作的。好吧,不要在这里与 image-set 属性混淆。它可能看起来是 srcset 的替代方案,但使用 image-set 实际上是对带宽的负担。当您在该地址栏上按 Enter 时,将获取所有图像,但只会加载适当的图像。这听起来真的不像是双赢的。

也许这就是 image-set 无法从浏览器中获得巨大支持的原因。

Internet Explorer、Edge 的早期版本、所有版本的 Firefox 和 Opera Mini 浏览器不支持图像集。

! swz 100106 swz 100107 swz 100105

以下是使用 image-set 属性的代码片段。在这段代码中,我们根据分辨率更改背景图像。

.img {

背景图片:

图像集(

url(image-799.jpg) 1x,

url(image-800.jpg) 2x,

);

}

了解如何在 CSS 中制作响应式图像很好,但建议您尽可能多地使用 HTML 响应式图像属性。鉴于网络,它们是高效且用户友好的。

如何制作响应式图片地图?

响应式图像映射是指图像的不同区域(或坐标)引用不同的超链接(或工具提示文本或任何内容)的图像。响应式图像映射通常用于在图像的一部分上创建各种超链接,但在实际场景中,它们可以用于您想要的任何内容。

我最近几天发现的最好的例子是印度政府关于 Covid-19 统计数据的网站。

! swz 100109 swz 100110 swz 100108

在上图中,有一个印度的单一图像,它的不同部分表示该国的不同州。将鼠标悬停在不同的州会给出该州的名称、统计数据和整体 COVID-19 病例百分比。

响应式图像地图对于网站来说非常重要,因为它们提供的信息比静态图像或大量文本要多得多,并且在大多数情况下,它们是网站的核心和不可或缺的部分,就像上述情况一样。考虑到它们的重要性,在您的网站上有响应式图像地图并以适当的尺寸呈现非常重要。

响应式图像映射可以通过两种方式制作:

使用 Jquery 插件
使用常规的 CSS 方法

通过 JQuery 插件制作响应式图像映射

考虑到响应式图像映射的重要性,GitHub 上有一个开源 JQuery 插件可用于此特定用途,可从此处的下载。

使用 JQuery 插件制作响应式图像地图非常容易。

首先,确认您的 HTML 文件(cdn 或下载)中包含 JQuery。
为了通过指定图像的坐标和高宽来制作响应式图像映射。
在您从 GitHub 下载的网页中包含 JQuery 插件文件。
$(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); });
在您的网页中添加以下脚本块:

您已完成为您的网站制作响应式图像地图。

这是一种将图像映射转换为响应式图像映射的更简单快捷的方法。另一种方法是使用传统的 HTML 和 CSS 方法对图像上的所有内容进行百分比处理。

在 Internet Explorer 中管理响应性?

许多新的 Web 开发人员在开发他们的网站时倾向于忽略 Internet Explorer,这并不奇怪。在我们关于Internet Explorer 之死的帖子中,我们提到了 Internet Explorer 仍然存在并且每天被许多人使用的一些广泛领域。如果您是那些考虑到这些人的网络开发人员之一,那么您必须在开发您的网站之前考虑一下。

由于浏览器已弃用,Internet Explorer 失去了对 HTML 响应式图像和 CSS 的许多功能的支持。如果你想让你的响应式网站在这个浏览器上工作,你必须走老路。

如果您打算在整个屏幕上显示图像,则可以使用 100% 宽度来解决此问题。

您还可以将宽度属性值用作“auto”,如下所示:

这也将拉伸元素以完成水平空间。

所以,你可能想知道有什么区别?好吧,width:100% 和 width: auto 如果没有容器父框或填充和边距,则相同,但如果有,则 width:100% 是该容器的 100%。这意味着它将仅占用容器的 100% 空间,并且在该 100% 中不包括填充、边距等。

另一方面,宽度:自动不考虑任何这些,并且仍会水平拉伸图像,与边距、容器边界、填充等重叠。

从下图会很清楚:

此图像适用于 width: 100% 属性:

<!DOCTYPE html>

<头部>

<title>响应式图像映射</title>

<风格>

#容器 {

宽度:80%;

边距:70px;

}

</style>

</head>

<正文>

</div>

</style>

</正文>

</html>

您可以看到图像尊重了在包裹该图像的 div 块上声明的边距。

下图是宽度:auto(代码与上面相同,只是 width 属性现在具有 auto 值):

! zwz 100121 zwz 100122 zwz 100120

看看图像是如何超过边距并加载为完整的,这对网站的响应能力造成了打击。因此,尽管您需要使用这些周转方法,但请明智地使用它们,并使用适当的图像尺寸和分辨率,并事先彻底测试它们。

使用 HTML 和 CSS 制作响应式图像地图

响应式图像映射的问题在于,虽然我们可以通过早期设计的方法使图像具有响应性,但坐标不会相对移动。

因此,在普通桌面屏幕上,如果我有一个具有不同含义的不同区域的图像映射,并且我使该图像具有响应性,则指定图像不同区域的坐标仍将位于与以前相同的位置。当然,到那时它们将没有意义,也可能出现在图像地图之外的某些区域。

在进行调整时,作为 Web 开发人员,我们尤其需要注意这一点。这将要求您根据自己在 HTML 和 CSS 方面的经验进行反复试验并进行有根据的猜测。我强烈推荐使用Chrome 开发者工具低效的方法来轻松快速地完成工作。

有时你会看到人们在博客上讨论图像地图,除了代表极少数人使用的政治地图之外,这并不重要。我相信,如果您对 Web 开发足够了解,您就可以设计和展示使用图像地图的创新方法。为了支持这一点,我将使用与下面的地图不同的示例。在下面的示例中,我将使用相同的图像给出两个单独的链接:一个指向汽车,一个指向我自己。

<!DOCTYPE html>

<头部>

<title>响应式图像映射</title>

<风格>

#包装器{

宽度:100%;

最大宽度:812px;

位置:相对;

}

#wrapper img {

最大宽度:100%;

}

#harish {

身高:44%;

宽度:17%;

位置:绝对;

左:39.75%;

最高:50%;

}

#车 {

身高:44%;

宽度:17%;

位置:绝对;

左:15.75%;

最高:40%;

}

</style>

</head>

<正文>

</div>

</style>

</正文>

</html>

如何在WordPress中制作响应式图片?

许多人现在正在通过“Wordpress”方式构建他们的网站。尽管它有很多限制并且不能发挥 Web 开发人员所能做到的所有魔力,但它的设置简单快捷。无论如何,WordPress 是最常见的 CMS,它包含许多适用于您网站的图像。由于 WordPress 用户不经常处理编码部分,因此使用不同样式标记不同图像不是一个好主意,因为您的管理员可能不了解任何内容。

为了解决这种情况,从 4.4 版本开始,WordPress 已经在图片中引入了内置的响应能力。 因此,每当网站作者上传图片时,WordPress 都会再制作 2 个图片副本并与原始图片一起上传(如果您的主题正在添加其他图像,则副本数量可能会有所不同)。这些副本对于不同的屏幕具有不同的大小和分辨率,以便根据分辨率仅加载适当的图像。这句话是否点击了什么?如果您正在考虑 srcset 属性,那么您是对的。

WordPress 通过我们在 HTML 响应式图像部分讨论的相同 srcset 属性在网站上执行响应。 一旦您上传图像并将其放置在网站上,它就会被放置不同分辨率的 srcset 标签。但是 WordPress 不会改变图像的纵横比。无论 WordPress 创建多少份大小和分辨率的副本,它们都将始终保持相同的纵横比。

我们可以在WordPress中更改响应式图像的Srcset属性吗?

作为开发人员,您始终可以通过进入 HTML 代码并更改目标设备分辨率或图像分辨率来更改分辨率。由于 WordPress 是用 PHP 编写的,因此您需要了解一些基本的 PHP 知识。

由于 WordPress 与网站打交道,在很多情况下您可能需要获取图像的最大宽度或计算图像的大小等。对于这种情况,WordPress 提供了以下内置函数:

wp\get\attachment\image\srcset() — 返回图片附件的 srcset 属性的函数
wp_calculate_image_src() — 计算要包含的图像源
wp\get\attachment\image\sizes() — 一个函数,它创建图像的尺寸属性值
wp\calculate\image\sizes() — 创建图像尺寸属性
fwp_image\add\srcset\and\sizes() — 将 srcset 和 sizes 属性添加到现有的 img 元素。由 wp_make_content_images_responsive() 使用。

借助这些功能,您可以设置自己的 srcset 属性和图像大小,并执行其他必要的响应过程。作为 Web 开发人员,玩弄代码总是很好的。

WordPress 还吸引了许多开发人员为该平台开发插件和主题。由于这个原因,WordPress 拥有大量的插件,可以帮助您在 WordPress 中制作响应式图像,而无需担心代码。您可以搜索它们并加载您喜欢的。

嘿!你知道吗?random-password-generator— 这个在线密码生成器每次都会创建安全、强大、不同的密码。您可以选择密码的长度。为确保安全,密码是在不通过 Internet 发送的情况下生成的。立即创建密码!

总结一下!

响应性测试由于移动设备和其他设备的兴起,已成为 Web 开发领域的重要内容。一个网站虽然有很多组件,但图像是它不可或缺的一部分。图片提供了大量带有内容的文本,并在网站上吸引客户。最重要的是,他们需要做出响应。

现在您知道了制作响应式图像的不同方法,您可以使用 srcset 属性和图片元素编写传统的 HTML 代码,也可以继续使用 CSS 媒体查询。无论您使用什么网站构建平台,HTML 和 CSS 流程都适用于所有这些平台。这些平台可能有也可能没有自己的方法来处理响应性。但无论您选择什么,下次构建网站时,请确保图像完美适应屏幕尺寸。

这就是这篇关于如何制作响应式图像的文章的全部内容,我希望你现在有你的问题的答案。如果您想了解有关如何制作响应式图像或任何其他浏览器兼容性测试问题的更多信息,请通过下面的评论部分联系我们。 快乐测试!!!?

CMS

更多推荐

我们从奥斯汀·金德那里学到的关于自己管理 1,300 (!!!) 网站的 5 个技巧

Anchor Hosting 创始人 Austin Ginder 对营销和销售的看法确实是独一无二的......而且也非常有效。作为一名独立开发人员和企业主,他自己管理着 1,300 多个 WordPress 网站。继续阅读,看看他是如何管理这一切的,以及他是如何从头开始创业的...... 1.收入不是唯一目标 “从项目过渡到服务对我和我想要追求的东西来说是有意义的。收入方面,从每个项目的基础到收

CMS

从 WordPress 搜索结果中排除页面

如何从 WordPress 搜索结果中排除页面。默认情况下,您 WordPress 网站上的内部搜索将覆盖 WordPress 搜索结果中的所有帖子和页面。为了让您的网站用户更轻松地找到他们正在寻找的内容,您可能需要排除某些页面或帖子,这样它就不会再出现在这些结果中。在本文中,您将学习如何从 WordPress 搜索结果中排除页面或帖子。让我们分开。在这里,我们将看到两种不同的方法来做到这一

CMS

最常见的 WordPress 错误

简介 WordPress 平台非常适合构建网站,但也容易出错。我们都会犯错。这在讨论 WordPress 时尤其准确,即使是最简单的任务对初学者来说也可能令人生畏。但是,只要有一点知识和一些有用的建议,您就可以避免常见的 WordPress 错误,这些错误经常会让人绊倒。在这篇博文中,我们将探讨一些最常见的 WordPress 错误,并为您提供如何修复它们的建议。因此,请继续阅读以了解如何避免这

CMS

所有评论(0)

查看更多评论

neiro

@coc_devpress_07

已为社区贡献20535条内容