整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
著網(wǎng)絡(luò)與科技的快熟發(fā)展，越來(lái)越多的手機(jī)廠商開始打起手機(jī)之間的戰(zhàn)爭(zhēng)，手機(jī)的快速發(fā)展也使得越來(lái)越多的人開始使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的最常見終端。那么就會(huì)出現(xiàn)一個(gè)問(wèn)題，如何才能讓PC端的網(wǎng)頁(yè)在手機(jī)上正常顯示？手機(jī)與PC的屏幕寬度有著很大的區(qū)別，會(huì)造成同樣的內(nèi)容在手機(jī)與PC端出現(xiàn)兩種不同的顯示結(jié)果。那該如何才能使得手機(jī)與PC都能對(duì)網(wǎng)頁(yè)呈現(xiàn)出令人滿意的結(jié)果呢，本文收集了以下幾種方法，有興趣的小伙伴們可以看下：
1、在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽。
viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。
注意：該方式不支持IE8及IE8以下的版本
2、不使用絕對(duì)寬度
由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。對(duì)圖像來(lái)說(shuō)也是這樣。
具體說(shuō)，CSS代碼不能指定像素寬度：width:xxx px;
只能指定百分比寬度： width: xx%; 或者 width:auto;
3、使用相對(duì)大小的字體
字體也不能使用絕對(duì)大小（px），只能使用相對(duì)大小（em或者rem）
例如： body
上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素（1em=16px）。
h1
h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5）
將想要的像素去除默認(rèn)的16像素可以得到em
4、流動(dòng)布局（fluid grid）
"流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。
.main
.leftBar
float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。
5、媒體查詢器@media
"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的核心，就是CSS3引入的MediaQuery模塊。
它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。
上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件。
如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。
著網(wǎng)絡(luò)與科技的快熟發(fā)展，越來(lái)越多的手機(jī)廠商開始打起手機(jī)之間的戰(zhàn)爭(zhēng)，手機(jī)的快速發(fā)展也使得越來(lái)越多的人開始使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的最常見終端。那么就會(huì)出現(xiàn)一個(gè)問(wèn)題，如何才能讓PC端的網(wǎng)頁(yè)在手機(jī)上正常顯示？手機(jī)與PC的屏幕寬度有著很大的區(qū)別，會(huì)造成同樣的內(nèi)容在手機(jī)與PC端出現(xiàn)兩種不同的顯示結(jié)果。那該如何才能使得手機(jī)與PC都能對(duì)網(wǎng)頁(yè)呈現(xiàn)出令人滿意的結(jié)果呢，本文收集了以下5種方法，有興趣的小伙伴們可以看下：
1、在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽
viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。
注意：該方式不支持IE8及IE8以下的版本
2、不使用絕對(duì)寬度
由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。對(duì)圖像來(lái)說(shuō)也是這樣。
具體說(shuō)，CSS代碼不能指定像素寬度：width:xxx px;
只能指定百分比寬度： width: xx%; 或者 width:auto;
3、使用相對(duì)大小的字體
字體也不能使用絕對(duì)大小（px），只能使用相對(duì)大?。╡m或者rem）
例如： body
上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素（1em=16px）。
h1
h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5）
將想要的像素去除默認(rèn)的16像素可以得到em
4、流動(dòng)布局（fluid grid）
"流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。
.main
.leftBar
float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。
5、媒體查詢器@media
"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的核心，就是CSS3引入的MediaQuery模塊。
它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。
上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件。
如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。
如今人們經(jīng)過(guò)手機(jī)閱讀網(wǎng)頁(yè)占了大多數(shù)，隨著閱讀方式的改動(dòng)，網(wǎng)頁(yè)完成多終端自適應(yīng)，無(wú)論關(guān)于防止工程師無(wú)謂的反復(fù)勞動(dòng)或者是項(xiàng)目管理的便利性上來(lái)說(shuō)重要性都是非常巨大的。
由于挪動(dòng)設(shè)備越來(lái)越多的被人們運(yùn)用，手機(jī)成為訪問(wèn)互聯(lián)網(wǎng)的最常見終端，而我們?cè)O(shè)計(jì)的網(wǎng)頁(yè)確是為了呈如今PC端。
手機(jī)的屏幕比擬小，寬度通常在600像素以下，而PC的屏幕寬度，普通都在1000像素以上（目前主流寬度是1366×768），有的還到達(dá)了2000像素。同樣的內(nèi)容，要在大小懸殊的屏幕上，都呈現(xiàn)出稱心的效果，并不是一件容易的事。
很多網(wǎng)站的處理辦法，是為不同的設(shè)備提供不同的網(wǎng)頁(yè)，比方特地提供一個(gè)mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比擬費(fèi)事，同時(shí)要維護(hù)好幾個(gè)版本，而且假如一個(gè)網(wǎng)站有多個(gè)portal（入口），會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。
自適應(yīng)是為了解決如何在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)。
如何進(jìn)行自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)
通俗的講，移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來(lái)顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域，在具體一點(diǎn)，就是瀏覽器上(也可能是一個(gè)app中的webview)用來(lái)顯示網(wǎng)頁(yè)的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認(rèn)情況下，一般來(lái)講，移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)榭紤]到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來(lái)說(shuō)都比較小，所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的），但帶來(lái)的后果就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條，因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。
該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說(shuō)會(huì)出現(xiàn)橫向滾動(dòng)條。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
把移動(dòng)設(shè)備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動(dòng)設(shè)備的viewport，ideal viewport的寬度等于移動(dòng)設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無(wú)論在何種分辨率的屏幕下，那些針對(duì)ideal viewport 而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條，都可以完美的呈現(xiàn)給用戶。
要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度。因?yàn)閙eta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了。
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，這可能會(huì)造成我們的一個(gè)錯(cuò)覺(jué)，那就是css中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此，css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁(yè)中，我們無(wú)需對(duì)這個(gè)津津計(jì)較，但在移動(dòng)設(shè)備上，必須弄明白這點(diǎn)。在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。后來(lái)隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來(lái)越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒(méi)變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的。
流動(dòng)布局（fluid grid） "流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。
"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的核心，就是CSS3引入的MediaQuery模塊。 它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"
上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載a.css文件。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"
如果屏幕寬度在400像素到600像素之間，則加載b.css文件。
自適應(yīng)與響應(yīng)式的區(qū)別
自適應(yīng)是為了解決如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)，讓同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動(dòng)調(diào)整網(wǎng)頁(yè)內(nèi)容大小。但是無(wú)論怎樣，他們主體的內(nèi)容和布局是沒(méi)有變的。
自適應(yīng)還是暴露出一個(gè)問(wèn)題，如果屏幕太小，即使網(wǎng)頁(yè)能夠根據(jù)屏幕大小進(jìn)行適配，但是會(huì)感覺(jué)在小屏幕上查看，內(nèi)容過(guò)于擁擠，響應(yīng)式正是為了解決這個(gè)問(wèn)題而衍生出來(lái)的概念。它可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)，布局和展示的內(nèi)容可能會(huì)有所變動(dòng)。
響應(yīng)式布局被大家熟知的一個(gè)重要原因就是 twitter 開源了 bootstrap。
相比自適應(yīng)網(wǎng)站，響應(yīng)式網(wǎng)站省去了很多的控件，同時(shí)也省去了不少建立和維護(hù)的功夫。響應(yīng)式布局就是一種流體，在按百分比縮放時(shí)也能相當(dāng)?shù)牧鲿场?/p>
使用響應(yīng)式設(shè)計(jì)，你要記住所以的布局。這當(dāng)然可能會(huì)使過(guò)程混亂，并且使設(shè)計(jì)更加復(fù)雜。這就意味著你應(yīng)該專注于中等分辨率的視圖，然后再用media querie調(diào)整為更低或更高的分辨率。 所以通常的做法是，在一個(gè)新的項(xiàng)目中使用響應(yīng)式設(shè)計(jì)，在后期的改造中使用自適應(yīng)設(shè)計(jì)。
自適應(yīng)可用于改造現(xiàn)有的網(wǎng)站使其更好地適應(yīng)移動(dòng)端。這使你的設(shè)計(jì)可控制和開發(fā)多個(gè)特定的視圖。你開發(fā)視圖的數(shù)量完全取決于你，你的公司和全面的預(yù)算。然而，它也提供了一定量的控件（例如在內(nèi)容和布局上），如此你便無(wú)須使用響應(yīng)式設(shè)計(jì)。但當(dāng)你設(shè)計(jì)多種分辨率時(shí)你會(huì)發(fā)現(xiàn)，在改變窗口大小的時(shí)候?qū)?huì)“跳出”布局。
自適應(yīng)網(wǎng)站可以用于設(shè)計(jì)和開發(fā)一個(gè)擁有多個(gè)自適應(yīng)視圖的網(wǎng)站。所以這種設(shè)計(jì)通常用于改造網(wǎng)站。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
