在页面上有些元素你可能想在特定尺寸的设备上显示或者隐藏 .. 你可以创建一些响应式的工具类，然后用在你想显示或者隐藏的元素上 ..

semantic ui 里的网格组件里面提供了类似的样式，不过它们只能用在布局元素上 .. 这里我已经给你准备好了这些工具类的样式 ..

在 styles 目录的下面，有珍上 _utility.scss .. 想使用这些样式，你可以把它导入到 main.scss 里面 ..

再回到这个样式文件 ..

这里就是用了一些媒体查询 .. 设置了一些宽度范围， 如果元素使用了特定的 css 类，就会在特定的宽度范围里显示或者隐藏 ..

这里需要注意的是样式选择器的用法，这里用了属性选择器，一组方框号，里面是属性的名字还有对应的值 .. class 就是元素上的类属性 .. 这个 *= 表示的是包含 .. 比如这个样式选择器的意思就是，如果元素的 class 属性包含 mobile hidden ，在宽度小于等于 767 像素的窗口上，会隐藏这个用了 mobile hidden 类的元素 ..

[class*="mobile hidden"]

这里隐藏元素用了 display: none 这个样式 .. 意思就是，让元素完全从页面上消失，不占任何地方 .. 后面的 !important 会确保这个样式可以覆盖掉其它的地方对元素应用的 display 属性 ..

这里还出现了一种否定选择器 ..就是这个 :not .. 比如这个选择器，它的意思就是，元素包含 tablet only ，但不能包含 mobile 这个类 ..

[class*="tablet only"]:not(.mobile)

下面我们可以去用一下 ..

这个产品页面的英雄区上的描述还有按钮，我只想在小尺寸的设备上显示 ... 所以它这两个元素的上面，可以用一下 mobile only ...

到浏览器上再去试一下 ..

现在英雄区上的描述还有动作按钮不会显示 ... 缩小一下窗口的尺寸 .. 在小尺寸的移动设备上，产品页面英雄区上的描述还有动作会显示出来 ...