如何用一简单的CSS制作响应式HTML网页
如何用简单的CSS制作响应式HTML网页
#故事前端开发
在这篇文章中,我将教你如何使用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发生的一样。
如何用一简单的CSS制作响应式HTML网页相关推荐
- HTML CSS 制作响应式价格表单展示id1075-网页前端设计
HTML & CSS 制作响应式价格表单展示id1075-网页前端设计 源码下载地址 在新演示地址 html <a class="maxbutton-3 maxbutton&q ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- window safari 怎么进入响应式_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- 响应式布局html像素值计算,CSS Calc():制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
- HTML5期末大作业:旅游网站设计——简单大气的响应式旅游网页(5页) HTML+CSS+JavaScript...
HTML5期末大作业:旅游网站设计--简单大气的响应式旅游网页(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页 ...
- CSS:响应式下的折叠菜单(条纹式)
2019独角兽企业重金招聘Python工程师标准>>> 原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前, ...
- 在html中写响应式布局的代码,CSS实现响应式布局的方法
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
- Web前端知识CSS(响应式设计)
1.什么是响应式设计 也叫响应式布局,响应式开发 实现不同屏幕分辨率的终端上浏览网页的不同展示方式. 响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的 ...
- html 响应式布局怎么实现,CSS实现响应式布局
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
最新文章
- 程序员发长贴讲述真实某多多:薪水高,普调高,环境差,厕所少!强制去买菜,全行业竞业,穿拖鞋会被暴力执法!...
- 这个新方法,竟然能检测 Python 代码的好坏!
- 用Python让单片机“行动”起来——MicroPython实战入门篇
- linux第一天的简单整理
- BZOJ2752: [HAOI2012]高速公路(road)(线段树 期望)
- golang interface的使用和实现(翻译整理)
- “程序员千万不要选全栈开发”
- 华为鸿蒙os2.0系统何时搭载手机,鸿蒙OS 2.0系统正式发布!余承东:明年华为系手机将会搭载...
- ganlgia-rrdcached
- 定了!华为的AI技术路线向开发者开放!
- 笔记本电脑如何连接手机热点_如解决Mac连接手机热点出错问题 ?
- Matlab DIP(瓦)ch5图像复原练习
- 能翻译整篇论文的软件有什么?
- matlab曲线导入cad,MATLAB导入CAD数据
- java http 传输二进制流_字符流、字节流、二进制及其在HTTP协议传输
- 41.朴素贝叶斯Naive Bayes公式推导与理解+求解公园凉鞋问题(借助文氏图)
- java实现清除图片水印_Java实现图片水印
- js实现整体,局部刷新
- 【C语言】[其他] :code, data, idata, xdata, bdata, edata, hdata等,代表的意思
- java怎么处理黑白bmp_Android JNI处理图片实现黑白滤镜的方法