響應(yīng)式網(wǎng)站設(shè)計是一種網(wǎng)絡(luò)頁面設(shè)計布局,其理念是:集中創(chuàng)建頁面的圖片排版大小,可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進行相對應(yīng)的布局。頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應(yīng)的響應(yīng)和調(diào)整。具體的實踐方式由多方面組成,包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等,以適應(yīng)不同設(shè)備;換句話說,頁面應(yīng)該有能力去自動響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端--而不是為每個終端做一個特定的版本。這樣,我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計和開發(fā)了。
在iPhone X上的網(wǎng)頁呈現(xiàn)
橫屏
在橫屏模式下,iPhone X呈現(xiàn)的是帶有白色一個合適的背景條紋的網(wǎng)頁。盡管很多部分都有不同的顏色背景,蘋果自己的官網(wǎng)也是由這些白色的線條呈現(xiàn)。能讓你的頁面更有特色的唯一方法是給你的手機網(wǎng)頁設(shè)置顏色——一個確保大多數(shù)情況下與你的品牌/網(wǎng)站的顏色方案一致的顏色。
豎屏
當(dāng)手機在豎屏?xí)r(這也是人們最常用的方式),當(dāng)視窗貫穿所有的邊緣時,兩邊都沒有白色線條。在豎屏模式下,iPhone X會在其周圍滲透至整個屏幕。它是浸入式的,這樣,視窗可以無縫地貫穿四邊的圓角。此外,狀態(tài)和URL /導(dǎo)航條會占用網(wǎng)頁的自定義背景顏色。
我們知道,我們通過媒體查詢(Media Query)的方式改變網(wǎng)頁的布局,我們在哪些寬度下改變布局,也就是我們所稱作的斷點,我們更習(xí)慣的思維是針對某些設(shè)備(比如桌面、平板電腦、手機)的 數(shù)據(jù)來設(shè)置斷點,比如 1024 對應(yīng)桌面、768對應(yīng)pad、480 對應(yīng)手機,但實際上,這些東西是靠不住的,因為這些屏幕尺寸會根據(jù)時代的發(fā)展不斷的變化,我們的響應(yīng)不應(yīng)該只針對某些設(shè)備,我們需要的是一個區(qū)間值,而不 是將某一分辨率對應(yīng)一種設(shè)備。斷點肯定是需要有的,那這些斷點是如何設(shè)置的呢?怎么才能不是為了斷點而斷點呢?實際上,這些斷點的設(shè)置都是根據(jù)內(nèi)容的需要 做的,當(dāng)我們的內(nèi)容在達到一個臨界點后,視覺效果不符合人們的審美或影響了內(nèi)容獲取時,這就是我們需要的斷點。但是我們可能無法在視覺設(shè)計的階段就能覆蓋 其尺寸區(qū)間內(nèi)容所有狀況,這樣我們就需要把它和現(xiàn)有的設(shè)備相結(jié)合確立斷點。
丨夸米科技丨
咨詢直線:186-2370-8562 官方網(wǎng)站:www.iraundi.cn