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

Posted 2023-04-02

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)"> 参考技术A

可以判断当前屏幕分辨率，然后再给予对应的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是当前屏幕分辨率的高度

js根据不同浏览器(分辨率)调用不同css

根据不同浏览器：

<script type="text/javascript">

var version = navigator.userAgent;

if (version.indexOf("MSIE") > 1) {

document.write("<link href=‘ie.css‘ rel=‘stylesheet‘ type=‘text\/css‘\/>");

} else if (version.indexOf("Chrome") > 1) {

document.write("<link href=‘chrome.css‘ rel=‘stylesheet‘ type=‘text\/css‘\/>");

} else if (version.indexOf("Firefox") > 1) {

document.write("<link href=‘ff.css‘ rel=‘stylesheet‘ type=‘text\/css‘\/>");

}

</script>

根据不同分辨率：

<script type="text/javascript">

if (screen.width == 1024){

document.write("<link href=‘css/css1.css‘ rel=‘stylesheet‘ type=‘text\/css‘\/>");

}else {

document.write("<link href=‘css/css2.css‘ rel=‘stylesheet‘ type=‘text\/css‘\/>");}

</script>