如何理解纯 CSS 响应式设计？

在本文中，我们将了解 Pure.CSS 响应式设计。它是响应式 CSS 模块的集合，可以包含在任何 Web 应用程序中，以创建更快、美观和响应式的网站。简单来说，它是一个 CSS 框架，用于在更短的时间内构建一个美观且响应迅速的网站。 Pure CSS 是由 yahoo 开发的 CSS 框架。它有六个模块，分别名为 base、grid、forms、buttons、tables 和 menus。

Pure.CSS 的特点：

这是一种更快、更简单的 Web 开发方式。
它是一个免费的开源工具集合。
它创建独立于平台的网页。
它易于学习和使用。
它具有适用于网页和移动设备的内置响应式设计。

响应式设计：

响应式意味着响应，网页设计意味着设计一个网站。响应式设计是一种根据浏览器宽度或屏幕尺寸简单地重新排列、调整、重新定位、调整整体内容和图像大小的方法。简而言之，响应式设计旨在跨所有设备访问，而不管设备屏幕的大小。一些屏幕尺寸或设备宽度在创建响应式网站时应牢记的是台式机、笔记本电脑、手机和平板电脑。响应式布局是 Pure.CSS 的内置特性。它有一个内部 12 列的移动优先流体网格，有助于对小、大和中型显示屏尺寸进行响应式设计。

Pure.CSS 促进了 4 个不同的关键字， sm、md、lg、xl和这些关键字与可用于根据屏幕宽度生成媒体查询的纯网格单元类 ( pure-u ) 相关联。 “ pure-u ”或“ pure-u-* ”帮助我们将显示屏的宽度分成分数。例如，为了占据显示屏的 3/4 部分，我们需要将类 'pure-u-3-4' 包含到该特定 div 中。所有这些类的条件和媒体查询如下所示：

Key	Classname	CSS Media Query	Applies
none	.pure-u-*	none	always
sm	.pure-u-sm-*	@media screen and (min-width: 35.5em)	≥ 568px
md	.pure-u-md-*	@media screen and (min-width: 48em)	≥ 768px
lg	.pure-u-lg-*	@media screen and (min-width: 64em)	≥ 1024px
xl	.pure-u-xl-*	@media screen and (min-width: 80em)	≥ 1280px

为了生成默认媒体查询，使用“em”而不是“px”，以便媒体查询相应地响应网页的缩放。

示例：本示例描述了使用纯 CSS 来设计针对不同设备宽度的响应式页面。

HTML


  

     pure.css 
    
    
    
    

  

    
        
             First columns of the pure.css ||
  
        
        
             Second columns of the pure.css || 
  
        
        
             GeeksforGeeks 
  
        
        
            A computer science portal for geeks

输出：从下面的输出中，我们可以看到，对于不同的窗口大小，内容不受影响，因为它设置为特定的设备宽度。

如何理解纯 CSS 响应式设计？

Key

Classname

CSS Media Query

Applies

HTML