我们需要使用 css 里面的媒体查询 .. 它可以让我们为不同的媒体专门去设计一些样式 ..

screen，tv，print ，这些都是媒体 .. screen 指的就是电脑，手机，平板这些设备的屏幕 .. tv 是电视，print 是打印机 ..

使用媒体查询，除了你可以指定特定的媒体以后，你还可以指定媒体的一些特性，比如宽度的范围，屏幕的方向，设备的分辨率等等 ..

现在你看到的这个页面，其实已经用到了媒体查询 .. 只不过它现在用的媒体查询不是我们自己去写的 ...

调整一下页面的宽度 ... 你会发现这个导航栏的宽度到一定程度的时候会有变化 .

这是因为，我们在页面上用了一个 ui container，它是 semantic ui 里面的 container 组件提供的样式.. 它可以让使用了 ui container 类的容器响应不同的宽度 ..

在这个样式表里，用到了媒体查询 .. 先找到这个样式表 .. 在 semantic .. dist .. components 里面 .. 打开这个 container.css ..

这里你会发现，有些样式是在 @media 这个区块里 .. 这就是 css 的媒体查询样式的写法 ..

比如这块样式 .. 它先设置了具体的媒体， only screen ，意思就是下面这块样式只在 screen 类型的媒体里有效 ..

and 表示并且，后面又设置了一个条件 .. max-width ，最大宽度设置成了 767px，整个媒体查询的意思就是，在宽度小于等于 767 像素的 screen 类型的媒体上，应用下面这块样式 ..

具体的样式会包含在一组大括号里面 ..

这块样式的上面标注了一下是 Mobile .. 表示这块样式应该是为小尺寸的移动设备准备的 ..

下面这里还有一块儿是 Tablet ，表示平板 ..

同样是为 screen 类型的媒体 .. 并且宽度要大于等于 768 像素 ，还要小于等于 991像素 .

在这种媒体上 .. 它设置的 .ui.container 的宽度是 723 像素 ..

后面还有两个媒体查询 .. 一个是 Small Monitor ，小号的显示器 .. 还有一个是 Large Monitor .. 大号的显示器 ..

它们里面都分别设置了 .ui.contaienr 在这些媒体上的宽度 ..

这些媒体查询的条件不是固定的，你完全可以根据自己的真实的需求自己去创建这些媒体查询，然后在里面去添加你需要为特定的媒体添加的样式 ...