當(dāng)我們進(jìn)行移動(dòng)端頁(yè)面開(kāi)發(fā)的時(shí)候，經(jīng)常會(huì)被告知使用viewport的<meta>標(biāo)簽，或者使用rem(相對(duì)于根元素html的font-size計(jì)算)，em(相對(duì)于父元素的font-size計(jì)算)，或者%... ... 方式多種多樣，各各都有絕招，這里總結(jié)一下我目前使用過(guò)的，希望未來(lái)能?chē)L試更多，找到 Best Solution ~
知識(shí)點(diǎn)1：viewport
Q1： 什么是viewport
A： viewport視窗口的意思。即我們所能看到的瀏覽器的可視窗口的大小，但是移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來(lái)說(shuō)都比較小，為了能在移動(dòng)端正常顯示為桌面瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)，移動(dòng)端的瀏覽器都把默認(rèn)的viewport設(shè)置為980px到1024px不等（移動(dòng)端viewport比默認(rèn)窗口要大）。--->> 這樣會(huì)導(dǎo)致 出現(xiàn)橫向滾動(dòng)條，造成很多設(shè)備上字體變成原來(lái)的1/3。
Q2： 如何理解viewport設(shè)置
A： <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1,user-scalable=no">這個(gè)設(shè)置翻譯成大白話就是：瀏覽器呀，你就按照你的自然寬度來(lái)來(lái)給我顯示網(wǎng)站就行了，不要自作聰明。讓當(dāng)前viewport的寬度等于設(shè)備的寬度。
width是viewport的寬度，height是viewport的高度。initial-scale初始縮放比例。minimum-scale允許用戶縮放到的最小比例。user-scalable是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許。
Q3：meta viewport標(biāo)簽的作用
A：meta viewport 標(biāo)簽首先是由蘋(píng)果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問(wèn)題。
知識(shí)點(diǎn)2：設(shè)備獨(dú)立像素 & 物理像素
在桌面瀏覽器中css中1px往往對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素。但是，css中的像素是一個(gè)抽象單位，在不同的設(shè)備或者不同環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。
- css中的像素 !== 設(shè)備的物理像素
-
iphone的Retina屏
移動(dòng)設(shè)備的屏幕像素密度越來(lái)越高，iphone3的分辨率320x480，此時(shí)的一個(gè)css像素確實(shí)等于一個(gè)屏幕物理像素。
iphone4開(kāi)始，推出Retina屏，視網(wǎng)膜屏幕。分辨率提高了一倍，640x960，但此時(shí)屏幕尺寸沒(méi)有變。（同樣大小的屏幕，像素卻多了一倍），一個(gè)css像素等于兩個(gè)物理像素。 -
devicePixelRatio屬性
window對(duì)象的devicePixelRatio屬性，為設(shè)備物理像素和設(shè)備獨(dú)立像素的比例。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說(shuō)1個(gè)css像素相當(dāng)于2個(gè)物理像素。
window.devicePixelRatio是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
知識(shí)點(diǎn)3：media
在css中@media (min-width: 768px)表示最小是768也就是>=768
@media (min-width: 768px){ //>=768的設(shè)備 }
@media (min-width: 992px){ //>=992的設(shè)備 }
@media (min-width: 1200){ //>=1200的設(shè)備 }
@media (max-width: 1199){ //<=1199的設(shè)備 }
@media (max-width: 991px){ //<=991的設(shè)備 }
@media (max-width: 767px){ //<=768的設(shè)備 }
media type的幾種使用方法
all（全部）,screen（屏幕）,print（頁(yè)面打印或預(yù)覽模式）
<link href="css/reset.css" media="screen" />
<style type="text/css" media="screen">
@import url("css/style.css");
</style>
media screen {
Selector {rules}
}
@import url('style.css') screen;<?xml-stylesheet media="screen" href="css/style.css" ？>
知識(shí)點(diǎn)4：Sass
Q1：如何更方便使用rem
A：根據(jù)rem的使用原理，可以知道px轉(zhuǎn)rem需要在html根元素設(shè)置一個(gè)font-size值，因?yàn)閞em是相對(duì)于html根元素。
$baseFontSize: 16px !default;
html {
font-size: $baseFontSize;
}
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
