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

一.原理

因?yàn)橐苿?dòng)端的崛起，老式網(wǎng)站不能更好的兼容移動(dòng)端與PC端，會(huì)造成頁面塌陷圖片加載不出來等問題，所以為了解決這個(gè)問題，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)頁寬度自動(dòng)調(diào)整，因此我們要為網(wǎng)頁的頭部加入一行viewport元標(biāo)簽

這一行代碼的意思是：

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

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

2.具體演示

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

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

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

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

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

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