CSS3 左手準則是一種設計和實現網頁時應該遵循的基本指南。它包括以下幾個方面:
/* 給元素設置通用的 box-sizing,防止 padding 和 border 影響元素的尺寸 */ * { box-sizing: border-box; } /* 避免在頁面中使用固定尺寸,而是使用相對尺寸,以便適應不同的屏幕和設備 */ body { font-size: 16px; max-width: 100%; /* 防止頁面寬度超過瀏覽器窗口 */ min-width: 320px; /* 設置頁面最小寬度,保證在小屏幕設備上可以正常瀏覽 */ } /* 使用流式布局,讓頁面元素自動適應瀏覽器窗口的大小 */ .container { width: 100%; /* 讓容器寬度自動適應瀏覽器窗口 */ margin: 0 auto; /* 居中定位容器 */ } /* 使用相對單位和 em/rem 等可縮放單位來設置元素的尺寸和間距 */ h1 { font-size: 2em; /* 相對于其父元素的字體大小進行計算 */ margin-bottom: 1rem; /* 相對于自己的字體大小進行計算 */ } /* 考慮文本對比度和可讀性,選擇適合的配色方案 */ body { color: #333; background-color: #f5f5f5; } /* 盡可能地使用 CSS3 特性來實現設計效果,而不是依賴圖片和 JavaScript */ .box { border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: all 0.3s ease-out; /* 使用 CSS3 過渡效果,而不是使用 JavaScript 實現動畫 */ } /* 考慮跨瀏覽器兼容性,適時使用 CSS hack 和前綴 */ .box { -webkit-border-radius: 5px; /* 適用于 Safari 和 Chrome */ -moz-border-radius: 5px; /* 適用于 Firefox */ border-radius: 5px; /* 適用于大多數現代瀏覽器 */ }
遵循 CSS3 左手準則能夠讓我們的網頁更具備靈活性、可讀性和可維護性,同時提高用戶體驗和網站的訪問速度。