html判断使用不同css
时间: 2023-08-14 10:04:56 浏览: 41
可以使用JavaScript来判断并使用不同的CSS样式。
首先,在HTML文档中引入两个CSS文件,一个是针对PC端的样式,一个是针对移动端的样式。然后,在JavaScript中判断设备类型并动态地加载对应的CSS文件。例如:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pc-style.css" id="pc-style">
<link rel="stylesheet" href="mobile-style.css" id="mobile-style">
<script>
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
// 如果是移动设备,则加载移动端CSS文件
document.getElementById('pc-style').disabled = true; // 禁用PC端CSS文件
document.getElementById('mobile-style').disabled = false; // 启用移动端CSS文件
} else {
// 如果是PC端,则加载PC端CSS文件
document.getElementById('pc-style').disabled = false; // 启用PC端CSS文件
document.getElementById('mobile-style').disabled = true; // 禁用移动端CSS文件
}
</script>
</head>
<body>
<!-- HTML内容 -->
</body>
</html>
```
在这个例子中,我们使用了`navigator.userAgent`来判断设备类型,如果是移动设备则禁用PC端CSS文件并启用移动端CSS文件,否则启用PC端CSS文件并禁用移动端CSS文件。这样就可以根据设备类型加载不同的CSS样式了。