CSS3技術可以很好的幫助我們在移動設備上進行網頁的適應,下面我們就來看一下具體的實現方法。
/* 首先我們需要編寫針對移動設備的CSS樣式 */ @media screen and (max-width: 480px) { /* 在這里寫上移動設備的樣式 */ } /* 接著,我們應該讓我們的網頁布局變得更精簡,更容易閱讀 */ body { font-size: 1.2em; /* 這樣字體大小就可以自動適應屏幕了 */ line-height: 1.5; /* 行間距也需要適應屏幕 */ margin: 0; /* 去掉默認的外邊距 */ padding: 0; /* 去掉默認的內邊距 */ } /* 然后,我們需要使用一些CSS3技術來優化我們的網頁 */ header { border-radius: 10px; /* 圓角 */ box-shadow: 0 2px 6px rgba(0,0,0,0.6); /* 陰影 */ } nav { background: rgb(52,116,134); /* 漸變背景色 */ background: linear-gradient(0deg, rgba(52,116,134,1) 0%, rgba(84,175,196,1) 100%); } a { color: #555; /* 顏色變淺 */ text-decoration: none; /* 去掉下劃線 */ transition: all 0.3s ease-in-out; /* 添加動畫效果 */ } /* 最后,我們需要讓我們的網頁在不同的移動設備上都呈現出良好的效果 */
通過以上CSS3技巧,我們可以很好的實現對移動設備的適應,以及優化我們的網頁效果。
上一篇css3 擴散
下一篇css3 打印增加頁碼