如何根据不同的屏幕大小引入不同的css文件
大家好我是在石家庄做网站开发的一名网站开发工程师
最近在进行网站开发时发现遇到了一个问题。如何根据屏幕大小来引入不同的css文件
感兴趣的小伙伴可以往下看
首先我们可以给link标签定义一个id 相比很多小伙伴都想不到link标签可以这样吧，其实 刚开始我也没有想到，只是一时茅塞顿开，所以做开发脑洞一定要大，有想法就去尝试，接下来我直接上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link href="style/css/style.css" rel="stylesheet" type="text/css" id="link1" />
<link href="/style/css/lrtk.css" rel="stylesheet" type="text/css" id="link2" />
//给link标签定义一个id
</head>
<body></body>
<script type="text/javascript">
//定义一个函数
var fon = function() {
//判断屏幕大小是大于超过1200
if (document.body.offsetWidth > 1200) {
//如果大于1200的话就获取link标签的id名，然后href=你要引入文件路径
document.getElementById('link1').href = "style/css/style.css";
document.getElementById('link2').href = "style/css/lrtk.css";
} else {
//如果大于1200的话就获取link标签的id名，然后href=你要引入文件路径
document.getElementById('link1').href = "wapstyle/css/index.css";
document.getElementById('link2').href = "wapstyle/css/fen.css";
}
}
//刚进入页面时调用一下函数
fon()
//监听页面大小发生变化时调用函数
window.onresize = function() {
fon()
}
//到这里就完成了，希望可以帮到做开发的各位小伙伴
</script>
</html>
以上就是石家庄尚武科技的网站开发工程师为大家分享的根据不同的屏幕大小引入不同的的css文件的方法希望对各位小伙伴有所帮助。
如果大家对有什么技术方面的问题，可以关注石家庄尚 武科技官方公众号“尚武科技π”，其中会有大量关于”互联网+”的相关的内容供大家互相学习了解，同时欢迎大家一起讨论技术问题。
冀公网安备