网站源码-图片-资料下载-学习资料-牛资料网!只做精品资料网
  • 首 页
  • 如何用一简单的CSS制作响应式HTML网页
    时间:2020-06-22 11:40 来源:www.xyhndec.com 编辑:免费资料 浏览:

    在这篇文章中,我将教你如何使用CSS网格来创建一个超级酷的图像网格,它随着屏幕的宽度而改变列的数量。

     

    最赞的一点就是:这个响应式效果只需要添加一行CSS。

     

    这意味着我们不必给HTML取很乱的类名(即col-sm-4,col-md-8),或者为每一个屏幕大小创建媒体查询。

    现在让我们开始吧!

     

    设置

    于本文,我们将继续使用我们在第一篇CSS Grid文章中使用的网格。然后我们将在文章的最后添加图片。以下是我们的初始网格的外观:

     

    这是HTML:

    <DIV类= “容器”> 
      <DIV> 1 </ DIV> 
      <DIV> 2 </ DIV> 
      <DIV> 3 </ DIV> 
      <DIV> 4 </ DIV> 
      <DIV> 5 </ DIV> 
      <DIV > 6 </ div> 
    </ div>

     

    然后是CSS:

    .container { 
        display:grid; 
        grid-template-columns:100px 100px 100px; 
        grid-template-rows:50px 50px; 
    }

     

    注意:这个例子还有一些基本的样式,我不会在这里介绍,因为它和CSS Grid没有任何关系。

    如果这段代码让你感到困惑,我建议你阅读我5分钟学习CSS网格的文章,在这里我将介绍布局模块的基础知识。

     

    让我们开始让列响应。

     

    基本的响应式与分数单位

     

    CSS网格带来了一个全新的值---分数单位。分数单位是fr,它允许你将容器分成尽可能多的分数。

     

    让我们将每个列更改为一个分数单位的宽度。

     

    .container { 
        display:grid; 
        grid-template-columns:1fr 1fr 1fr; 
        grid-template-rows:50px 50px; 
    }

     

    这里发生的事情是网格将整个宽度分成三部分,每一列都占用一个单位。结果如下:

     

    如果我们将该grid-template-columns值更改为1fr 2fr 1fr,则第二列现在将是另外两列的两倍。现在的总宽度是四个分数单位,第二个占了两个,而其他的占了一个。这将是效果图:

     

    换句话说,分数单位值使您可以非常容易地改变列的宽度。

     

    先进的响应能力

     

    然而,上面的例子并没有给我们想要的响应,因为这个网格总是三列宽。我们希望我们的网格使用容器的宽度来改变列的数量。要做到这一点,你必须学习三个新的概念。

     

    重复()

     

    我们将从这个repeat()函数开始。这是指定列和行的更强大的方法。让我们把我们原来的网格,并改变使用repeat():

    .container { 
        display:grid; 
        grid-template-columns:repeat(3,100px); 
        grid-template-rows:repeat(2,50px); 
    }

    换句话说,repeat(3, 100px)是相同的100px 100px 100px。第一个参数指定了你想要的列数或行数,第二个参数指定了它们的宽度,所以这将给我们提供和我们刚开始一样的布局。

     

     

     

    自动调整

     

    然后是自动适应。让我们跳过固定数量的列,而是用3替换auto-fit。

    .container { 
        display:grid; 
        grid-gap:5px; 
        grid-template-columns:repeat(auto-fit,100px); 
        grid-template-rows:repeat(2,100px); 
    }

    这会导致以下行为:

     

    网格现在使用容器的宽度来改变列的数量。

    它只是试图尽可能多地将100px宽的列安装到容器中。

    但是,如果我们将所有列的硬编码精确到100像素,我们将永远不会获得我们想要的灵活性,因为它们很少会添加到整个宽度。正如你在上面的gif中看到的,网格经常会在右侧留下空白。

     

    MINMAX()

     

    为了解决这个问题,我们需要最终的成分minmax()。我们将简单地替换100px minmax(100px, 1fr)。这是最终的CSS。

     

    .container { 
        display:grid; 
        grid-gap:5px; 
        grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); 
        grid-template-rows:repeat(2,100px); 
    }
    注意,所有的响应都发生在一行CSS中。

    这会导致以下行为:

     

    正如你所看到的,完美的作品。该minmax()函数定义了大于或等于min且小于或等于max 的大小范围。

     

    所以列现在总是至少100px。但是,如果有更多的可用空间,网格将简单地分配给每个列,因为列变成一个分数单位,而不是100像素。

    添加图像

     

    现在最后一步是添加图像。这与CSS Grid没有任何关系,但是我们还是要看代码。

     

    我们将在每个网格项目内添加一个图片标签。

     

    <div> <img src =“img / forest.jpg”/> </ div>

     

    为了使图像适合项目,我们将它设置为与项目本身一样宽和高,然后使用object-fit: cover;。这将使图像覆盖整个容器,如果需要的话,浏览器将裁剪它。

     

    .container> div> img { 
        width:100%; 
        height:100%
        object-fit:cover; 
    }

    结果如下:

    高清版全景原图



     

     

    而就是这样!您现在知道了CSS Grid中最复杂的概念之一,所以请给自己一个机会。

    浏览器支持

    在我们结束之前,我还需要提及浏览器支持。在写这篇文章的时候,全球77%的网站流量支持CSS Grid,而且正在攀升。

    我相信2018年将是CSS Grid的一年。它将获得突破,并将成为前端开发人员的必备技能。就像过去几年CSS Flexbox发生的一样。

    郑重声明:
    牛资料网所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
    我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系牛资料网索要。
    如有侵犯您的版权,请及时联系QQ:964613048,我们尽快处理。

    左中右3栏布局中最先显示中栏内容的方法_div+css布局教程左中右3栏布局中最先显示中栏内容的方
    响应式网站如何才能得到百度的重视响应式网站如何才能得到百度的重视
    CSS3 值得称赞新特性CSS3 值得称赞新特性
    推荐栏目
    • 客服:我们竭诚为您服务!
    • 客服:我们竭诚为您服务!