CSS3 响应适动态加载 外部style样式文件

来源:互联网 发布:淘宝取现手续费多少 编辑:程序博客网 时间:2024/05/22 04:40
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>CSS3 响应适动态加载 外部style样式文件</title>

<!--屏幕宽度大于760px时 使用样式1-->
<link rel="stylesheet" type="text/css" media="(min-width:760px)" href="../css/style1.css"/>

<!--屏幕宽度小于760px时 使用样式2-->
<link rel="stylesheet" type="text/css" media="(max-width:640px)" href="../css/style2.css"/>

<!--屏幕宽度小于760px 并且 大于640px时 使用样式3-->
<link rel="stylesheet" type="text/css" media="(max-width:760px) and (min-width:640px)" href="../css/style3.css"/>

<!--宽度可根据需求调整,当media条件满足时则使,否则反之!-->

</head>

<body>
<h1>CSS3动态加载,外部style样式文件, 响应适, 自适应</h1>
</body>

</html>