[Web][RWD]1.基礎設定-手機、平板、電腦尺寸(使用media)

文、意如

使用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>

 

YiruAtStudio - 關於我 - 意如