網頁根據螢幕寬度請求不同的CSS檔案

戈小戈發表於2024-05-10
網頁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檔案

相關文章