【前端面試】HTML5+CSS3初級面試3
1、寫出media type的幾種使用方法。
1)方法一 :
<link href="style.css" media="screen print" ...
2)方法二:
<?xml-stylesheet media="screen" href="style.css"...
3)方法三:
@import url("style.css") screen;
4)方法四:
<style media="screen">
@import url("style.css");
</style>
5)方法五:當然,這幾種方法各有利弊,而我們常用的是第一種和最後一種方法。 下面說明一下media type的瀏覽器支援 :@media screen{ selector{rules} }
- IE5.5/6/7不支援在@import中使用媒體型別 。
- Safari/firefox只支援all,screen,print三種類型(包括iphone) 。
- Opera 完全支援 。
- Opera mini 支援handheld,未指定則使用screen 。
- Windows Mobile系統中的IE支援handheld。
1)Gumby Framework
Gumby 2是建立在Sass基礎上的。Sass是一款非常強大的CSS 前處理器,允許使用者自主快速的開發擴充套件Gumby,同時提供很多新的工具來自定義和擴充套件Gumby框架。Gumby
2是一個非常棒的響應式CSS框架。
2)Get UI Kit
Get UI Kit是一款輕量級、模組化的前端框架,用於開發快四且強大的Web介面。
3)Foundation
Foundation是一個易用、強大而且靈活的框架,用於構建基於任何裝置上的Web應用。提供多種Web上的UI 元件,如表單、按鈕、 標籤等。
4)Semantic
UI是Web的靈魂!Semantic是為攻城師而製作的可複用的開源前端框架。提供各種UI元件,使得開發更加直觀、易於理解。
5)52Framework
52 Framework主要用於優化HTML5和CSS3的跨瀏覽器相容性的框架,可在所有主流瀏覽器上執行。
6)PureCSS
Pure是一組小的、響應式CSS模組,可用於任意Web專案中。它可作為每個網站或Web應用的起步工具,幫助開發者處理應用程式所需的所有CSS工作,同時不會讓每個應用千篇一律。
7)Responsablecss
Responsable使用最少的Sass,帶給你最完美的響應式框架。
8)TukTuk
TukTuk支援程式碼重用功能,提供更加快速、高效的樣式列表,易於新增與維護。
9)Kube
Kube是全球最為流行、最靈活的CSS框架之一。其帶給你最強大的功能選擇,極具創意性與美觀性。
10)Ivory
Ivory是一款強大、靈活、易用的響應式框架。 Ivory基於12列的響應式網格佈局,包含表格,按鈕,表格,分頁,撥動開關,工具提示,手風琴,選項卡等網站中常用的元件和樣式。
一般情況下主要考慮相容性問題的瀏覽器是:IE6、IE7、IE8、Firefox5+、Safari、Chrome等瀏覽器。 8、網頁製作中會用到的圖片格式。 常用的圖片格式包括:PNG、JPG、gif、svg等。 在移動端流行的同時,我們在製作網頁的時候,要考慮到圖片的大小會影響流量和載入速度,所以採用壓縮式的圖片會更好,目前我知道的有兩種格式,一種是Webp,另一種是Apng。 WebP格式,谷歌(google)開發的一種旨在加快圖片載入速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3,並能節省大量的伺服器頻寬資源和資料空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。但WebP是一種有失真壓縮。相較編碼JPEG檔案,編碼同樣質量的WebP檔案需要佔用更多的計算資源。 擴充套件:Sprite圖片二次優化 由於目前國內很多網際網路公司沒有頁面重構師這一職位,所以頁面切圖和靜態程式碼實現基本都是前端工程師去完成。為提高頁面效能目前普遍採用的實現方式是將與頁面結構相關的需要用到圖片的視覺元素集中在一個PNG圖片上,然後通過CSS樣式將其應用到頁面中,我們稱這個圖片為Sprite圖片。由於這個圖片上經常要集中較多的視覺元素,在用PNG格式儲存時難免會產生失真而影響圖片質量。這個時候就需要視覺設計師幫助前端開發工程師對Sprite圖片進行優化,這樣做的好處是不僅能提升圖片質量,還能達到減小檔案大小的效果,可謂一舉兩得。
9、如何提高前端效能。