2016-11-06 分類: 響應(yīng)式網(wǎng)站
——關(guān)于呼應(yīng)式
在移動(dòng)互聯(lián)網(wǎng)的大時(shí)代iOS 和 Android的發(fā)布,智能手機(jī)、平板電腦、智能家電等新設(shè)備層出不窮,極大便利了咱們的生活,但面臨五花八門的終端設(shè)備,千差萬(wàn)別的屏幕分辨率,給網(wǎng)
頁(yè)設(shè) 計(jì)帶來(lái)了新的挑戰(zhàn),咱們無(wú)法估計(jì)用戶的終端設(shè)備和網(wǎng)絡(luò)狀況,更不可能為每種設(shè)備都專門規(guī)劃一套網(wǎng)站,怎么完成網(wǎng)頁(yè)在多終端設(shè)備中的適配呢?
呼應(yīng)式,火火火火起來(lái)了!
2010 年 Ethan Marcotte 曾經(jīng)在 A List Apart 發(fā)表過(guò)一篇文章"Responsive Web Design",呼應(yīng)式網(wǎng)頁(yè)規(guī)劃提供了一種規(guī)劃辦法,可以使同一網(wǎng)站在智能手機(jī)、桌面電腦,以及介于這
兩者 之間的恣意設(shè)備上好顯示。這種辦法能夠根據(jù)用戶的屏幕尺度,合理地為現(xiàn)有及將來(lái)的各種設(shè)備的閱讀體驗(yàn)。
Ethan Marcotte稱呼應(yīng)式規(guī)劃是基于網(wǎng)格樹立一個(gè)網(wǎng)站。Marcotte界說(shuō)這項(xiàng)技術(shù)后,網(wǎng)格引進(jìn)網(wǎng)頁(yè)規(guī)劃,出現(xiàn)了許多CSS網(wǎng)格結(jié)構(gòu),幾乎成了網(wǎng)頁(yè)規(guī)劃的標(biāo)準(zhǔn)。目的是讓網(wǎng)頁(yè)布局更合理,
是給 予一種標(biāo)準(zhǔn),令排版者可以較為便利的組織標(biāo)題、列表、段落、圖片等元素,保持版面元素之間的一致性。對(duì)“流體式”的呼應(yīng)式網(wǎng)站更是一個(gè)重要的規(guī)劃標(biāo)準(zhǔn)。
以前有很長(zhǎng)一段時(shí)間,我一向搞不明白究竟什么是柵格,首先咱們有必要要對(duì)柵格體系有一個(gè)根本的認(rèn)知,關(guān)于柵格,柵格是由網(wǎng)格演化而來(lái)的另一種說(shuō)法,都是一個(gè)意思——格子,所以
——標(biāo)準(zhǔn)。將柵格視為一種秩序體系來(lái)進(jìn)行使用,是網(wǎng)頁(yè)規(guī)劃師某種特定的精神和情緒的表達(dá),應(yīng)為它表現(xiàn)規(guī)劃師是以一種結(jié)構(gòu)、邏輯的方法來(lái)進(jìn)行構(gòu)思和規(guī)劃的。
在網(wǎng)頁(yè)規(guī)劃中,如果把網(wǎng)頁(yè)寬度均勻切分為多個(gè)網(wǎng)格單元,每個(gè)單元之間預(yù)留必定的空隙,此刻整個(gè)頁(yè)面就如同一個(gè)柵格體系。標(biāo)準(zhǔn)的柵格體系中所包括的幾個(gè)部分,分別是總寬w、列寬
槽寬g=2*m
總寬w=g+N*c+(N-1)*g
總寬w=N*(c+g)
巨細(xì) 的調(diào)配,畫面圖形松緊,使用柵格規(guī)劃出對(duì)畫面更有節(jié)奏呼吸的排版,奇妙使用柵格,呼應(yīng)式網(wǎng)站更合理。
本文標(biāo)題:響應(yīng)式網(wǎng)站的設(shè)計(jì)技巧
當(dāng)前鏈接:http://jinyejixie.com/news/60688.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容