容器类:这是引导程序的预定义类之一,它包含网页中的全部内容。有两个容器类,即容器和容器流体类。这些类具有不同的属性,并且可以使用适合自己需求的类。
容器流体:当将网页内容包含在具有容器流体类的div元素中时,div中包含的所有元素都将填充到设备的整个宽度。
容器:如果将网页内容包含在具有容器类的div元素中,则div中包含的所有元素都不会填充到设备的整个宽度。相反,对于每个标准屏幕大小的断点,都预定义了媒体查询。
例如:
-
@media (min-width: 1200px) .container { max-width: 1140px;}
-
@media (min-width: 992px) .container { max-width: 960px; }
显然,使用容器类将提供一定量的左右边距,这是默认值,并且对于各种屏幕尺寸而言都是不同的。但是,有一个例外,当屏幕大小从平板电脑大小更改为移动大小时,容器类后面的媒体查询会自动更改,以占据屏幕100%的宽度。
- 。容器 {
宽度:100%;
padding-right:15像素;
padding-left:15px;
右边距:自动;
左边距:自动;
}
示例:以下示例是适合于设备屏幕宽度的自适应网页。
Responsive Div
Geeks for Geeks
About:
GeeksforGeeks.org was created with a goal
in mind to provide well written, well thought
and well explained solutions for selected
questions. The core team of five super geeks
constituting of technology lovers and computer
science enthusiasts have been constantly
working in this direction.
List of all things available:
- Courses
- Internships
- Coding Practice Platforms
- Company Specific Practice Platforms
- Interview Corner
- Subject Wise Practice Questions
and all things TECH!
输出:
- 在手机中(425 px)