Grid布局实现网页自适应

前言

网页自适应布局常见的方法有三种。

1.原生:使用@media媒体查询,rem相对单位。

通过对不同的屏幕宽度进行CSS的调整来实现,不同设备下的网页自适应显示效果。
适合对不同设备显示都需要进行详细且精确的自适应调整,缺点是工作量大。 例如:
@media (min-width: 1200){ //>=1200的设备 }
@media (max-width: 990px){ //<=990的设备 }


2.使用Bootstrap框架

Bootstrap是目前最出名的自适应布局框架,其原理也就是使用Grid布局,将整个屏幕分为最多12列,通过使用类似.row和.col-xs-4这种预定义的类来实现不同设备下自适应效果。优点是拿来即用。


3.使用Grid布局

这是今天本文讲解的重点,一行代码解决响应式布局,简单容易上手。
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

示例讲解

基本用法

HTML代码
我们使用Grid布局两行三列,设置六个不同颜色的格子

在这里插入图片描述

CSS代码
让container实现grid布局,宽为100px,高为60ox,给格子简单设置下背景颜色和间距。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


使用fr单位

使用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。效果如下

在这里插入图片描述
在这里插入图片描述


添加图片

我们可以在格子里添加一张图片。改变图片的object-fit为cover。图片就会根据格子的大小来进行覆盖,我们对屏幕进行伸缩时,图片也会跟着格子的改变进行伸缩。
在这里插入图片描述

可以到codepen查看效果与代码
https://codepen.io/lyking90/pen/JjKmNKr

  • 14
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值