關於移動端及flex

咱們知道寫pc頁面的時候，ui設計圖是多少px,咱們寫網頁的時候，就會寫多少px,這個其實就是由pc端屏幕的物理像素，和咱們設計圖的css邏輯像素決定的，因爲屏幕的物理像素和css邏輯像素比，恰好是1:1，咱們可以用這個特性，進行快速切圖。可是，移動端是什麼樣子呢？你看手機屏幕比電腦屏幕小那麼多，咱們如今按照pc端頁面的思惟，按照1比1的比例，想一想這個頁面在手機端顯示的效果，屏幕是否是放不下不少東西，並且會不清晰呢？要想放下不少東西並且清晰的話，就是咱們的物理像素/邏輯像素，在PC端的是1:1咱們已經知道了，就是我電腦屏幕多大，UI圖就給我多大。同理在手機端就是，個人屏幕就是這麼大一點了，在一樣的ui圖下面，我在手機屏幕上，看到對應的UI圖的區域就會變大，不然，這UI圖就蓋過手機屏幕了。要想個人手機把UI圖徹底顯示出來，這個時候物理像素邏輯像素就不是1:1了。咱們用dpr 設備像素縮放比來表示。爲PC端的時候，dpr的值爲1，在手機上dpr的值爲多少呢？對於手機屏幕來講，750px的頁面寬度是一個安全的最大寬度，保證了移動端頁面兩邊不會留白。注意這裏的px是css邏輯像素，與設備的物理像素是有區別的。
筆者作移動端佈局的時候，喜歡用flex佈局。
在頭部引進rem.js
new function() {
var _self = this
_self.width = 750// 設置默認最大寬度
_self.fontSize = 100// 默認字體大小
_self.widthProportion = function() {
var p = (document.body && document.body.clientWidth || document.getElementsByTagName('html')[0].offsetWidth) / _self.width; return p < 0.5 ? 0.5 : (p > 0.75 ? 0.75 : p)
}
_self.changePage = function() {

document.getElementsByTagName('html')[0].setAttribute('style', 'font-size:' + _self.widthProportion() * _self.fontSize + 'px !important')

}
_self.changePage()
window.addEventListener('resize', function() { _self.changePage() }, false)
}()
好比UI圖中一個div,寬度是750px，高度爲10px,裏面的字體大小爲15px；
那麼咱們能夠這樣寫
div{
width:7.5rem;
height:0.1rem;
font-size:15px;
}
接下來關於flex佈局https://www.cnblogs.com/smart-girl/p/9101364.html