css里没法写条件判断的,但是根据各个浏览器支持的调试命令不同,可以用来区分,比如ie系列支持*号.你写个样式
.style1 { padding:1px*padding:10px}
这样就相当于所有ie浏览器下padding都是10px非ie就是1px
因为其他浏览器不识别*,所以*padding:10px就失效了,而ie下识别,所以则覆盖掉之前的1px了.
不同浏览器都有自己专用的hack,这样就可以实现判断了
区分IE6，IE7，firefox background:orange*background:green_background:blue
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
在我们的移动端的网页设计中，要求很高，1像素的差别就影响我们的整个页面的设计美感。所以，我们需要设配不同的手机屏幕的像素密度的页面，这样，我们就要用到viewport方法。viewport方法就是帮助我们来适配不同手机的屏幕像素密度页面。为了保证我们设计的尺寸不是真，一般会在平米密度可选择性较多的移动设备中，使用viewport技术。这是，我们viewport方法就是帮助我们的来适配不同密度的手机屏幕像素密度。这样，我们可以更好的体现我们的页面的设计美感。
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">实现响应式的方式
Media Query早在CSS2的时候就出现,
@media screen and (max-width:1024px) and (min-width:300px){div{color:red}
}
可以将Media Query看成“Meida Type（判断条件） + CSS（符合条件的样式规则）”,上面代码是屏幕像素在300px-1024px下div的颜色为红色；
css3 vh
vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, h1, h2, h3 {
margin: 0
padding: 0
border: 0
}
.demo {
width: 100vw
font-size: 5vw
margin: 0 auto
background-color: #50688B
color: #FFF
}
.demo2 {
width: 80vw
font-size: 5vw
margin: 0 auto
background-color: #ff6a00
}
.demo3 {
width: 50vw
height: 50vh
font-size: 1vw
margin: 0 auto
background-color: #ff006e
color: #FFF
}
</style>
</head>
<body>
<div class="demo">
<h1>宽度100％, 字体5％</h1>
</div>
<div class="demo2">
<h2>宽度80％, 字体5％</h2>
</div>
<div class="demo3">
<h3>宽度50％, 高度50％, 字体1％</h3>
</div>
</body>
</html>
