一、通过js检测屏幕宽度，更换样式表
1、使用javascript更改页面样式表的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title>javascript更改页面样式表的方法</title> <link id="mylink" rel="stylesheet" href="1.css" type="text/css" /> <script type="text/javascript"> window.onload=function(){ var mybut = document.getElementById("changecss"); var mylink = document.getElementById("mylink"); mybut.onclick=function(){ //在按钮上绑定点击事件，当点击按钮的时候link的href的值改变，即可实现更换样式表（换肤效果也是这样的原理） mylink.href="2.css"; }; }; </script> </head> <body> <input id="changecss" type="button" value="点击我更改样式表" /> </body> </html>
2、javascript得到页面的宽度（document.documentElement.clientWidth;(IE6兼容的写法 )）
<!doctype html> <html> <head> <meta charset="utf-8"> <title>javascript检测浏览器宽度</title> </head> <body> <h1 id="shuchu"></h1> <script type="text/javascript"> window.onresize=function(){ //onresize表示当浏览器页面被改变时（即调整尺寸的时候）触发该事件 document.getElementById("shuchu").innerHTML = document.documentElement.clientWidth; } </script> </body> </html>
3、js检测宽度更换样式表
<!doctype html> <html> <head> <meta charset="utf-8"> <title>javascript检测浏览器宽度</title> <link id="mylink" rel="stylesheet" type="text/css" href="1.css" /> <script type="text/javascript"> //更换样式表，需要在页面加载的时候执行一次 //在浏览器尺寸变化的时候，也要执行 gaibian();//一加载，就执行一次gaibian函数，这样就能保证页面默认情况就显示合理的样式表(否则当屏幕一开始小于600时，一加载页面显示的是默认的样式，要刷新一次才能跟换到合理的样式) window.onresize=gaibian; function gaibian(){ var kuandu = document.documentElement.clientWidth;//获取浏览器的宽度 var mylink = document.getElementById("mylink"); //得到宽度之后就可以通过判断浏览器的宽度来加载哪个样式表了 if(kuandu>600){ mylink.href="1.css" }else{ mylink.href="2.css" } } </script> </head> <body> </body> </html>
二、视口
当我们试图在iPhone中输出屏幕宽度的时候，会发现屏幕宽度是980，居然和pc屏幕宽度差不多大
苹果主导的这些手机厂商，为了使用户获得完整的WEB体验，很多设备都会欺骗浏览器返回一个数值较大的视口，告诉浏览器，别以为我身子小，但是我想以980px宽度显示这个页面（分辨率和视口没有关系（开发中根据视口来算的））
视口对于我们实现响应式是很不方便的。980太大了，不符合我们心中的期待，我们心中认为手机屏幕尺寸应该在320到400之间
解决这个问题只要约束视口即可：
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
一个id和name为 viewport的meta元标记，就表示现在要约束视口了。
那么具体约束的规则写在content中，每个约束规则用逗号隔开：
width=device-width 命令视口的宽度，变为设备的宽（以1024*768屏幕为标准 iPhone等手机通常为320到380之间）
initial-scale=1.0 命令视口默认的缩放等级为1
minimum-scale=1.0 命令视口最小缩放等级为1
maximum-scale=1.0 命令视口最大缩放等级为1
user-scalable=no 不允许用户缩放页面
所有的手机响应式网站，都要加上meta viewport视口约束标记
三、CSS3中媒体查询来更换样式表（没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式。）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>媒体查询</title> <link id="mylink" rel="stylesheet" type="text/css" href="1.css" media="(min-600px)"/> <link id="mylink" rel="stylesheet" type="text/css" href="2.css" media="(max-599px)"/> </head> <body> </body> </html>
查看效果，在没写一句js代码的情况下，也能根据宽度来更换样式表了，这是因为上面代码在link标签中使用了CSS3媒体查询 meadia属性就是媒体查询的属性
min-600px; 表示宽度大于等于600px的时候用这个样式表
max-599px; 表示宽度小于等于599px的时候用这个样式表
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>媒体查询</title> <link id="mylink" rel="stylesheet" type="text/css" href="1.css" media="(min-800px)"/> <link id="mylink" rel="stylesheet" type="text/css" href="2.css" media="(max-799px) and (min-600px)"/> <link id="mylink" rel="stylesheet" type="text/css" href="3.css" media="(max-599px)"/> </head> <body> </body> </html>
max-799px) and (min-600px); 表示宽度小于等于799px到600px大于等于之间使用这个样式表
媒体查询IE9才开始支持的以下的不支持，javascript检测宽度更换样式表，是IE6也兼容的
媒体查询是CSS3中新的特性。还可以用在内嵌式
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>媒体查询</title> <link id="mylink" rel="stylesheet" type="text/css" href="1.css" media="(min-800px)"/> <link id="mylink" rel="stylesheet" type="text/css" href="2.css" media="(max-799px) and (min-600px)"/> <link id="mylink" rel="stylesheet" type="text/css" href="3.css" media="(max-599px)"/> <style type="text/css"> ····/*当页面宽度大于等于800的时候就用该样式修饰div*/ @media(min-800px){ div{ width:200px; height:200px; background:red;} } /*当页面宽度小于等于799的时候就用该样式修饰div*/ @media(max-799px){ div{ width:100px; height:400px; background:blue;} } </style> </head> <body> <div></div> </body> </html>