在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量。最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起,也不必为每个屏幕创建媒体查询。ok,让我们发车吧。
…原响应式图像正确设置方法
响应式图像正确设置方法,代码如下:
PC,平板,手机显示良好:
我们用<picture>标签来实现同时适配不同像素密度、不同大小的屏幕。srcset
属性用来指定多张图像,适应不同像素密度的屏幕。
通过 媒体查询,来为不同宽度的屏幕设置不同的图片。
其中,1x 2x 3x 代表设备像素比。
通常 pc的设备像素比为1,iphone7为2,iphone7 plubs为3,一些手机为4,还有一些为1.5,3.65等非整数值。
在下面,所有的设备像素比都要用同一张图片,这样才能显示正常。…
近期评论