YUI 中的 Grids CSS值得关注和学习的

YUI（Yahoo User Interface）中的Grids CSS是一个响应式布局框架，它可以帮助开发人员在不同设备上创建一致的网格布局，非常适用于Web应用程序和移动应用程序的开发。以下是关于YUI Grids CSS值得关注和学习的一些攻略：

YUI（Yahoo User Interface）中的Grids CSS是一个响应式布局框架，它可以帮助开发人员在不同设备上创建一致的网格布局，非常适用于Web应用程序和移动应用程序的开发。以下是关于YUI Grids CSS值得关注和学习的一些攻略：

1. 栅格系统的使用

YUI Grids CSS的栅格系统是用于布置页面的一组CSS类。这些类可以帮助你创建响应式布局，其中的列可以在不同的浏览器视口大小下定义为不同的宽度。在YUI Grids CSS中，栅格中的列使用"yui-g"命名空间，可以通过组合与此命名空间相关的类名来创建不同大小的列，如"yui-g-1"，"yui-g-2"等。栅格中的行可以使用"yui-gb"类名定义。同时，可以通过"yui-gb"类名来定义块级内容的组合。

以下是一个示例，在此示例中，根据浏览器窗口的大小，这些列的尺寸会自动调整：

<div class="yui-g">
  <div class="yui-u">
    Column 1
  </div>
  <div class="yui-u">
    Column 2
  </div>
  <div class="yui-u">
    Column 3
  </div>
</div>

2. 媒体查询的使用

YUI Grids CSS通过内置的媒体查询为不同的浏览器视口大小提供不同的样式。可以通过添加自定义媒体查询来扩展默认的YUI Grids CSS响应式布局。可以在CSS文件中添加媒体查询，并为不同的分辨率和设备类型定义不同的样式。

以下是一个示例，其中定义了自定义媒体查询来适应较小的设备：

@media only screen and (max-width: 480px) {
  .yui-g {
    margin-left: 0;
  }

  .yui-u {
    display: block !important;
    float: none;
    margin: 0;
    width: 100% !important;
  }
}

在以上示例中，"max-width: 480px"表示最大屏幕宽度为480像素。在此宽度下，".yui-g"类的左边距被设置为零，".yui-u"类的宽度被设置为100%。这可以帮助我们创建适用于移动设备的响应式布局。

总之，YUI Grids CSS值得关注和学习的原因在于其具有响应式的特性，可以帮助我们快速地创建适用于多种设备类型和屏幕分辨率的网格布局。同时，它还提供了灵活的自定义选项和媒体查询，使得其可以适应不同的设计需要。