当前位置:Gxlcms > html代码 > Css3媒体查询使用_html/css_WEB-ITnose

Css3媒体查询使用_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:33人阅读

css3媒体查询技术的出现,在多设备支持上为我们提供了解决方案。

媒体查询的使用方法:

 @media screen and (max-width: 480px) {  .col-xs-1{width: 8.333333333333332%; float:left;}  .col-xs-2{ width: 16.666666666666664%; float:left;}  .col-xs-3{ width: 25%; float:left;} }

在设备窗口宽度小于480时,下面的样式会被采用,不满足这个查询设置,下面定义的css是无效的,html根本就不会识别到。

简单理解就是,如果当前宽度是1000,那么就是div上有类名.col-xs-1,div还是只是简单块元素(不会浮动和宽为百分比),查询的设置是不起作用的。

充分利用媒体查询,实现多设备支持的框架当前最热门就是bootstrap了,我们可以学习和使用它进行开发。

下面是我自己利用媒体查询写的实例页面,都是常用css布局方式配合了媒体查询,多的就不做解释了,一句话就是写法都是css里面,看看就能懂:

        media/媒体查询/简易UI                     
测试窗口大小当前为0px

演示:12列布局

1
2
3
3-1
3-2
4
5
6
7

演示:表单ui

演示:表格

111
222
333
111
222
333

流式布局,百分比赋值,多预设设置结合媒体查询。

人气教程排行