一、什么是響應(yīng)式網(wǎng)站:
現(xiàn)在,隨著智能手機(jī)手機(jī)的普及,站長(zhǎng)們發(fā)現(xiàn),從手機(jī)上來(lái)的流量一點(diǎn)不比在PC上來(lái)的少,所以,作為一種能夠自動(dòng)適應(yīng)不同屏幕尺寸的網(wǎng)頁(yè)設(shè)計(jì)辦法,響應(yīng)式設(shè)計(jì)(Responsive Design)正日益成為*受推崇的移動(dòng)網(wǎng)頁(yè)優(yōu)化方式。今天北斗網(wǎng)絡(luò)就跟大家分享一下設(shè)計(jì)響應(yīng)式網(wǎng)站的哪些些事?希望對(duì)大家有所幫助。 網(wǎng)站響應(yīng)式設(shè)計(jì)的原理就是在CSS中,有一個(gè)不常用到的屬性media。為了達(dá)到響應(yīng)式設(shè)計(jì)的目的,讓css根據(jù)屏幕寬度(例如 media screen only @(max-width:480px)),使用不同的CSS代碼,從而達(dá)到自動(dòng)調(diào)整頁(yè)面DIV寬度的目的。當(dāng)然,除了CSS,還可以使用JS對(duì)頁(yè)面內(nèi)容進(jìn)行動(dòng)態(tài)的調(diào)整,不過(guò)這個(gè)技術(shù)不是很流行。在網(wǎng)站開(kāi)發(fā)過(guò)程中根據(jù)用戶(hù)行為以及設(shè)備環(huán)境進(jìn)行相應(yīng)的操作和布局,使網(wǎng)站可針對(duì)不同平臺(tái)、尺寸和定向進(jìn)行智能化調(diào)整,實(shí)現(xiàn)了在智能手機(jī)和平板電腦等多種智能移動(dòng)終端瀏覽效果的流暢,防止頁(yè)面變形,并可在任一瀏覽終端進(jìn)行網(wǎng)站數(shù)據(jù)的同步更新。
二、為什么要采用響應(yīng)式設(shè)計(jì)開(kāi)發(fā)網(wǎng)站:
如果你還對(duì)網(wǎng)站是否需要實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)存在質(zhì)疑的話(huà),相信下面的9點(diǎn)會(huì)讓您會(huì)更加認(rèn)可網(wǎng)站實(shí)現(xiàn)響應(yīng)式布局的必要性。
1、86%的用戶(hù)認(rèn)為企業(yè)的手機(jī)網(wǎng)站也應(yīng)該好看。
2、智能手機(jī)用戶(hù)的數(shù)量在2014年已經(jīng)超過(guò)PC端的用戶(hù)數(shù)量。
3、73%的用戶(hù)會(huì)同時(shí)使用多種設(shè)備(或者他們有智能手機(jī))。
4、49%的用戶(hù)稱(chēng):如果企業(yè)的手機(jī)網(wǎng)站做的不夠好,往往會(huì)給人不重視用戶(hù)體驗(yàn)的錯(cuò)覺(jué)。
5、74%的智能手機(jī)擁有者之用手機(jī)上網(wǎng)。
6、49%的手機(jī)用戶(hù)認(rèn)為企業(yè)的移動(dòng)網(wǎng)站還有改進(jìn)的空間。
7、據(jù)統(tǒng)計(jì)目前有17%的網(wǎng)絡(luò)流量都來(lái)自于手機(jī)。
8、68%的網(wǎng)民表示,更喜歡用手機(jī)在那些用戶(hù)友好度高的電商網(wǎng)站平臺(tái)上進(jìn)行購(gòu)物。
9、67%的移動(dòng)設(shè)備用戶(hù)反應(yīng)移動(dòng)網(wǎng)站的加載速度有待提高,響應(yīng)式設(shè)計(jì)的普及迫在眉睫!
總結(jié):隨著越來(lái)越多的智能移動(dòng)設(shè)備( 手機(jī),平板 )加入到互聯(lián)網(wǎng)中來(lái),互聯(lián)網(wǎng)上的訪問(wèn)設(shè)備是爆炸性的增長(zhǎng)(屏幕的分辨率也是爆炸性的增長(zhǎng))。為了給手機(jī)和平板設(shè)備提供更好的體驗(yàn),必須在網(wǎng)站設(shè)計(jì)中使用響應(yīng)式網(wǎng)站設(shè)計(jì),并且整合從PC端到手機(jī)的各種屏幕尺寸和分辨率,用技術(shù)來(lái)使網(wǎng)頁(yè)適應(yīng)不同分辨率的屏幕。
三、設(shè)計(jì)響應(yīng)式網(wǎng)站的難點(diǎn)有哪些?
1、響應(yīng)式網(wǎng)站設(shè)計(jì)難
因?yàn)椴荒苁褂媒^對(duì)定位,那么在設(shè)計(jì)的時(shí)候需要考慮可讀性以及區(qū)域面積以及在不同的設(shè)備下的行為。這對(duì)一般的設(shè)計(jì)師來(lái)說(shuō)簡(jiǎn)直是一場(chǎng)災(zāi)難。所以很少有出眾的響應(yīng)式網(wǎng)站出現(xiàn)。
2、響應(yīng)式網(wǎng)站實(shí)現(xiàn)更難
響應(yīng)式設(shè)計(jì)出的稿子,當(dāng)然還需要響應(yīng)式的實(shí)現(xiàn)。響應(yīng)式的基礎(chǔ)就是HTML5, CSS3。一般的建站公司,一般是沒(méi)有錢(qián)去聘用精通HTML5和CSS3技術(shù)的高手的。*多是讓程序員在寫(xiě)代碼之前看2天書(shū),然后就趕鴨子上架。這就導(dǎo)致了即使設(shè)計(jì)師設(shè)計(jì)出了很棒的模板,但是在實(shí)現(xiàn)了之后,怎么看怎么不舒服。
3、屏幕尺寸多,很難做到一次編碼,到處運(yùn)行
目前,主流的大家用來(lái)訪問(wèn)網(wǎng)頁(yè)的設(shè)備有:計(jì)算機(jī)(廢話(huà)),iPad,Android Pad(例如小米的),智能手機(jī)。那么做一個(gè)網(wǎng)站,必須到這些設(shè)備上去測(cè)試和運(yùn)行。普通的網(wǎng)站作坊很少有人會(huì)愿意花這么多的精力去測(cè)試一個(gè)網(wǎng)站。
4、響應(yīng)式網(wǎng)站成本大
因?yàn)轫憫?yīng)式設(shè)計(jì)需要對(duì)多個(gè)界面兼容、功能調(diào)試,導(dǎo)致整個(gè)制作過(guò)程需要UI設(shè)計(jì)師和前端工程師要不斷磨合制作。
總之,響應(yīng)式網(wǎng)站設(shè)計(jì),為計(jì)算機(jī)、手機(jī)、平板電腦等不同設(shè)備的訪問(wèn)用戶(hù)了提供更加舒適的界面和更好的用戶(hù)體驗(yàn)(和速度),而且隨著目前移動(dòng)設(shè)備的增長(zhǎng),已成為大勢(shì)所趨。
四、響應(yīng)式網(wǎng)站的缺點(diǎn)有哪些?
1:對(duì) IE 老板兼容性不友好
對(duì)于老版本 IE(IE6、IE7、IE8)支持不好,這是一個(gè)致命的問(wèn)題,如果你的網(wǎng)站用戶(hù)大多還采用老版本 IE 的話(huà),建議不做響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。
2:靈活性有所欠缺
基于不同終端的設(shè)備屬性不同,對(duì)產(chǎn)品用戶(hù)體驗(yàn)要求就會(huì)截然不同。內(nèi)容比較多帶有功能性的網(wǎng)站不適合做響應(yīng)式網(wǎng)站設(shè)計(jì),如:電商類(lèi)型網(wǎng)站,寬屏的 pc 端內(nèi)容如果全部要在手機(jī)端進(jìn)行展示,勢(shì)必導(dǎo)致手機(jī)端的界面非常長(zhǎng),需要根據(jù)手機(jī)端屬性進(jìn)行重新信息,框架設(shè)計(jì),這樣對(duì)響應(yīng)網(wǎng)站要求非常高,實(shí)現(xiàn)難度與成本非常高。但是大型網(wǎng)站為了提高用戶(hù)體驗(yàn),通常做法,把高分辨率寬屏網(wǎng)站*小的響應(yīng)尺寸響應(yīng)到 1024px,不再適配手機(jī)端,手機(jī)端重新設(shè)計(jì)開(kāi)發(fā)一套手機(jī)網(wǎng)站,簡(jiǎn)單理解為 2.5 響應(yīng),如:電商網(wǎng)站亞馬遜、Calvin Klein、Nike、視頻網(wǎng)站 Youtube,等。
3:速度可能會(huì)變慢
由于響應(yīng)式頁(yè)面是同時(shí)下載多套 CSS 樣式代碼,可能在手機(jī)上就下載 PC、Pad 的冗余代碼,導(dǎo)致文件變大,影響加載速度。不過(guò) CSS 樣式的代碼占用內(nèi)存相對(duì)圖片來(lái)說(shuō)不算大,所以如果前端編程處理得好前提之下,這就不會(huì)影響網(wǎng)站加載速度。根據(jù)響應(yīng)式網(wǎng)站的優(yōu)缺點(diǎn),我們不難看出:企業(yè)官網(wǎng)、單頁(yè)宣傳網(wǎng)站非常適合做響應(yīng)式網(wǎng)站設(shè)計(jì),由于它們的界面內(nèi)容比較少,結(jié)構(gòu)比較簡(jiǎn)單,所以在不同終端、不同尺寸設(shè)備上進(jìn)行網(wǎng)站信息框架調(diào)整、內(nèi)容加減、圖片、文字、柵格響應(yīng)比較容易。內(nèi)容比較多帶有功能性的網(wǎng)站不適合做響應(yīng)式網(wǎng)站設(shè)計(jì),如:電商類(lèi)型網(wǎng)站。但是隨著科技不斷發(fā)展,響應(yīng)技術(shù)逐漸完善,給響應(yīng)式設(shè)計(jì)提供強(qiáng)有力的技術(shù)支持;響應(yīng)式設(shè)計(jì)可以在不同終端提
供完美展示效果與友好的用戶(hù)體驗(yàn),吻合用戶(hù)體驗(yàn)至上的趨勢(shì)。所以說(shuō),響應(yīng)式設(shè)計(jì)必定是未來(lái)發(fā)展趨勢(shì)。
五、讓你的網(wǎng)站變成響應(yīng)式的3個(gè)簡(jiǎn)單步驟
1 – 響應(yīng)式網(wǎng)站的布局
當(dāng)創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站,或讓現(xiàn)有的網(wǎng)站變成響應(yīng)式的,*先要關(guān)注的元素的布局。我在建立響應(yīng)式的網(wǎng)站,總是先創(chuàng)建一個(gè)非響應(yīng)的布局,頁(yè)面寬度固定大小。如果非響應(yīng)版本完成得非常不錯(cuò),我再添加媒體查詢(xún)(Media Queries)和響應(yīng)式代碼。這種操作方式更容易實(shí)現(xiàn)響應(yīng)式特性,在同一時(shí)間專(zhuān)注于一個(gè)任務(wù)。
當(dāng)你已經(jīng)完成了無(wú)響應(yīng)的網(wǎng)站,做的*件事是在你的 HTML 頁(yè)面,粘貼下面的代碼到和標(biāo)簽之間。這將設(shè)置屏幕按1:1的尺寸顯示,在 iPhone 和其他智能手機(jī)的瀏覽器提供網(wǎng)站全視圖瀏覽,并禁止用戶(hù)縮放頁(yè)面。
現(xiàn)在是時(shí)候添加一些媒體查詢(xún)了。根據(jù) W3C 網(wǎng)站,媒體查詢(xún)由媒體類(lèi)型和零個(gè)或多個(gè)媒體查詢(xún)的條件表達(dá)式組成。通過(guò)使用媒體查詢(xún),外觀呈現(xiàn)可以針對(duì)特定范圍內(nèi)的輸出設(shè)備,而不需要改變內(nèi)容本身。換句話(huà)說(shuō),媒體查詢(xún)讓您的網(wǎng)站在各種各種顯示器上看起來(lái)都很好,從小的智能手機(jī)到大的電腦屏幕等等。
媒體查詢(xún)?nèi)Q于你的網(wǎng)站布局,所以對(duì)我來(lái)說(shuō)為您提供一個(gè)現(xiàn)成可以使用的代碼片段有點(diǎn)困難。但是,下面的代碼對(duì)于大多數(shù)網(wǎng)站都是一個(gè)很好的起點(diǎn)。在這個(gè)例子中,#primary 是主要內(nèi)容區(qū)域,#secondary 是側(cè)欄。
從代碼中你可以看到,我定義了兩種規(guī)格:*先有一個(gè)*大寬度為1060px,為平板電腦優(yōu)化的橫向顯示。#primary 占在其父容器寬度的67%,#senondary 占30%,再加上3%的左外邊距。 第二個(gè)規(guī)格是用于平板電腦和更小的屏幕尺寸。
由于智能手機(jī)的屏幕尺寸小,我決定給 #primary 設(shè)置100%的寬度,#secondary 也設(shè)置100%的寬度,他將在 #primary 下面。 正如我已經(jīng)說(shuō)過(guò)的,你可能必須要對(duì)這段代碼位進(jìn)行修改才能適應(yīng)您的網(wǎng)站的具體需求。
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
完成以后,讓我們看看你的布局是如何響應(yīng)的。要做到這一點(diǎn),我用這 Matt Kersley 創(chuàng)建的一款非常的響應(yīng)式測(cè)試工具。
2 – 媒體
一個(gè)響應(yīng)式的布局是實(shí)現(xiàn)響應(yīng)網(wǎng)站的第一步,F(xiàn)在,讓我們把注意力集中在另外一個(gè)現(xiàn)代化網(wǎng)站非常重要的方面:媒體,如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠(yuǎn)不會(huì)大于他們的父容器,代碼非常簡(jiǎn)單,適用于大多數(shù)網(wǎng)站。請(qǐng)注意,IE6 等舊的瀏覽器不支持 max-width 指令。
img { max-width: 100%; }
雖然上述技術(shù)是有效的,有時(shí)你可能需要有更多的圖像控制權(quán),例如根據(jù)客戶(hù)端的顯示大小,顯示不同的圖像。
這是由 Nicolas Gallagher 發(fā)明的好方法。讓我們看看 HTML:
正如你可以看到,我們使用 data-* 屬性來(lái)存儲(chǔ)替換圖像的 URL。現(xiàn)在,讓我們使用強(qiáng)大的 CSS3 來(lái)為匹配 min-device-width 條件的媒體指定替換圖像:
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
3 – 響應(yīng)式網(wǎng)站的字體
本教程的*后一步絕對(duì)非常重要,但往往被網(wǎng)站開(kāi)發(fā)人員忽視——字體。到現(xiàn)在為止,大多數(shù)開(kāi)發(fā)人員(包括我自己)使用像素來(lái)定義字體的大小。雖然像素在普通網(wǎng)站使用是OK的,但是對(duì)于響應(yīng)式網(wǎng)站來(lái)說(shuō)應(yīng)該有響應(yīng)式的字體。事實(shí)上,一個(gè)響應(yīng)式的字體大小應(yīng)關(guān)聯(lián)它的父容器的寬度,這樣它才可以適應(yīng)客戶(hù)端的屏幕。
CSS3 規(guī)范引入了一個(gè)新的單位叫 rem,和 em 類(lèi)相似,但相對(duì)于 HTML 元素來(lái)說(shuō), rem 更易于使用。
rem 是相對(duì)于 HTML 元素的,不要忘了重置 HTML 的字體大。
html {
font-size
:
100%
; }
完成后,您可以定義響應(yīng)式的字體大小,如下所示:
1 2 3 | @media ( min-width : 640px ) { body { font-size : 1 rem;} } @media ( min-width : 960px ) { body { font-size : 1.2 rem;} } @media ( min-width : 1100px ) { body { font-size : 1.5 rem;} } |
請(qǐng)注意,舊瀏覽器不支持 rem 單元,所以不要忘了實(shí)現(xiàn)一個(gè)替代。
上一篇:全球70多家機(jī)構(gòu)北京召開(kāi)第四屆中國(guó)互聯(lián)網(wǎng)安全大會(huì)
下一篇:宜賓網(wǎng)站編程_宜賓網(wǎng)頁(yè)設(shè)計(jì)—宜賓網(wǎng)頁(yè)編程公司有哪些?