更新時(shí)間：2017-04-07自適應(yīng)網(wǎng)站近來很流行，當(dāng)然，對(duì)一個(gè)新手來說可能聽起來有點(diǎn)復(fù)雜，其實(shí)它比你想象的簡(jiǎn)單多了。這里是一個(gè)快速教程，通過學(xué)習(xí)你會(huì)自適應(yīng)網(wǎng)站，但是前提是你必須的懂一點(diǎn)css才行。
網(wǎng)站自適應(yīng)，小編以前認(rèn)為是很高級(jí)而且需要花費(fèi)很多時(shí)間去搭建實(shí)現(xiàn)出來，要設(shè)計(jì)很多套CSS，并且要結(jié)合jQuery，來實(shí)現(xiàn)自適應(yīng)不同的設(shè)備。所以小編就在網(wǎng)上找各種教程看，直到前幾日小編發(fā)現(xiàn)了一篇極其有價(jià)值的一篇文章，里面介紹了實(shí)現(xiàn)自適應(yīng)網(wǎng)站的快速方法，今日小編決定把小編在這篇文章中學(xué)到的知識(shí)來分享給大家。
由于小編也是第一次看著參考代碼去實(shí)現(xiàn)完成網(wǎng)站自適應(yīng)，所以有地方可能寫的也不是很詳細(xì)，有不對(duì)的地方歡迎大家積極與小編討論。
下面先給大家看一看實(shí)現(xiàn)的網(wǎng)頁(yè)圖片，這里先為大家看一看已經(jīng)完成的部分。
下面就說說如何把網(wǎng)頁(yè)改為自適應(yīng)吧，小編為什么說很簡(jiǎn)單？因?yàn)槟悴恍枰魏胃呱畹木W(wǎng)頁(yè)設(shè)計(jì)技術(shù)，你只需要懂一點(diǎn)html、一點(diǎn)css，而修改耗時(shí)對(duì)于一張普通網(wǎng)頁(yè)來說，確實(shí)只需幾個(gè)小時(shí)。
首次來說一說第一步，這一步就非常簡(jiǎn)單了，直接把下面的代碼直接復(fù)制到<head></head>之間就行了。
前面兩個(gè)meta，no-siteapp和no-transform，是告訴搜索引擎不要把網(wǎng)頁(yè)轉(zhuǎn)碼。第三個(gè)meta，聲明網(wǎng)頁(yè)可以縮小放大。
然后再把css代碼也粘貼到<head></head>之間。
這段css代碼，意思是在屏幕寬度小于640px的時(shí)候執(zhí)行的樣式，在里面寫小于640px時(shí)網(wǎng)頁(yè)的css樣式。當(dāng)然我們也可以把640px改成其它你想要的值就行。
那么就有朋友要問了，那么我們?nèi)绾伟涯切┎恍枰谑謾C(jī)網(wǎng)頁(yè)上顯示的內(nèi)容隱藏掉呢？想要的部分又如何顯示出來呢？舉個(gè)例子說明一下，例如頭部的div、導(dǎo)航欄的div、正文的div、側(cè)欄的div、頁(yè)腳的div，然后，我們就使用css隱藏不用顯示的div，代碼很簡(jiǎn)單，就是display:none，需要顯示的內(nèi)容代碼就是display:block。
當(dāng)然了，這只是一個(gè)最基本的自適應(yīng)網(wǎng)站設(shè)計(jì)，著重是介紹思路，你可以在此思路的指引下，完成更加復(fù)雜的設(shè)計(jì)。
