如何使用HTML和CSS的新特性实现响应式布的局

　　介绍

这篇文章主要介绍如何使用HTML和CSS的新特性实现响应式布的局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,如何使用HTML和CSS的新特性实现响应式布局

除了使用媒体查询和现代CSS布局(如flexbox和网格)来创建响应式网站外,我们还可以做好某些被忽视的事情来制作响应式网站。在本文中,我们将探讨许多可用的工具(围绕HTML和CSS),从响应图像到相对较新的CSS函数,无论我们是否使用媒体查询,它们都可以正常工作。

事实上,媒体查询与这些功能一起使用时,更多的是成为一种补充,而不是完整的方法。让我们来看看是如何运作的。

真正的响应式图像

还记得当我们可以在图片上写死<代码>宽度:100%>

    <李>图像可能会变形到失去焦点的程度。 <李>较小的设备仍会下载完整尺寸的图像。

在网络上使用图像时,我们必须确保在分辨率和尺寸方面进行了优化。原因是为了确保我们有合适的图像分辨率以适应合适的设备,所以我们不会最终为较小的屏幕下载非常大和沉重的图像,这可能会降低网站的性能。

简单来说,我们要确保较大的,高分辨率的图像被发送到大屏幕上,而较小的,低分辨率的变化被发送到小屏幕上,从而提高性能和用户体验。

HTML提供了<代码> & lt; picture> 元素,该元素使我们可以根据所添加的媒体查询来指定要呈现的确切图像资源。如前所述,我们没有将一个图像(通常是一个大的,高分辨率的版本)发送到所有屏幕大小并将其缩放到视口宽度,而是指定一组用于特定情况的图像。

& lt; picture> 　　& lt;源媒体=?max-width: 1000 px)“;srcset=皃icture-lg.png"比; 　　& lt;源媒体=?max-width: 600 px)“;srcset=皃icture-mid.png"比; 　　& lt;源媒体=?max-width: 400 px)“;srcset=皃icture-sm.png"比; 　　& lt; img src=https://www.yisu.com/zixun/alt=巴计薄皃icture.png> 　　

在此示例中,<代码>图片。png> picture-lg。png> picture-sm。png> & lt; picture> 元素本身,而不是在CSS中定义断点。

媒体查询已适当添加,以随图片大小缩放:

    <李>大于等于1000 px的视口将获得<代码>图片。李png 。 <李>介于601年像素和999像素之间的视口将获得<代码> picture-lg。李png 。 <李>介于401年像素和600像素之间的视口将获得<代码> picture-sm。李png 。 <>李任何小于400 px的东西都会得到<代码> picture-sm。李png 。

有趣的是,我们还可以在URL后按图像密度给每张图片贴上标签,1 x 2 x, 3 x等等。如果我们把不同的图片按比例制作好了就可以了,这样浏览器就可以根据屏幕的像素密度以及视口大小来决定下载哪个版本。但是请注意,我们最终定义了多少个图像:

& lt; picture> 　　& lt;源媒体=?max-width: 1000 px)“;srcset=皃icture-lg_1x。png 1 x, picture-lg_2x。png 2 x, picture-lg_3x。png 3 x"比; 　　& lt;源媒体=?max-width: 600 px)“;srcset=皃icture-mid_1x。png 1 x, picture-mid_2x。png 2 x, picture-mid_3x。png 3 x"比; 　　& lt;源媒体=?max-width: 400 px)“;srcset=皃icture-small_1x。png 1 x, picture-small_2x。png 2 x, picture-small_1x。png 3 x"比; 　　& lt; img src=https://www.yisu.com/zixun/alt=巴计薄皃icture.png> 　　

让我们专门看一下嵌套在<代码> & lt; picture> 元素内的两个标签:<代码> & lt; source> 和<代码> & lt; img> 。

浏览器将查找媒体查询与当前视口宽度匹配的第一个<代码> & lt; source> 元素,然后将显示正确的图像(在<代码> srcset 属性中指定)。<代码> & lt; img> 元素是<代码> & lt; picture> 元素的最后一个子元素,如果没有原始源标签匹配,则作为后备选项。

如何使用HTML和CSS的新特性实现响应式布局

我们还可以使用图像密度通过<代码> srcset

如何使用HTML和CSS的新特性实现响应式布的局