在移動端開發(fā)中,CSS樣式是必不可少的一個部分。而為了方便和提高開發(fā)效率,我們可以使用一個基礎的手機端CSS代碼模板,用于快速搭建移動端頁面。
下面是一個基礎的CSS代碼模板:
/* 基礎設置 */ body { margin: 0; padding: 0; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; line-height: 1.5; } /* 移動端特有設置 */ @media screen and (max-width: 480px) { /* 消除鏈接高亮效果 */ a { -webkit-tap-highlight-color: rgba(0,0,0,0); } /* 固定寬度,避免手機端頁面出現(xiàn)滑動條 */ img { max-width: 100%; } /* 禁止用戶縮放頁面 */ meta[name="viewport"] { user-scalable: no; } /* 移動端按鈕樣式 */ button { display: block; width: 100%; padding: 10px; margin: 10px 0; border: none; background-color: #333; color: #fff; border-radius: 3px; text-align: center; font-size: 16px; line-height: 1.5; } }
代碼中包含了兩部分內(nèi)容。第一部分是基礎設置,主要是一些通用的樣式。如去掉頁面的margin和padding,設置默認字號和字體等。這些設置可以避免后面的CSS樣式出現(xiàn)意外的問題。
第二部分是移動端特有設置,主要是針對移動端的一些CSS樣式設置。其中用到了@media查詢和一些特定元素的樣式。為了適應不同的屏幕尺寸,使用@media查詢來設定移動端的樣式,如禁止用戶縮放頁面、消除鏈接高亮效果等。
最后,這個移動端CSS代碼模板還包含了一個移動端按鈕樣式,方便按鈕的快速開發(fā)。