CSS如何运用媒体查询
如今的界面开发需要适应更多的平台，比如PC端，移动端。而各种平台页面的尺寸是不一样的，这样就加大了我们制作页面的难度。而运用CSS的媒体查询就可以解决这一问题，下面小编就给大家分享一下CSS如何运用媒体查询
操作方法
- 01
首先准备html的文档，并且在文档中准备一个div空标签，如下图所示
- 02
然后给div中的样式类添加样式，如下图所示，样式主要设置了宽，高以及背景
- 03
然后运用@media规则进行媒体查询的设计，如下图所示，设置当页面宽度最小达到768的时候执行其下面的样式
- 04
接下来我们在定义一个尺寸，用来在PC端显示样式，如下图所示
- 05
由于媒体查询是高版本浏览器才具备的，所以对于低版本浏览器的话，需要引入低版本兼容脚本，如下图所示
- 06
最后媒体查询的尺寸也可以写多个，如下图所示，运用and将多个尺寸连接起来即可
- 07
综上所述，媒体查询的使用主要运用尺寸来界定各种平台，同时要注意低版本浏览器的兼容
赞 (0)