css3在響應(yīng)式網(wǎng)頁設(shè)計(jì)中的應(yīng)用

《css3在響應(yīng)式網(wǎng)頁設(shè)計(jì)中的應(yīng)用》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。

1、CSS3在響應(yīng)式網(wǎng)頁設(shè)計(jì)中的應(yīng)用　　摘要：隨著社會(huì)和網(wǎng)絡(luò)技術(shù)的發(fā)展，移動(dòng)設(shè)備正被人們?cè)絹碓綇V泛的應(yīng)用，并且成為訪問互聯(lián)網(wǎng)的最常見終端。而各種不同的設(shè)備，其顯示屏幕是不同的。響應(yīng)式網(wǎng)頁正是為了在大小的不同屏幕上顯示同樣的網(wǎng)頁而誕生的。文章對(duì)CSS3在制作響應(yīng)式網(wǎng)頁的代碼實(shí)現(xiàn)等方面，進(jìn)行了論述說明?！　￡P(guān)鍵詞：移動(dòng)設(shè)備；CSS3；響應(yīng)式網(wǎng)頁　　中圖分類號(hào)：TP37文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044（2016）19-0030-02　　隨著互聯(lián)網(wǎng)的發(fā)展及廣泛應(yīng)用，移動(dòng)設(shè)備的應(yīng)用也日益廣泛，比如使用手機(jī)上網(wǎng)，使用IPAD訪問網(wǎng)絡(luò)等等，成為訪問互聯(lián)網(wǎng)最常見的方式

2、。既然訪問網(wǎng)絡(luò)的終端設(shè)備不一樣，導(dǎo)致了顯示的屏幕大小不盡相同，那如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁呢？比如，手機(jī)的屏幕比較小，而電腦顯示器的屏幕卻比手機(jī)屏幕大很多倍。同樣的內(nèi)容，要在不同大小的屏幕上，都能正確顯示和表達(dá)出來，那就需要借助于相應(yīng)的方式和方法才能實(shí)現(xiàn)?！　∑鋵?shí)在很早以前，曾經(jīng)就有人設(shè)想，設(shè)計(jì)者能不能對(duì)網(wǎng)頁進(jìn)行一次性設(shè)計(jì)之后，但是能對(duì)不同大小屏幕的設(shè)備，都能適用，這樣，網(wǎng)頁就能根據(jù)所用的屏幕寬度，進(jìn)行自動(dòng)調(diào)整，從而實(shí)現(xiàn)正確顯示網(wǎng)頁的功能。6　　之前，在沒有CSS3的情況下，大多數(shù)都是把一個(gè)項(xiàng)目做很多個(gè)不同的版本，用JS或者其他設(shè)備進(jìn)行判斷，然

3、后再跳轉(zhuǎn)到指定的版本中去。但是現(xiàn)在隨著CSS3技術(shù)的普及，在WEB設(shè)計(jì)中，可以使用CSS技術(shù)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，根據(jù)媒體設(shè)備的屏幕尺寸讓網(wǎng)站的內(nèi)容自動(dòng)響應(yīng)?！　?“響應(yīng)式網(wǎng)頁設(shè)計(jì)”的提出　　早在2010年，EthanMarcotte就提出了“自適應(yīng)網(wǎng)頁設(shè)計(jì)”這個(gè)名詞，它的含義是指網(wǎng)頁可以通過自動(dòng)識(shí)別屏幕大小，來做出相應(yīng)的調(diào)整，使網(wǎng)頁能適應(yīng)屏幕大小達(dá)到正常顯示的新網(wǎng)頁設(shè)計(jì)方式及技術(shù)。這就是響應(yīng)式網(wǎng)頁的來源?！　?“響應(yīng)式網(wǎng)頁設(shè)計(jì)”的實(shí)現(xiàn)　　“響應(yīng)式網(wǎng)頁設(shè)計(jì)”是通過什么方式來實(shí)現(xiàn)的呢，主要是通過以下三個(gè)方面?！　∈紫?，通過標(biāo)簽的加入，可以用來實(shí)現(xiàn)響應(yīng)式網(wǎng)頁。的意思是

4、指網(wǎng)頁默認(rèn)的寬度和高度。代碼如下：　　　　這行代碼的意思是，網(wǎng)頁寬度與所用設(shè)備的屏幕寬度是相等的，網(wǎng)頁的大小占所用設(shè)備屏幕大小的一倍?！　∑浯危捎诰W(wǎng)頁要根據(jù)屏幕大小來調(diào)整頁面的布局，所以在書寫CSS3代碼的過程中，不能使用絕對(duì)寬度，其中也包括不能具有絕對(duì)寬度的元素。比如，CSS3代碼不能寫成這種代碼：width：780px；這樣書寫代碼就相當(dāng)于指定了所用元素的寬度，這樣，在不同屏幕進(jìn)行顯示的時(shí)候就會(huì)出錯(cuò)?？梢詫懗蛇@種代碼：width：6100%；或者width：auto；這樣書寫代碼的含義是指定所用元素的寬度跟屏幕大小相同，或者隨著屏幕大小自動(dòng)調(diào)節(jié)。這樣，

5、在網(wǎng)頁進(jìn)行顯示時(shí)才能跟所用設(shè)備的屏幕相匹配。另外，對(duì)于頁面中的字體來說，在書寫代碼時(shí)，也不能定義字體的大小（px），而只能定義字體的相對(duì)大?。╡m）。比如，代碼body{font：Arial100%；}，說明的含義是字體大小跟頁面默認(rèn)字體的大小是一樣的。代碼h1{font-size：1.5em；}的意思是h1字體的大小是默認(rèn)字體的1.5倍。這兩種定義字體大小的方式是正確的。假如寫成body{font：Arial16px；}或者h(yuǎn)1{font-size：30px；}，則是錯(cuò)誤的?！　〉谌?，對(duì)于響應(yīng)式網(wǎng)頁來說，需要設(shè)置的布局是不能固定不變。也就是說，在網(wǎng)頁中的每

6、個(gè)區(qū)塊，其位置都應(yīng)該是浮動(dòng)的，而不是固定不變的。比如，代碼.right{float：left；width：80%；}的含義是把.right區(qū)塊設(shè)置為左浮動(dòng)，寬度是頁面的80%。使用浮動(dòng)的優(yōu)點(diǎn)是，如果屏幕的寬度不夠，放不下水平方向的兩個(gè)或多個(gè)元素，那第二個(gè)元素或其他元素會(huì)自動(dòng)轉(zhuǎn)到第二行或者第三行，而不會(huì)在水平方向進(jìn)行排列，通過這種書寫代碼的方式，就不會(huì)在頁面上出現(xiàn)水平滾動(dòng)條了?！　?響應(yīng)式網(wǎng)頁設(shè)計(jì)的核心　　對(duì)于響應(yīng)式網(wǎng)頁的實(shí)現(xiàn)來說，其核心就是通過CSS3引入MediaQuery模塊。而使用MediaQuery模塊的含義就是通過書寫的CSS3代碼來獲取所用設(shè)備的

7、屏幕大小，并根據(jù)屏幕大小來調(diào)用相應(yīng)的CSS文件，以此來實(shí)現(xiàn)網(wǎng)頁在該設(shè)備屏幕的正常顯示。比如下面的代碼：　　6　　它的代碼含義是，如果屏幕寬度小于200像素，網(wǎng)頁就會(huì)調(diào)用Screen1.css文件，使網(wǎng)頁按照Screen1.css中定義的格式來顯示網(wǎng)頁內(nèi)容?！　〖偃绱a的書寫如下：　　

8、edia="screenand（min-width：