小編在面試的時(shí)候被面試官問(wèn)到過(guò)會(huì)不會(huì)做響應(yīng)式網(wǎng)站，一聽(tīng)這個(gè)問(wèn)題懵了。聽(tīng)沒(méi)聽(tīng)說(shuō)過(guò)呢？聽(tīng)說(shuō)過(guò)，會(huì)不會(huì)做呢？不會(huì)。小編以前做過(guò)的網(wǎng)站都是PC端的，電腦上面看還可以，拿著手機(jī)看的話就會(huì)出現(xiàn)很多兼容性的問(wèn)題，根本沒(méi)有接觸過(guò)響應(yīng)式布局的網(wǎng)站，而如今移動(dòng)端的發(fā)展呈火速上升趨勢(shì)，如果不能兼容移動(dòng)端，PC端和平板的話，從本質(zhì)上來(lái)說(shuō)發(fā)展是不會(huì)長(zhǎng)久的，同理，如果公司的網(wǎng)站還是那種老式網(wǎng)站，只適應(yīng)PC端，那么也會(huì)損失一大部分客戶源。那么今天就先帶大家了解一下響應(yīng)式布局的原理和一些基礎(chǔ)知識(shí)。

一.原理

因?yàn)橐苿?dòng)端的崛起，老式網(wǎng)站不能更好的兼容移動(dòng)端與PC端，會(huì)造成頁(yè)面塌陷圖片加載不出來(lái)等問(wèn)題，所以為了解決這個(gè)問(wèn)題，2010年Ethan Marcotte提出了響應(yīng)式布局這一理念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端--而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。一時(shí)間受到了熱烈的追捧。

二.基礎(chǔ)知識(shí)

1.要允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整，因此我們要為網(wǎng)頁(yè)的頭部加入一行viewport元標(biāo)簽

這一行代碼的意思是：

width=divice-width        網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度

initial-scale=1           原始縮放比例為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的百分之百，所以能夠更好的兼顧PC端和移動(dòng)端,網(wǎng)頁(yè)自適應(yīng)

2.具體演示

通過(guò)這些代碼簡(jiǎn)單演示了一下，大家應(yīng)該也注意到了一個(gè)關(guān)鍵詞media,media通過(guò)不同的媒介類型條件定義樣式表規(guī)則,從而讓網(wǎng)站自適應(yīng)手機(jī)端、平板、PC端，媒介查詢讓CSS可以更精確作用于不同的媒介類型和同一媒介的不同條件。

3.、流動(dòng)布局（fluid grid）

"流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。

4.相對(duì)字體大小

字體也不能使用絕對(duì)大小（px），而只能使用相對(duì)大?。╡m）。

以上是深圳外包公司網(wǎng)聯(lián)科技為您提供的內(nèi)容，如果有任何業(yè)務(wù)（深圳網(wǎng)站建設(shè)、深圳網(wǎng)站開(kāi)發(fā)、深圳網(wǎng)頁(yè)制作、深圳制作網(wǎng)站、微信營(yíng)銷、微信小程序開(kāi)發(fā)）上的需要請(qǐng)聯(lián)系我們，咨詢電話0755-83658105。