自适应pc,pad,mobile
<link rel="stylesheet" href="" id="styleCss"/>
<script type="text/javascript">
window.onload = function() {
//获取屏幕宽度函数
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
var styleCss = document.getElementById("styleCss");
//当浏览器窗口被改变大小时会触发 onresize 事件。
window.onresize = reSize;
function reSize() {
//得到屏幕的宽度
var clientWidth = client().width;
//判断屏幕宽度,加载不用的样式
if(clientWidth > 980)
{
styleCss.href = "css/style.css";
}
else if(clientWidth > 640)
{
styleCss.href = "css/pad.css";
}
else
{
styleCss.href = "css/mobile.css";
}
}
}
</script>