Skeleton CSS是一個(gè)輕量級(jí)的CSS框架，它提供了一組基本的CSS規(guī)則，幫助開(kāi)發(fā)人員快速構(gòu)建簡(jiǎn)單的網(wǎng)頁(yè)和應(yīng)用程序。Skeleton CSS的主要目標(biāo)是為移動(dòng)設(shè)備和響應(yīng)式設(shè)計(jì)提供最佳支持，并在功能方面保持最小化。這個(gè)框架非常適合那些需要開(kāi)始快速開(kāi)發(fā)的開(kāi)發(fā)人員，或者那些想要開(kāi)始學(xué)習(xí)響應(yīng)式設(shè)計(jì)的開(kāi)發(fā)人員。

/* Skeleton CSS的基本CSS規(guī)則 */
/* 1.規(guī)范化CSS */
/* 常見(jiàn)的CSS重置 */
/* 讓所有瀏覽器的默認(rèn)CSS規(guī)則都相同 */
@import "normalize.css";
/* 2.默認(rèn)的桌面布局 */
/* 12列網(wǎng)格式布局 */
/* max-width:960px將其限制在視口大小下 */
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
/* 3.基本的Typography */
/* 1rem = 16px,根據(jù)需求調(diào)整字體大小 */
h1 {
font-size: 4rem;
line-height: 1.2;
}
p {
font-size: 1.5rem;
line-height: 1.5;
}
/* 4.鏈接和按鈕 */
/* 子元素顏色繼承from父元素 */
/* no-underline規(guī)則是為了消除鏈接下劃線 */
a,
button,
input,
[type="submit"],
[type="button"] {
color: inherit;
font-size: 100%;
margin: 0;
text-decoration: none;
background-color: transparent;
border: none;
cursor: pointer;
}
a.no-underline {
text-decoration: none;
}
/* 5.響應(yīng)式設(shè)計(jì) */
/* 直接設(shè)置max-width:100%會(huì)讓圖片自適應(yīng)其容器大小 */
/* 響應(yīng)式設(shè)計(jì)是通過(guò)媒體查詢實(shí)現(xiàn)的 */
img {
max-width: 100%;
height: auto;
}
@media (min-width: 600px) {
.container {
padding: 0 40px;
}
}

總的來(lái)說(shuō)，Skeleton CSS是一套非常簡(jiǎn)單的CSS框架，適合為移動(dòng)設(shè)備和響應(yīng)式設(shè)計(jì)構(gòu)建網(wǎng)站和應(yīng)用程序。它提供了一個(gè)簡(jiǎn)單的起點(diǎn)，使您可以快速開(kāi)始構(gòu)建自己的規(guī)則庫(kù)。如果您正在尋找一個(gè)基于響應(yīng)式設(shè)計(jì)的CSS框架，那么Skeleton CSS是一個(gè)非常不錯(cuò)的選擇。