文、意如
使用media 依照螢幕不同尺寸跑不同的CSS檔案
電腦版設定粉色背景，平板尺寸綠色背景，手機尺寸藍色背景
步驟一:
建立三個不同尺寸要套用的CSS檔
電腦版尺寸用:pc.css
平板尺寸用:table.css
手機尺寸用:phone.css
先設定這三種尺寸的背景顏色
電腦版尺寸用:pc.css
body{
background-color:pink;
}平板尺寸用:table.css
body{
background-color:green;
}手機尺寸用:phone.css
body{
background-color:blue;
}步驟二:
建立一張首頁:檔名為index.html
<html>
<head>
<title>RWD</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pc.css" media="screen">
<link rel="stylesheet" type="text/css" href="table.css" media="screen and (min-width:600px) and (max-width:979px)">
<link rel="stylesheet" type="text/css" href="phone.css" media="screen and (max-width:599px)">
</head>
<body>
</body>
</html>檔案名稱:
完成檔:
手機
平板:
電腦:
將所有CSS寫在同一頁的方式
<html>
<head>
<title></title>
<style>
/**電腦**/
@media only screen and (min-width: 769px) {
h1{
color:#03F;
text-align:center;
}
}
/**平板**/
@media only screen and (min-width: 491px) and (max-width: 768px) {
h1{
color: green;
text-align:center;
}
}
/**手機**/
@media only screen and (min-width: 0px) and (max-width: 490px){
h1{
color:yellow;
text-align:center;
}
}
</style>
</head>
<body>
<h1>Header</h1>
<h1>Footer</h1>
</body>
</html>
Yiru@Studio - 關於我 - 意如