[CSS]关于如何使用最大宽度和最小宽度的详尽解释!响应式支持是完美的

最大宽度和最大高度

“宽度有不同类型,但我暂时仅使用宽度。”
“我无法想象何时使用最大和最小宽度。”

你有这种感觉吗?“宽度”的设置不够吗?实际上,您可能想知道为什么需要设置最大值和最小值。也许很多人不知道为什么要设置它?

当然,宽度可以应付大多数情况,但实际上在创建响应式屏幕时这是一个非常有用的属性。网站的响应率现已提高到50%,对此做出响应是一项必不可少的技能。这次,我将告诉您如何将宽度用于此响应式支持。本文是为初学者编写的,因此有经验的用户应在必要时略过它。

[这也是经常阅读]
[对于初学者]仔细解释如何编写CSS(样式表)

响应式设计的注意事项

我经常听到“响应式设计”一词。这是一种Web设计,即使在智能手机,平板电脑和PC等不同尺寸的终端上观看时,也以正确的尺寸显示屏幕。即使用一个代码编写,它也会以可变的方式移动,并且可以根据您所查看的屏幕(例如字符的排列和大小)进行更改。

顺便说一句,以这种方式编写代码时,问题始终是宽度,字体等的大小。如果以绝对值(例如px)写入它,则它不能对应于变量移动。这是因为即使减小尺寸也很难看宽度和尺寸是否不变。因此,不可避免地经常使用变量值,例如``%'',``em'',``rem''和``vh / vw''。这些是适合快速响应支持的部门,但是在某些情况下会带来不便。

例如,以“%”为例。假设您有一台大屏幕计算机,其屏幕尺寸为“ 1920px x 1080px”。假设您在此处指定元素宽度为80%。如果您将屏幕尺寸指定为80%,它将如下图所示填充整个屏幕。作为显示方式,这不是很理想。

因此,如下图所示,无论宽度多宽,我都希望将可变宽度限制在一定范围内。那时,使用“最大宽度”和“最小宽度”。

最大宽度的计时和使用

定时

使用“最大宽度”的场景是您希望限制宽度以使元素不会大于特定级别的场景。具体来说,当您要在小屏幕(智能手机或平板电脑)上填充屏幕,而在大屏幕上(PC尺寸)具有固定宽度时。当设计PC尺寸(例如1280px或更大的屏幕尺寸设计)时,它是“ px”规范,可以将宽度抑制到一定水平。通过从相对更改为绝对,它不会比达到该px时宽。

如何使用

用法与宽度相同。以下含义意味着您可以将宽度最多增加到500px。换句话说,它不会传播超过501px。

  max-width: 500px;

顺便说一下,这是使用“最大宽度”的方法,但是如果将其与“宽度”的规格一起使用,则没有问题。设置宽度,通常使用此“宽度”,并且当达到最大宽度时,它将受到“最大宽度”的限制。此外,通过交换width:500px和max-width:80%之类的值可以获得相同的结果。

  width: 80%;
  max-width: 500px;

例如,我编写了以下代码。 HTML和CSS。

  <div class="parent">
    <div class="child">
       これは 確認用です。
    </div>
  </div>
.parent{
	background: #E0E0F8;
	padding: 3rem;
	text-align: center;
        display: flex;
	justify-content: center;
}

.child{
	width: 400px;
        max-width: 100%;
	text-align: center;
	font-weight: bolder;
	background: #58D3F7;
	padding: 2rem;
}

现在让我们比较两种模式。一个是600像素宽,另一个是2000像素宽。
首先,宽度为600像素,但子元素的宽度为之前父元素的80%。

但是,当您将宽度增加到2000px时呢?您会看到宽度停止在400px。

有时即使子元素大于父元素也使用“最大宽度”。在这种情况下,屏幕宽度会减小。例如,在以下情况下。

但是,这种情况适用于如下所示的flexbox:这次,以下内容用于父元素,以便该元素位于中心。实际上,您可以使用max-width来控制宽度,但是这种方法要容易得多。

.parent{
        display: flex;
	justify-content: center;
}

最后,顺便说一句,当使用图像作为子元素时,指定具有max-width的绝对值可能会导致图像的宽高比崩溃(不一定在所有情况下)。在这种情况下,请指定“ height:auto;”。

最小宽度的计时和使用

定时

min-width是设置最小宽度的属性,以使宽度不会变窄。例如,当屏幕缩小并显示在智能手机或平板电脑上时。例如,在大屏幕(例如PC)上,宽度为30%的元素在可见性方面应该不是问题。但是,对于用户来说,30%的宽度是很难看到的智能手机尺寸。因此,当缩小尺寸变得非常小时,我想停一停。

如何使用

以下含义意味着您可以将宽度减小到最小150像素。也就是说,它不能减少到149px以下。

  width: 80%;
  min-width: 150px;

“最小宽度”的用法与“最大宽度”的用法相同。它与宽度同时使用,并且当达到最小宽度时,受“最小宽度”限制。但是请注意,如果将width:150px和min-width:100%替换为值,将不会得到与max-width相同的结果。如果最小值设置为150px,则没有意义,因为在PC尺寸的屏幕上查看时,最小值从一开始就超过了该值。

  width: 80%;
  min-width: 150px;

因此,最好进行上述设置,但是如果您尽可能缩小屏幕,则可以看到“最小宽度”是有效的,如下所示。您可以看到它没有降低到150像素以下。

可以同时使用此最大宽度和最小宽度。如果执行以下操作,则宽度将为父元素的80%,且范围为200px以上且600px以下。

  width: 80%;
  max-width: 600px;
  min-width: 200px;

媒体查询是对此的物理总结。这是学习响应式对应时将永远学习的内容之一。

/*====================
スマホを基本設計にする
 - 〜479px:スマートフォン縦
 - 480px〜599px:スマートフォン横
 - 600px〜959px:タブレット
 - 960px〜1279px:小型PC
 - 1280px〜:大型PC
====================*/
 
/* 〜479px:SP縦
------------------------------ */
ここに基本CSSを書きます。
モバイルファーストでは、モバイル最小値からPCの大きさに向けて、以降のCSSを書いていきます。
 
 
/* 480px〜599px:SP横
------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) { 
 ここにCSSコードを書く。
}
 
/* 600px〜959px:タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
 ここにCSSコードを書く。
}
 
/* 960px〜1279px:小型PC
------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {
 ここにCSSコードを書く。
}
 
/* 1280px〜:大型PC
------------------------------ */
@media screen and (min-width:1280px) {
 ここにCSSコードを書く。
}

概要

创建响应式网站时,必须使用最大宽度和最小宽度。特别是,在设置PC尺寸的最大宽度和智能手机尺寸的最小宽度时,会出现设计上的不便。因此,首先,学习响应式对应([CSS]全面解释响应式方法以及如何制作[优缺点]),最好不要将此知识加上alpha知识。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。