CSS網(wǎng)頁樣式表可以讓我們輕松地控制HTML中的樣式,以使我們的網(wǎng)頁看起來更美觀。在設(shè)計手機(jī)端配置的頁面時,CSS考慮到移動設(shè)備的小屏幕和不同的操作平臺。以下這些CSS屬性可以幫助我們定制化手機(jī)頁面的樣式。
/* 使頁面不可縮放 */ meta { viewport: width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0; } /* 刪除鏈接下劃線 */ a { text-decoration: none; } /* 提供更好的用戶體驗 */ * { -webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */ -webkit-text-size-adjust: none; /* 禁止字體大小自動調(diào)整 */ -webkit-tap-highlight-color: transparent; /* 隱藏鏈接和按鈕的高亮背景 */ } /* 調(diào)整瀏覽器外邊距和內(nèi)邊距為0 */ html, body { margin: 0; padding: 0; } /* 全屏背景 */ html { background: url(../img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
如果我們想要更好地控制設(shè)備特別細(xì)節(jié),我們可以采用CSS3媒體查詢。它可以讓我們根據(jù)屏幕寬度或其他媒體類型,調(diào)整相應(yīng)的CSS樣式。例如:
/* 手機(jī)豎屏 */ @media screen and (max-width: 480px) { body { background-color: #eee; } } /* 手機(jī)橫屏 */ @media screen and (min-width: 481px) and (max-width: 767px) { body { background-color: #ccc; } }
上述媒體查詢代碼會檢測屏幕寬度,然后相應(yīng)地調(diào)整body的背景顏色。它可以幫助我們實現(xiàn)更好的用戶體驗和更好的可讀性。