媒体查询:让样式响应不同的媒体特性

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们需要使用 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 在这些媒体上的宽度 ..

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

媒体查询:让样式响应不同的媒体特性《 网页设计案例:移动导航 》

统计

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

社会化网络

关于

微信订阅号

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