网页自适应布局常见的方法有三种。
通过对不同的屏幕宽度进行CSS的调整来实现，不同设备下的网页自适应显示效果。
适合对不同设备显示都需要进行详细且精确的自适应调整，缺点是工作量大。 例如：
@media (min-width: 1200){ //>=1200的设备 }
@media (max-width: 990px){ //<=990的设备 }
Bootstrap是目前最出名的自适应布局框架，其原理也就是使用Grid布局，将整个屏幕分为最多12列，通过使用类似.row和.col-xs-4这种预定义的类来实现不同设备下自适应效果。优点是拿来即用。
使用fr单位。 Grid布局提供了一个响应单位fr。 fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。 我们将 grid-template-columns:100px 100px 100px;改成grid-template-columns:1fr 1fr 1fr; 结果就是栅格布局将整个屏幕宽度均分为3份，每一列（1个格子）都占一个fr单位。
我们将屏幕缩小放大都会自动伸缩。
当然你也可以调整其中的占比。比如你希望第二列的格子可以占3份。grid-template-columns:1fr 3fr 1fr;效果如下：
正常的响应式效果是，我们希望在不同容器宽度上，元素可以自动改变所占的宽度，而不是固定列数。我们可以使用repeat（autofit,100px）来实现效果。repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度。我们可以将第一个参数改为auto-fit,这样元素就会根据容器宽度来改变所占列数。
此时呈现的效果就是，通过使用auto-fit，容器会尽可能多的容纳100px宽的格子。格子足够多的话，就会自动换行。当然这时的效果还并不理想，所有的格子难以填充一个容器宽度，右边容易留白。我们可以使用minmax()函数解决此问题。将代码改成 grid-template-columns:repeat(auto-fit,minmax(100px,1fr))minmax()函数定义的范围大于或等于min， 小于或等于max。我们将格子宽度限制为100px，但如果容器有多余的空间就会均分给每列，此时每列都是1fr。效果如下
到此这篇grid布局（grid布局自适应）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！我们可以在格子里添加一张图片。改变图片的object-fit为cover。图片就会根据格子的大小来进行覆盖，我们对屏幕进行伸缩时，图片也会跟着格子的改变进行伸缩。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/39338.html