響應(yīng)式Web設(shè)計—px-em-rem三者區(qū)別及rem的使用
在css中單位長度用的最多的是px惧蛹、em浙踢、rem，這三個的區(qū)別是：
- px是固定的像素婴梧，一旦設(shè)置了就無法因為適應(yīng)頁面大小而改變穗椅。
- em和rem相對于px更具有靈活性辨绊，他們是相對長度單位，意思是長度不是定死了的房待，更適用于響應(yīng)式布局邢羔。
- em是相對于其父元素來設(shè)置字體大小的驼抹，一般都是以
<body>的font-size為基準。這樣就會存在一個問題拜鹤，進行任何元素設(shè)置框冀，都有可能需要知道他父元素的大小。而Rem是相對于根元素<html>敏簿，這樣就意味著明也，我們只需要在根元素確定一個參考值。
總之：對于em和rem的區(qū)別一句話概括：
em相對于父元素惯裕，rem相對于根元素温数。
<meta name="viewport" content="width=device-widht,initial-scale=1.0,user-scalable=1.0,maximum-scale=1.0,minimum-scale=1.0">
明白一個瀏覽器默認行為。
試想蜻势，瀏覽器如果把電腦端的980px的網(wǎng)頁展現(xiàn)在寬度為750px的iphone6手機屏上撑刺，勢必會放不下，手機端橫向會出現(xiàn)滾動條握玛，怎么阻止這種情況呢够傍，很簡單，瀏覽器默認一個虛擬窗口挠铲，不同瀏覽器有不同的虛擬窗口寬度的默認值如：safari iphone：980px;opera:850px; Andriod webkit:800px;IE:974px;然后會把這個980px虛擬窗口裝進寬度為750px的iphone6中冕屯，當然這樣的話必須縮放，這就是為什么在手機中展現(xiàn)電腦端頁面沒有出現(xiàn)橫向滾動條拂苹，而且字跡明顯變小的原因安聘。
meta標簽中，width有兩個含義瓢棒，第一浴韭、width為phys.width，第二音羞，width也為虛擬窗口的width囱桨。這樣就會有兩個結(jié)果：
此時的iPhone6的phys.width也變成了css-width即375px，我們可以通過document.documentElement.clientWidth獲取得到此時phys.width確實為375px嗅绰。
如你設(shè)計的是375px的手機端頁面，此時的虛擬窗口的寬度也為375px搀继，再裝進phys.width為375px的手機窘面，當然如設(shè)計稿一樣的效果，不會縮放叽躯，也不會出現(xiàn)橫向滾動條财边。
user-scalable=no就一定可以保證頁面不可以縮放嗎？NO点骑，有些瀏覽器不吃這一套酣难，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設(shè)為1.0就可以了
要把當前的viewport寬度設(shè)為ideal viewport的寬度谍夭，既可以設(shè)置 width=device-width，也可以設(shè)置 initial-scale=1憨募，但這兩者各有一個小缺陷紧索，就是iphone、ipad以及IE 會橫豎屏不分菜谣，通通以豎屏的ideal viewport寬度為準珠漂。所以，最完美的寫法應(yīng)該是尾膊，兩者都寫上去媳危，這樣就 initial-scale=1 解決了 iphone、ipad的毛病冈敛，width=device-width則解決了IE的毛泊Α：
<meta name="viewport" content="width=device-width, initial-scale=1">
meta name="viewport" content="width=device-width,initial-scale=1.0" 解釋
