如果想在行動裝置的瀏覽器上應用不同的 css， 完成你的responsive desin ，有兩種方法：
方法1：
在 css 檔案中加 @media 標籤，如
@media screen and (min-width:481px)
{
/* 寬度大於481時應用的樣式 */
......
}
@media screen and (max-width:480px)
{
/* 寬度小于于480時應用的樣式 */
......
}
其它共用的css屬性放在外邊。
方法2：
在頁面<head> 部分指定不同的 css。 如：
<head>
<title></title>
<link href="test1.css" rel="stylesheet" type="text/css" />
<link href="mobile.css" rel="stylesheet" media="screen and (max-width:768px)" type="text/css" />
</head>
當瀏覽器寬度小於768px時會使用mobile.css ，不然就用前一個。
經實驗，下面這種說法是錯誤的，都會載入。
兩種方法最主要的區別在於：後一種的效能要好，在 mobile.css 中的資源在不滿足條件是不會載入，而前一種在兩種情況下均會載入。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
