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

一.原理

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

二.基礎知識

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

這一行代碼的意思是：

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

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

2.具體演示

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

3.、流動布局（fluid grid）

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

4.相對字體大小

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

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