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

2024-11-02 07:35:47
有2个网友回答
网友(1):

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

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

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

网友(2):

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

html:

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是当前屏幕分辨率的高度