用户登录

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

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 ...

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

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

响应式的工具类《 网页设计案例:产品页 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点