页面区分终端加载不同的CSS

最新推荐文章于 2022-12-16 10:19:23 发布

饶艳辉

最新推荐文章于 2022-12-16 10:19:23 发布

阅读量483

点赞数

分类专栏：前端技术栈文章标签：前端页面区分不同终端加载对应CSS

本文链接：https://blog.csdn.net/raoyanhui_java/article/details/108038648

版权

前端技术栈专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们开发前端项目有时候需要根据不同的终端适配不同的样式。例如公司网站在PC端和移动端显示样式基本需要搞两套。

那么怎么尽量少改动前端代码的情况下满足此类需求呢？这里我说一下之前我在某公司的处理经验，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="referrer" content="no-referrer"/>
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="${staticUrl}/style/v5/main.css?v=${version}" rel="stylesheet">
<link href="${staticUrl}/style/v5/city.css?v=${version}" rel="stylesheet">
</head>
<script>
	if((navigator.userAgent.match(/(iPad|iPhone|iPod|Android|ios)/i))){
		document.write("<link href='${staticUrl}/style/v5/sm.css' rel='stylesheet'>");
		document.write("<link href='${staticUrl}/style/v5/main-m.css' rel='stylesheet'>");
		document.write("<link href='${staticUrl}/style/v5/city-m.css' rel='stylesheet'>");
	}
</script>

<body>
   <!-- 页面主体内容，这里省略 -->
</body>
</html>

其实处理上面很简单，只需要在引入CSS部分加入一段JS就可以区分开对应的终端加载对应的CSS文件。除需要定义不同CSS文件，其它改动都基本很小！

以上代码仅供参考，如有不当之处，欢迎指出！！！

更多干货，欢迎大家关注和联系我。期待和大家一起更好的交流、探讨技术！！！

饶艳辉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面区分终端加载不同的CSS

我们开发前端项目有时候需要根据不同的终端适配不同的样式。例如公司网站在PC端和移动端显示样式基本需要搞两套。那么怎么尽量少改动前端代码的情况下满足此类需求呢？这里我说一下之前我在某公司的处理经验，如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/
复制链接

扫一扫

专栏目录