現在,響應式Web設計無疑是非常流行的。對于新人,responsive design可能聽起來有點復雜,但實際上,它比你想的要簡單的多。為了幫助你快速入門響應式Web設計,我寫了一篇快速入門教程。我保證你通過三步就可以學會響應式設計的基本邏輯和媒體查詢(media query)(假設你有基本的CSS知識)。
第一步:Meta標簽(看demo)
大部分移動瀏覽器會把HTML頁面縮放成較寬的viewport的寬度,這樣內容就可以屏幕上正確的展示了。你可以使用viewport這個meta標簽來重置這個行為。下面的viewport標簽告訴瀏覽器使用設備寬度(device-width)做為viewport的寬度,并且禁用初始的縮放比例。在<head>中加入這個meta標簽。
IE 8以及更早版本不支持媒體查詢,你可以使用media-queries.js或者respond.js來增加IE對媒體查詢的支持。
新聞熱點
疑難解答