如何使用 CSS 使 HTML div 响应？

CSS媒体查询可用于使 HTML “div”响应。媒体查询允许用户在不更改标记的情况下更改或自定义许多设备(如台式机、手机、平板电脑等)的网页。使用媒体查询，用户可以针对不同尺寸的屏幕更改特定元素的样式。

CSS @media规则由一种媒体类型组成，它可以有一个或多个表达式，结果可能是“true”或“false”之类的值。

句法：

@media not|only mediatype and (expressions) {
    // Your CSS codes
}

以下元视口元素必须包含在 HTML 文件的“head”部分中，响应式网页才能工作。

示例：在以下示例中，所有三个 HTML “div”块都水平对齐。但是每当屏幕尺寸减小到“500px”以下时，所有三个块都会自动垂直对齐。 @media查询屏幕尺寸中“div”元素的宽度属性设置为小于或等于“500px”。

HTML

  

    
    

  

    
Geeks for Geeks
    
Responsive div using css.
    

        
First block
    
    

        
Second block
    
    

        
Third block 
    
    

        The media query will only apply 
        if the media type is screen
        and the viewport is equal to 
        or less than 500px
    

  

输出：

• 在原来的窗口大小中，三个块都是水平对齐的。

  

• 当屏幕尺寸缩小到“500px”时，三个块都垂直放置。

  

同样，通过在@media查询部分添加 CSS 代码，可以为不同屏幕尺寸的特定 HTML 元素添加或更改各种样式，如上例所示。