您好!歡迎進入廣東華商網(wǎng)絡(luò)科技有限公司
——關(guān)于響應(yīng)式
在移動互聯(lián)網(wǎng)的大時代iOS 和 Android的發(fā)布,智能手機、平板電腦、智能家電等新設(shè)備層出不窮,極大便利了我們的生活,但面對形形色色的終端設(shè)備,千差萬別的屏幕分辨率,給網(wǎng)
頁設(shè) 計帶來了新的挑戰(zhàn),我們無法估計用戶的終端設(shè)備和網(wǎng)絡(luò)狀況,更不可能為每種設(shè)備都專門設(shè)計一套網(wǎng)站,如何實現(xiàn)網(wǎng)頁在多終端設(shè)備中的適配呢?
響應(yīng)式,火火火火起來了!
2010 年 Ethan Marcotte 曾經(jīng)在 A List Apart 發(fā)表過一篇文章"Responsive Web Design",響應(yīng)式網(wǎng)頁設(shè)計提供了一種設(shè)計方法,可以使同一網(wǎng)站在智能手機、桌面電腦,以及介于這
兩者 之間的任意設(shè)備上完美顯示。這種方法能夠根據(jù)用戶的屏幕尺寸,合理地為現(xiàn)有及將來的各種設(shè)備提最佳的瀏覽體驗。
Ethan Marcotte稱響應(yīng)式設(shè)計是基于網(wǎng)格建立一個網(wǎng)站。Marcotte定義這項技術(shù)后,網(wǎng)格引入網(wǎng)頁設(shè)計,出現(xiàn)了很多CSS網(wǎng)格框架,幾乎成了網(wǎng)頁設(shè)計的標(biāo)準(zhǔn)。目的是讓網(wǎng)頁布局更合理,
信息 呈現(xiàn)更加美觀易讀,風(fēng)格工整簡潔,對前端開發(fā)來說,更加靈活與規(guī)范,在網(wǎng)頁設(shè)計中的定義可以理解為以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布,這樣做的好處
是給 予一種規(guī)范,令排版者可以較為方便的組織標(biāo)題、列表、段落、圖片等元素,保持版面元素之間的一致性。對“流體式”的響應(yīng)式網(wǎng)站更是一個重要的設(shè)計規(guī)范。
——我對柵格的理解
以前有很長一段時間,我一直搞不明白到底什么是柵格,首先我們必須要對柵格系統(tǒng)有一個基本的認(rèn)知,關(guān)于柵格,柵格是由網(wǎng)格演變而來的另一種說法,都是一個意思——格子,所以
柵格 也沒有多高深復(fù)雜,就是和小時候的作業(yè)本,方格本一樣。作用之一也是異曲同工
——規(guī)范。將柵格視為一種秩序系統(tǒng)來進行使用,是網(wǎng)頁設(shè)計師某種特定的精神和態(tài)度的表達(dá),應(yīng)為它體現(xiàn)設(shè)計師是以一種結(jié)構(gòu)、邏輯的方式來進行構(gòu)思和設(shè)計的。
——巧妙利用柵格化
在網(wǎng)頁設(shè)計中,如果把網(wǎng)頁寬度平均切分為多個網(wǎng)格單元,每個單元之間預(yù)留一定的空隙,此時整個頁面就如同一個柵格系統(tǒng)。標(biāo)準(zhǔn)的柵格系統(tǒng)中所包含的幾個部分,分別是總寬w、列寬
c、 槽寬g、外邊距m幾個部分。這樣總寬的公式如下:
槽寬g=2*m
總寬w=2m+N*c+(N-1)*g
總寬w=g+N*c+(N-1)*g
總寬w=N*c+N*g
總寬w=N*(c+g)
經(jīng)過對響應(yīng)式網(wǎng)站的了解和柵格的運用,對頁面寬度選擇,柵格列數(shù)間距的調(diào)整,進行初步內(nèi)容規(guī)劃排版,再按照實際情況對最終的稿作調(diào)整。可以大膽的在設(shè)計上嘗試,大間距,文字
大小 的搭配,畫面圖形松緊,利用柵格設(shè)計出對畫面更有節(jié)奏呼吸的排版,巧妙利用柵格,響應(yīng)式網(wǎng)站更合理。
服務(wù)區(qū)域
365*24小時全國統(tǒng)一服務(wù)熱線
0769-22039555
服務(wù)熱線:13827298991(陳先生)/18825771900(黃小姐)
技術(shù)專線:0769-22039111 郵箱:dgce@dgce.com.cn
地址: 南城街道宏一路G1蜂匯1棟寫字樓803、804
華商微信公眾號
華商網(wǎng)絡(luò)專業(yè)為企業(yè)提供基礎(chǔ)互聯(lián)網(wǎng)建設(shè)服務(wù):網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,微官網(wǎng)設(shè)計制作,小程序開發(fā)等等,您的選擇是我們奮力向前的最好動力!
版權(quán)所有:廣東華商網(wǎng)絡(luò)科技有限公司 備案號:粵ICP備13071417號-4
今日已有165人獲取方案