Question

如何根据分辨率调用不同的css文件

Answer 1

css具有媒体响应功能，可以判断屏幕宽度，从而加载设置的css

如下代码，当宽度小于1000px的时候加载css下的css-mobile.css

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

 如下代码，当宽度大于1000px的时候加载css下的css-pc.css

<link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)">

Answer 2

可以判断当前屏幕分辨率，然后再给予对应的css文件路径，如：

html：

<link rel="stylesheet" type="text/css" id="css">

js：

window.onload = function(){
    if((screen.width == 1024) && (screen.height == 768)){
        document.getElementById('css').href = '1.css';
    }else if ((screen.width == 800) && (screen.height == 600)){
        document.getElementById('css').href = '2.css' ;
    }else{
        document.getElementById('css').href = '3.css';
    }
}

screen.width是当前屏幕分辨率的宽度，screen.height是当前屏幕分辨率的高度