隨著移動(dòng)設(shè)備的普及,手機(jī)端訪問(wèn)網(wǎng)站逐漸成為了主流,而在手機(jī)端訪問(wèn)網(wǎng)站時(shí),初始化CSS代碼的重要性不言而喻。下面是一個(gè)簡(jiǎn)單的手機(jī)端初始化CSS代碼:
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-size: 62.5%; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.4rem; line-height: 1.5; background-color: #f5f5f5; color: #333; } a { text-decoration: none; color: #333; } img { max-width: 100%; height: auto; }
以上代碼將使得所有元素的margin和padding都為0,并設(shè)置為了border-box盒模型,使得元素的寬度和高度計(jì)算更加直觀。在html和body元素中設(shè)置了默認(rèn)字體大小為10px,方便在設(shè)置rem單位時(shí)計(jì)算。同時(shí),設(shè)置了body元素的背景顏色和文字顏色,使得網(wǎng)站界面更加統(tǒng)一。a元素去掉了下劃線并設(shè)置文字顏色為黑色,使得鏈接更加美觀。img元素設(shè)置了最大寬度為100%和自動(dòng)高度,讓圖片在不改變?cè)斜壤那闆r下自適應(yīng)大小。
當(dāng)然,上述代碼只是最基本的初始化CSS代碼,實(shí)際項(xiàng)目中還會(huì)有更多的細(xì)節(jié)需要考慮,但這份代碼已經(jīng)可以為手機(jī)端網(wǎng)站提供一個(gè)良好的基礎(chǔ)。