一岩榆、首先確認(rèn)一點(diǎn)错负,
Flexlible是一種讓頁面能適配眾多不同的手機(jī)終端設(shè)備的一種方案,而flex是頁面的一種布局方式勇边。兩者沒有任何關(guān)聯(lián)犹撒。
二、Flexlble的思路
讓終端的根font-size都是終端寬度的十分之一粒褒。
設(shè)計(jì)師給的設(shè)計(jì)圖也都縮小十分之一识颊。
在寫代碼的時(shí)候利用 ? rem ? 去計(jì)算相應(yīng)的寬、高奕坟、或者字體
(假設(shè)設(shè)計(jì)圖750px的寬祥款,則其十分之一為75px。設(shè)備中的寬為X(不同手機(jī)不一樣月杉,用X表示)刃跛,
設(shè)計(jì)X/值= 設(shè)備X/值未知 )
(大多數(shù)情況下字體是取具體是像素值,但不同的dpr其取值的方式不同苛萎,后面會(huì)有介紹)
這樣就能保證在不同的手機(jī)中桨昙,其寫的頁面都是相對每個(gè)手機(jī)的設(shè)備寬的十分之一進(jìn)行計(jì)算跌帐。其對應(yīng)的位置、大小也就做到都一致的呈現(xiàn)效果
三绊率、安裝build插件
目的:讓不同型號的手機(jī)的根font-size都是其屏幕寬的十分之一
新建一個(gè)文件夾谨敛,直接將下載的 ? build ?解壓縮放入在html同級目錄下
在flexlible.html中將如下 ? script ? 復(fù)制
<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js></script>
四、安裝 cssrem-maste 插件
目的:讓計(jì)算機(jī)自己去計(jì)算設(shè)計(jì)圖的像素在代碼中的rem值
自己計(jì)算相應(yīng)的寬滤否、高脸狸、或者字體 的rem很麻煩,可安裝一個(gè)插件解決
打開Submit
如下圖找到對應(yīng)位置
打開Browse Rackages...
將下載的 ?cssrem-master直接拖到這個(gè)文件夾就可以了(一種快捷的安裝方式)
再將 ? cssrem-master ?里的如下文件打開
75:設(shè)計(jì)圖的寬度的十分之一
6:計(jì)算的 ? rem ?保留到小數(shù)點(diǎn)后幾位
注意:
1藐俺、
關(guān)于iphon手機(jī)的 ? data-dpr為2 或者3 ?使其手機(jī)圖像顯示更清晰的問題:
它們把放入的圖片大小 ? 為(data-dpr=1) 放入圖片大小的兩倍(或三倍)炊甲。
再將圖片縮小兩倍(或三倍)。
所以欲芹,放入的圖片直接為二倍或三倍圖就好卿啡,系統(tǒng)會(huì)自動(dòng)將圖片縮小。
2菱父、
有些時(shí)候颈娜,會(huì)想保證字體的大小是固定不變的。直接給其具體像素值就好浙宜。
為了配合iphone的 ?dpr ?會(huì)相應(yīng)將字體也設(shè)置為原來的兩倍(三倍)官辽。