问题描述
我很难使该网格响应。我有2行3列,每行都有图片和文本。图片大小相同。我想使其具有响应性,因此当它达到一定的宽度时,各列彼此重新定位,并且字体大小更改为较小的字体。谢谢!
图片:
.domov2 {
width: 100%;
padding: 0px 0 50px 0;
background-color: #D5D7D7;
min-height: 450px;
}
.domov22 {
width: 80%;
max-width: 960px;
min-width: 960px;
overflow: hidden;
margin: 0;
margin-right: auto;
margin-left: auto;
min-height: 450px;
}
.grid-container {
position: relative;
column-gap: 10%;
row-gap: 50px;
margin: 50px 0px 0px 0px;
/* top right bot left*/
display: grid;
grid-template-columns: 23% 24% 23%;
grid-template-rows: 300px 300px;
padding: 10px;
text-align: justify;
}
.slika {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 220px;
min-width: 220px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<section class="domov2">
<section class="domov22">
<div class="grid-container">
<div>
<div class=slika> <img src="slike/computer.png" height=140 class="center"></div><br> Izdelamo vam vizualno atraktivno,urejeno spletno stran.</div>
<div>
<div class=slika> <img src="slike/presentation.png" height=140 class="center"></div><br> Povečajte svojo prodajo in prepoznavnost s privlačno in urejeno spletno stranjo.</div>
<div>
<div class=slika> <img src="slike/brand.png" height=140 class="center"></div><br> SEO optimizacija. Vašo spletno stran optimiziramo tako,da bo dosegala visoke pozicije na “google” iskalniku.</div>
<div>
<div class=slika> <img src="slike/support.png" height=140 class="center"></div><br> Zastonj vzdrževanje (posodabljanje vtičnikov in varnostno kopiranje) prve tri mesece po izdelavi spletne strani.</div>
<div>
<div class=slika> <img src="slike/consulting.png" height=140 class="center"></div><br> Hitra,prijazna in odzivna podpora uporabnikom.</div>
<div>
<div class=slika> <img src="slike/discussion.png" height=140 class="center"></div><br> Nudimo brezplačno prvo svetovanje na daljavo. </div>
</div>
</section>
</section>
解决方法
根据您的判断使您适应移动设备。在CSS中,您可以看到添加的两个媒体查询@media
。您可以根据自己的喜好设置调整大小的数字。另外,我删除了min-width: 960px
中的.domov22
规则,因为该规则阻止了将块设置为“橡胶”。另外,我已将您的网格template-columns: 23% 24% 23%
替换为grid-template-columns: repeat(3,1fr)
,希望它能对您有所帮助。如有任何疑问,请联系。
.domov2{
width:100%;
padding: 0px 0 50px 0;
background-color: #D5D7D7;
min-height:450px; }
.domov22{
width:80%;
max-width:960px;
/*min-width:960px;*/
overflow:hidden;
margin: 0;
margin-right: auto;
margin-left: auto;
min-height:450px; }
.grid-container {
position:relative;
column-gap:10%;
row-gap:50px;
margin: 50px 0px 0px 0px; /* top right bot left*/
display: grid;
/*grid-template-columns: 23% 24% 23%;*/
grid-template-columns: repeat(3,1fr);
grid-template-rows: 300px 300px ;
padding: 10px;
text-align: justify;}
.slika{
display: block;
margin-left: auto;
margin-right: auto;
max-width:220px;
min-width:220px;}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
@media(max-width: 950px){
.grid-container {
grid-template-columns: repeat(2,1fr);
}
}
@media(max-width: 550px){
.grid-container {
grid-template-columns: repeat(1,1fr);
}
}
<section class="domov2">
<section class="domov22">
<div class="grid-container">
<div><div class=slika> <img src="slike/computer.png" height=140 class="center"></div><br>
Izdelamo vam vizualno atraktivno,urejeno spletno stran.</div>
<div><div class=slika> <img src="slike/presentation.png" height=140 class="center"></div><br>
Povečajte svojo prodajo in prepoznavnost s privlačno in urejeno spletno stranjo.</div>
<div><div class=slika> <img src="slike/brand.png" height=140 class="center"></div><br>
SEO optimizacija. Vašo spletno stran optimiziramo tako,da bo dosegala visoke pozicije na “google” iskalniku.</div>
<div><div class=slika> <img src="slike/support.png" height=140 class="center"></div><br>
Zastonj vzdrževanje (posodabljanje vtičnikov in varnostno kopiranje) prve tri mesece po izdelavi spletne strani.</div>
<div><div class=slika> <img src="slike/consulting.png" height=140 class="center"></div><br>
Hitra,prijazna in odzivna podpora uporabnikom.</div>
<div><div class=slika> <img src="slike/discussion.png" height=140 class="center"></div><br>
Nudimo brezplačno prvo svetovanje na daljavo. </div>
</div>
</section>
</section>
,
参考:https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
您可以在不使用@media
查询的情况下自动调整列的大小
这会根据屏幕尺寸调整您的列
display:grid;
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
.domov2 {
width: 100%;
padding: 0px 0 50px 0;
background-color: #D5D7D7;
min-height: 450px;
}
.domov22 {
width: 80%;
max-width: 960px;
/*min-width:960px;*/
overflow: hidden;
margin: 0;
margin-right: auto;
margin-left: auto;
min-height: 450px;
}
.grid-container {
position: relative;
column-gap: 10%;
row-gap: 50px;
margin: 50px 0px 0px 0px;
/* top right bot left*/
display: grid;
/*grid-template-columns: 23% 24% 23%;*/
grid-template-columns: repeat(auto-fit,1fr));
grid-template-rows: 300px 300px;
padding: 10px;
text-align: justify;
}
.slika {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 220px;
min-width: 220px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
@media(max-width: 950px) {
.grid-container {
grid-template-columns: repeat(2,1fr);
}
}
@media(max-width: 550px) {
.grid-container {
grid-template-columns: repeat(1,1fr);
}
}
<section class="domov2">
<section class="domov22">
<div class="grid-container">
<div>
<div class=slika> <img src="slike/computer.png" height=140 class="center"></div><br> Izdelamo vam vizualno atraktivno,urejeno spletno stran.</div>
<div>
<div class=slika> <img src="slike/presentation.png" height=140 class="center"></div><br> Povečajte svojo prodajo in prepoznavnost s privlačno in urejeno spletno stranjo.</div>
<div>
<div class=slika> <img src="slike/brand.png" height=140 class="center"></div><br> SEO optimizacija. Vašo spletno stran optimiziramo tako,da bo dosegala visoke pozicije na “google” iskalniku.</div>
<div>
<div class=slika> <img src="slike/support.png" height=140 class="center"></div><br> Zastonj vzdrževanje (posodabljanje vtičnikov in varnostno kopiranje) prve tri mesece po izdelavi spletne strani.</div>
<div>
<div class=slika> <img src="slike/consulting.png" height=140 class="center"></div><br> Hitra,prijazna in odzivna podpora uporabnikom.</div>
<div>
<div class=slika> <img src="slike/discussion.png" height=140 class="center"></div><br> Nudimo brezplačno prvo svetovanje na daljavo. </div>
</div>
</section>
</section>