前端H5+Css3基础知识

前端H5+Css3基础知识@TOC

前端H5+Css3基础知识

css篇

1. calc, support, media各自的含义及用法？

• @support功能查询

在考虑到浏览器的兼容性问题时候,我们会在渐进增强或在优雅降级上面犹豫，做出一定的选择,现在有了@support,我们不用担心浏览器不支持css3的一些新属性了,可以放心大胆的使用了。
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

下面请看这段案例,判断浏览器是否支持box布局,也就是弹性盒子模型,如果不支持则引用float布局方式

  .con{
		              display: box;
		              display: -webkit-box;
		              display: -moz-box;
		              display: -o-box;
		              display: -ms-box; }   
		        .con-left{
		            width: 100px;
		            height: 50px;
		            background-color: blue;
		        }
		        .con-right{
		            width: 100px;
		            height: 50px;
		            background-color: green;
		        }
		        /**浏览器不支持弹性盒子模型布局 not 表示不支持 or表示或者条件
		         * 不支持弹性盒子模型,则用float布局
		         * [display description]
		         * @type {[type]}
		         */
		        @supports not (display: box) or (display: -webkit-box)
		         or (display: -moz-box) or (display: -o-box) or (display: -ms-box){
		            /**清除浮动*/
		            .con:after{
		                content: '';
		                display: block;
		                visibility: hidden;
		                height: 0;
		                clear: both;
		            }
		            /**加上浮动布局*/
		            .con-left,.con-right{
		                float: left;
		            }
		        }

(注:)这段代码优先使用弹性盒子模型布局,在不支持的情况下使用float布局

<div class="con">
    <div class="con-left"></div>
    <div class="con-right"></div>
</div>

浏览器展示效果:

大家可以清晰的看到con:after清除浮动的代码并没有加入里面,不满足条件的情况下,代码是不会运行的

• calc() 函数

用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；

.box{
				margin: 0 auto;
				width: calc(100% - 500px);/* 获取当前宽度-500px */
				height: 600px;
				background-color: aqua;
			
			}

• @media 查询

@media 查询，你可以针对不同的媒体类型定义不同的样式。常用于响应式布局