如何根据不同的屏幕大小引入不同的css文件

2024-03-20 分类：网站建设

大家好我是在成都做网站开发的一名网站开发工程师

最近在进行网站开发时发现遇到了一个问题。如何根据屏幕大小来引入不同的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>

//给link标签定义一个id

</head>

//定义一个函数

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文件的方法希望对各位小伙伴有所帮助。

如果大家对有什么技术方面的问题，可以关注成都尚武科技官方公众号“创新互联π”，其中会有大量关于”互联网+”的相关的内容供大家互相学习了解，同时欢迎大家一起讨论技术问题。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容