行業動态

使用CSS3實現網頁自适應并使得不(bù)同浏覽終端設備之(zhī)間更容易實現無障礙切換。随着移動端網絡用戶數量的(de)大(dà)幅攀升，對網絡頁面的(de)适應性提出(chū)了(le／liǎo)更高的(de)要(yào / yāo)求。在(zài)初期，一(yī / yì ／yí)直都是(shì)爲(wéi / wèi)固定端設計的(de)頁面，從最初的(de)稍低像素尺寸發展到(dào)後期的(de)大(dà)尺寸頁面，再到(dào)後期的(de)頁面寬度居中。然而(ér)，移動端用戶早期浏覽的(de)網絡頁面依舊是(shì)适宜于(yú)固定端的(de)頁面設計。後來(lái)，慢慢出(chū)現了(le／liǎo)檢測浏覽器終端的(de)程序代碼，讓浏覽者自行選擇觸屏版、電腦版和(hé / huò)客戶端下載。也(yě)就(jiù)是(shì)說(shuō)，商家要(yào / yāo)設計多個(gè)版本的(de)網站以(yǐ)應對用戶的(de)浏覽終端的(de)随意性需求。

技術智力又作用于(yú)設計思維從而(ér)形成設計方法論。科學技術不(bù)僅爲(wéi / wèi)設計師提供了(le／liǎo)新的(de)設計手段、設計對象和(hé / huò)設計材料，而(ér)且爲(wéi / wèi)設計師定義了(le／liǎo)思考方式和(hé / huò)創新途徑。平面視覺傳達意義上(shàng)的(de)布局相對繁複，網頁視覺中的(de)所謂布局其實就(jiù)是(shì)大(dà)小和(hé / huò)位置。簡而(ér)言之(zhī)，就(jiù)是(shì)每一(yī / yì ／yí)個(gè)DIV的(de)寬、高尺寸和(hé / huò)定位位置。我們看到(dào)的(de)每一(yī / yì ／yí)個(gè)網頁頁面都是(shì)由無數個(gè)DIV組成，這(zhè)些DIV是(shì)怎樣的(de)包含關系、并列關系、嵌套關系，以(yǐ)及是(shì)怎樣的(de)邊距與間隔關系，我們都需要(yào / yāo)定義和(hé / huò)布局。CSS3除了(le／liǎo)既有的(de)absolute、relative、fixed之(zhī)外，還有static 。

另外還有float。更爲(wéi / wèi)重要(yào / yāo)的(de)是(shì)，CSS3實現可以(yǐ)計算的(de)自适應布局——calc()。頁面設計時(shí)可以(yǐ)使用calc()給元素的(de)margin、pading、width等屬性賦值，而(ér)且還可以(yǐ)在(zài)一(yī / yì ／yí)個(gè)calc()内部嵌套另一(yī / yì ／yí)個(gè)calc()。其語法也(yě)不(bù)複雜，就(jiù)是(shì)使用數學表達式，該表達式可以(yǐ)包含四則運算、百分比以(yǐ)及px、em、rem等單位，而(ér)且可以(yǐ)混用多種單位計算。calc其實是(shì)calculate的(de)縮寫，運用此種運算設定，就(jiù)可以(yǐ)消除添加邊距或者邊框帶來(lái)的(de)常見問題，從而(ér)實現自适應浏覽設備的(de)寬度。