纯CSS完成的回应式图象显示信息(无javaScript)

日期:2021-01-20 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

有很多方式能够完成web网页页面里图象的回复。但是,我碰到的全部计划方案都应用了JavaScript。这使我疑虑无需JavaScript完成图象回应是不是可行。

我提出了下面纯CSS的计划方案。

它是怎样工作中的呢?

我把<img>标识避免在<span>内。src特性将从服务器得到手机上版本号的图象。接着我还在<span>元素內部包括了1点CSS。

甚么??HTML文本文档中能嵌入了CSS?

是的,要是你提升了scoped特性,这就在HTML5里便是十分合理的。在这个CSS里,我从某个断点刚开始用了@media查寻把做为情况的高清图象加上到<span>里。 在下面这段编码里,我只加上了1个断点,但是你自然能够按你喜爱的提升很多。

根据应用情况图象标示符,仅有在必须的情况下才会从服务器获得这个图象。也便是说,仅有在media查寻考虑的情况下才可以获得到。<img>将保证<span>有正确的高度,这样<span>上的情况图象才可以获得正确的实际。

下面是能够运作的全部编码。

最先看HTML。

拷贝编码
编码以下:

span class="magik-responsive-image" id="image-01">
<img src="http://dummyimage.com/200x150/cdcdcd/000/?text=lo-res" alt="TODO">
<style scoped>
@media screen and (min-width: 701px){#image-01{background-image:url(http://dummyimage.com/1600x1200/dcdcdc/000/?text=hi-res);}}
</style>
</span>

CSS 大家还必须对CSS最1点改动,便于在理应显示信息高清图象的情况下掩藏低清楚度的图象。技能是提升backgroud-size:100%;这使得在维护保养高度不会改变的状况下屈伸情况。

拷贝编码
编码以下:

.magik-responsive-image {
background-repeat: no-repeat;
background-size: 100%;
display: block;
position: relative;
}
.magik-responsive-image img {
max-width: 100%;
}
@media screen and (min-width: 701px) {
.magik-responsive-image img{
opacity: 0;
}
}

益处

沒有JavaScript
完成起来简易
还能用于视頻(我将在之后的blog文章内容中发布相关这层面的內容)

缺陷

在桌面上自然环境下,必须向服务器推送两个恳求
<style>标识的scoped睡醒在关键的访问器里依然沒有获得适用。更是因为这个缘故,大家才必须提升1个id,但是在后端开发编码中提升这一般并不是难题。