接觸響應式-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]-->