网页根据屏幕宽度请求不同的CSS文件
网页根据屏幕宽度请求不同的CSS文件
前言:重在记录,可能出错。
一、代码
<!DOCTYPE html>
<html lang="ch">
<head>
<title>网页根据屏幕宽度请求不同的CSS文件</title>
<link id="desktop-style" media="only screen and (min-width: 960px)" type="text/css" rel="stylesheet" href="./css/desktop-common.css?version=0.1.4">
<link id="mobile-style" media="only screen and (max-width: 960px)" type="text/css" rel="stylesheet" href="./css/mobile-common.css?version=0.1.4">
</head>
<body>
</body>
</html>
二、解释
media="only screen and (min-width: 960px)"
当屏幕宽度大于960px时请求的CSS文件
media="only screen and (max-width: 960px)"
当屏幕宽度小于960px时请求的CSS文件