自己做商城网站能卖服装吗,移动端优秀网站,网站建设和管理规则,庆阳网站建设预备知识#xff1a;
设备独立像素,以下图的iphone12 Pro为例#xff0c;390*844表示的就是设备独立像素#xff08;DIP#xff09;,也可以理解为CSS像素
物理像素#xff08;设备像素#xff09;#xff0c;就是屏幕的分辨率#xff0c;显示屏就是由一个个物理像素…预备知识
设备独立像素,以下图的iphone12 Pro为例390*844表示的就是设备独立像素DIP,也可以理解为CSS像素
物理像素设备像素就是屏幕的分辨率显示屏就是由一个个物理像素点组成的 DPRDevice Pixel Ratio 设备像素比DPR 物理像素 / 设备独立像素
在同样的css像素大小下屏幕有不同的dpr,同样大小的图片渲染出来的效果会不一样因此为了在不同的 DPR 屏幕下让图片看起来都不失真我们需要为不同 DPR 的图片提供不同大小的图片。有以下几个方案
方案一媒体查询 通过相应的媒体查询得知当前的设备的 DPR 值使用对应的图片 #image {background: url(xxx1x.png)}media (device-pixel-ratio: 2) {#image {background: url(xxx2x.png)}}media (device-pixel-ratio: 3) {#image {background: url(xxx3x.png)}}缺点
可能存在一些介于 1和22和3 之间的 DPR 值匹配不到对应的注意 需要注意语法需要的兼容性需要添加前缀譬如 -webkit-min-device-pixel-ratio可以由 autoprefixer 插件解决
方案二CSS 配合 image-set 语法 image-set 属于 CSS background 中的一种语法image-set() 函数为设备提供最合适的图像分辨率它提供一组图像选项每个选项都有一个相关的 DPR 声明浏览器将从中选择最适合设备的图像进行设置。 #imgage {/* 不支持 image-set 的浏览器*/background-image: url(xxx1x.png);/* 支持 image-set 的浏览器*/background-image: image-set(url(xxx2x.png) 2x,url(xxx3x.png) 3x);}缺点
和方案一一样
方案三srcset 配合像素密度描述符 img标签的srcset属性 可以根据不同的 dpr 拉取对应尺寸的图片 div classimageimg srcxxx1x.pngsrcsetxxx2x.png 2x,xxx3x.png 3x/div上面 srcset 里的 2x,3x 表示 像素密度描述符当屏幕的 dpr 2 时使用 xxx2x.png.png 这张图,以此类推 缺点
和方案一一样
方案四srcset 属性配合 sizes 属性 w 宽度描述符 上述 3 种方案都存在统一的问题只考虑了 DPR但是忽略了响应性布局的复杂性与屏幕的多样性 srcset 属性还有一个 w 宽度描述符配合 sizes 属性一起使用可以覆盖更多的面 sizes定义图像元素在不同的视口宽度时可能的大小值
imgsizes “(min-width: 600px) 600px, 300pxsrc xxx.pngsrcset “xxx1x.png 300w,xxx2x.png 600w,xxx3x.png 1200w,sizes “(min-width: 600px) 600px, 300px” 的意思是
如果屏幕当前的 CSS 像素宽度大于或者等于 600px则图片的 CSS 宽度为 600px反之则图片的 CSS 宽度为 300px srcset “photo1x.png 300w, photo2x.png 600w, photo3x.png 1200w 里面的 300w600w900w 叫宽度描述符。
示例 当前屏幕 dpr 2 CSS 宽度为 375px。 当前屏幕 CSS 宽度为 375px则图片 CSS 宽度为 300px因为sizes定义了最小宽度屏幕375px小于600px所以图片的CSS宽度为300px。分别用上述 3 个宽度描述符的数值除以 300。
300 / 300 1600 / 300 21200 / 300 4 上面计算得到的 1、 2、 4 即是算出的有效的像素密度换算成和 x 描述符等价的值 。这里 600w 算出的 2 即满足 dpr 2 的情况匹配到xxx2x.png这张图。
示例 当前屏幕 dpr 3 CSS 宽度为 414px。 当前屏幕 CSS 宽度为 414px则图片 CSS 宽度仍为 300px
300 / 300 1600 / 300 21200 / 300 4 dpr 32 不满足因此匹配到 1200w 这张图。
JavaScript 方案实现图片的懒加载
通过 JavaScript 实现的懒加载主要是两种方式
监听 onscroll 事件通过 getBoundingClientRect API 获取元素图片距离视口顶部的距离配合当前可视区域的位置实现图片的懒加载通过 HTML5 的 IntersectionObserver APIIntersection Observer交叉观察器 配合监听元素的 isIntersecting 属性判断元素是否在可视区内能够实现比监听 onscroll 性能更佳的图片懒加载方案 还有一种是类似于懒加载的方式类似于虚拟列表使用 content-visibility: auto 实现图片内容的延迟渲染
templatediv classcarddiv classimg-containerimg classimg :srcprops.url //divdiv classtitle{{ props.title }}/divdiv classarea{{ props.area }}/divdiv classcollect{{ props.collect }}人想要/divdiv classpricespan classamount{{ props.price }}/span/div/div
/templatestyle
.card {content-visibility: auto;
}
/style不在可视区域内的内容一开始是没有被渲染的在每次滚动的过程中才逐渐渲染以此来提升性能虽然当前页面可视区域外的内容未被渲染但是图片资源的 HTTP/HTTPS 请求依然会在页面一开始被触发因此严格来讲它并不是一个懒加载的方式;
