金動(dòng)力網(wǎng)絡(luò)響應(yīng)式網(wǎng)站設(shè)計(jì)開(kāi)發(fā)再次有了新升級(jí)
2016-07-13 來(lái)自: 新鄉(xiāng)金動(dòng)力網(wǎng)絡(luò)技術(shù)有限公司 瀏覽次數(shù):1769
金動(dòng)力網(wǎng)絡(luò)響應(yīng)式網(wǎng)站設(shè)計(jì)開(kāi)發(fā)再次有了新升級(jí)。下面 引用來(lái)源于網(wǎng)絡(luò)的一篇文章,對(duì) 自適應(yīng)網(wǎng)頁(yè)作一個(gè)詳細(xì)闡述。
自適應(yīng)網(wǎng)頁(yè)不像傳統(tǒng)網(wǎng)頁(yè)僅僅需考慮一種情況,不僅僅***是提交一套設(shè)計(jì)完成稿就完事兒了,它給設(shè)計(jì)、前端工程師和開(kāi)發(fā)團(tuán)隊(duì)之間的協(xié)作方式帶來(lái)新的挑戰(zhàn)。在一個(gè)繁雜商品自適應(yīng)的項(xiàng)目里,交互每個(gè)階段該產(chǎn)出什么內(nèi)容?交互與視覺(jué)怎樣協(xié)作?前端工程師何時(shí)介入?哪些項(xiàng)目讓后端開(kāi)發(fā)來(lái)做更合理?我們得到了一些答案。
自適應(yīng)設(shè)計(jì)之所以叫自適應(yīng)“設(shè)計(jì)”而不叫自適應(yīng)“技術(shù)”,***是因?yàn)樗?**是一項(xiàng)設(shè)計(jì)先行的工作。需要設(shè)計(jì)先明確好響應(yīng)方式再實(shí)現(xiàn)出來(lái),決不能出一套設(shè)計(jì)完成稿后等著前端工程師看情況把它變成自適應(yīng)網(wǎng)頁(yè)。新鄉(xiāng)網(wǎng)絡(luò)公司金動(dòng)力網(wǎng)絡(luò)是一家集新鄉(xiāng)網(wǎng)站建設(shè)、新鄉(xiāng)微信營(yíng)銷(xiāo)和新鄉(xiāng)網(wǎng)絡(luò)推廣于一體的新鄉(xiāng)***營(yíng)銷(xiāo)公司。
習(xí)慣了電腦端網(wǎng)頁(yè)的前端工程師可能更加喜歡用電腦端來(lái)掌控大小,然而在自適應(yīng)的網(wǎng)頁(yè)中出現(xiàn)更多的***是em和rem,用這些來(lái)掌控頁(yè)面字體大小甚至***是框體大小對(duì)整體的效果非常明顯。
例如,我的頁(yè)面字體設(shè)置***是10px/20px/30px等等有差異的,網(wǎng)站上有差異的地方自然頁(yè)面字體會(huì)有大小的差異這***是必然的,假如一個(gè)網(wǎng)頁(yè)足夠繁雜或***是文字足夠多的話(huà),這些頁(yè)面字體的大小設(shè)置也***是一個(gè)量很大的工作,不過(guò)在自適應(yīng)網(wǎng)頁(yè)中你設(shè)計(jì)完這些并不僅僅***是完事:你用手機(jī)瀏覽一下網(wǎng)頁(yè)會(huì)發(fā)現(xiàn)頁(yè)面字體會(huì)撐的很大,甚至有個(gè)別標(biāo)題撐滿(mǎn)了手機(jī)屏幕,這對(duì)移動(dòng)端客戶(hù)的體驗(yàn)影響可想而知。因此你要開(kāi)始寫(xiě)媒體查詢(xún),然后發(fā)現(xiàn)一個(gè)網(wǎng)頁(yè)有幾十個(gè)頁(yè)面字體需要設(shè)置,假如把這些在有差異顯示分辨率下一一調(diào)整你可能需要寫(xiě)百句以上的css代碼,然而假如你用em/rem,就能夠把工作量大大減小,同時(shí)還能夠保證頁(yè)面字體的統(tǒng)一比例。新鄉(xiāng)網(wǎng)絡(luò)公司金動(dòng)力網(wǎng)絡(luò)是一家集新鄉(xiāng)網(wǎng)站建設(shè)、新鄉(xiāng)微信營(yíng)銷(xiāo)和新鄉(xiāng)網(wǎng)絡(luò)推廣于一體的新鄉(xiāng)***營(yíng)銷(xiāo)公司。
關(guān)于em/rem的解釋大家可以自行查詢(xún),網(wǎng)上這類(lèi)教程數(shù)不勝數(shù),實(shí)際上這些就和px一樣簡(jiǎn)單,當(dāng)我開(kāi)始用之后也不過(guò)僅僅花了幾分鐘熟悉這些。就像前面說(shuō)的一樣,你也可以用這些來(lái)掌控框體的大小,然后再自適應(yīng)的網(wǎng)頁(yè)下統(tǒng)一縮小放大,當(dāng)然這需要足夠多的計(jì)算。另外值得一提的***是頁(yè)面字體圖標(biāo)也可以用這些來(lái)掌控,具體可以參考有差異“頁(yè)面字體圖標(biāo)”的官方文檔。
解決縮小放大問(wèn)題的思路有好幾種,適合新手的無(wú)疑***是百分比式的布局,在關(guān)鍵的width設(shè)置下百分比能夠起到出乎意料的效果。
我并不僅僅***是推崇全部使用百分比來(lái)布局,然而有時(shí)候這可能會(huì)大大減少工作量,給box1width設(shè)置它會(huì)自動(dòng)以width填充滿(mǎn)整個(gè)瀏覽器,不管你***是手機(jī)電腦端什么內(nèi)容顯示分辨率,它總***是有很好的表現(xiàn)。這時(shí)候你給box1下面的ul設(shè)置左右2%的margin也***是如此,隨著瀏覽器窗口大小改變時(shí)ul的 實(shí)際margin大小也會(huì)隨著變化,這么一說(shuō)大家多少也都理解了百分比布局的概念。
當(dāng)然有時(shí)候也不會(huì)有想象中的效果,特別***是在較小的顯示分辨率上時(shí),原來(lái)看似不錯(cuò)的百分比設(shè)定會(huì)顯得很怪,因?yàn)樽赃m應(yīng)多數(shù)時(shí)候僅僅約定width,長(zhǎng)度都***是由文檔和瀏覽器來(lái)決定的,這時(shí)候想要在所有的終端上都有很好的體驗(yàn)就需要Media Query來(lái)解決問(wèn)題。
通俗的解釋就***是CSS的媒體查詢(xún)功能,它既能夠準(zhǔn)確的識(shí)別設(shè)備也能夠自己設(shè)定顯示分辨率或者width,w3cshool里有Media Query的參考文檔,假如你嫌文檔太多我可以粗略的解釋一下它的工作原理。新鄉(xiāng)網(wǎng)絡(luò)公司金動(dòng)力網(wǎng)絡(luò)是一家集新鄉(xiāng)網(wǎng)站建設(shè)、新鄉(xiāng)微信營(yíng)銷(xiāo)和新鄉(xiāng)網(wǎng)絡(luò)推廣于一體的新鄉(xiāng)***營(yíng)銷(xiāo)公司。
在有必要的時(shí)候你可能會(huì)給一個(gè)box設(shè)置height,當(dāng)box擁有500pxheight時(shí)它可能在電腦端上看起來(lái)不錯(cuò),然而用手機(jī)打開(kāi)時(shí)就有些嚇人了,整個(gè)box充斥了網(wǎng)頁(yè),里面的內(nèi)容排列混亂,嚴(yán)重的影響了客戶(hù)體驗(yàn),這時(shí)候你就可以使用媒體查詢(xún)Media Query,用它單獨(dú)的為有差異大小的設(shè)置有差異的height,比如640/320打開(kāi)時(shí)box時(shí)就分別處于300/200px的height,這樣看起來(lái)就不錯(cuò)了。
大家可能會(huì)想到import,實(shí)際上媒體查詢(xún)就可以這樣理解,它為有差異的width或設(shè)備設(shè)定了類(lèi)似于import的css規(guī)則,保證了實(shí)際渲染完成網(wǎng)頁(yè)的效果。
媒體查詢(xún)也可以為一個(gè)網(wǎng)頁(yè)準(zhǔn)備多個(gè)有差異的CSS,當(dāng)設(shè)備大小有差異時(shí)使用有差異的CSS文件,假如樣式文件比較大也可以考慮這種方法。
我見(jiàn)到過(guò)和實(shí)際使用的前端工程師框架中,不少都***是富前端工程師類(lèi)型的設(shè)計(jì),并不建議新手前端工程師盲目的使用框架來(lái)布局,不管框架看起來(lái)多美好。在實(shí)際的使用過(guò)程中大家可能會(huì)發(fā)現(xiàn)很多問(wèn)題,比如類(lèi)名太多太繁雜(在沒(méi)有很多的css經(jīng)驗(yàn)時(shí)可能對(duì)約定的類(lèi)名所知甚少)、樣式?jīng)_突。引入資源過(guò)多導(dǎo)致網(wǎng)頁(yè)繁重、偏離設(shè)計(jì)效果等等。
就拿bootstrap來(lái)說(shuō),假如你要設(shè)計(jì)一個(gè)類(lèi)似于google的查詢(xún)框就顯得很難,google類(lèi)型的查詢(xún)框?qū)嶋H上***是將一個(gè)input包含在box里面,然后在這個(gè)box里面再加上左右圖標(biāo),假如你用bootstrap來(lái)做可能會(huì)出現(xiàn)很多莫名奇妙的沖突,然而實(shí)際上你得到了什么內(nèi)容呢?一個(gè)圓角一個(gè)行高?還***是他的百分比width呢?這些用css來(lái)寫(xiě)僅僅不過(guò)***是幾句代碼的事。
在這個(gè)新的端層里,前端工程師的工程師可以根據(jù)有現(xiàn)實(shí)的決定權(quán),這會(huì)使得在不觸及后端架構(gòu)的情況下,讓所有設(shè)備上的體驗(yàn)更為快速、響應(yīng)、可用。