接触响应式-css3-media判断屏幕分辨率

// IE6、7、8不支持css3    使用响应式一般用bootstrap框架(IE8使用时须引用Respond.js)而不用原生JS

 

外联式：

<link type="text/css" rel="stylesheet" href="css/link.css" media="only screen and (max-width:480px)" />

//只有480px以下时才引用link.css样式

 

内联式：

<style>

　　@media screen and (min-width: 480px){

　　　　body{background: red;}

　　}

</style>

//只有480px以下时才应用{}里的样式

 

//Bootstrap移动框架使用时必须设置meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

//然后引用bootstrap.css文件

<link rel="stylesheet" href="css/bootstrap.min.css">

//判断是否引用respond.js：

<!--[if lt IE 9]>

　　<script src="https://oss.maxcdn.com/libs/respong.js/1.3.0.respond.min.js"></script>

<![endif]-->

 

转载于:https://www.cnblogs.com/yangjunfei/p/6405523.html