移動(dòng)端適配中，我所了解的兩種解決方案
Media Query（由于比較繁瑣，我在開(kāi)發(fā)中已經(jīng)使用很少了）：
-
：
為不同寬度的屏幕寫不同的樣式橘茉，讓用戶使用不同設(shè)備訪問(wèn)同一個(gè)網(wǎng)站的時(shí)候除嘹，都能夠得到更好的UI、UE體驗(yàn)又碌。其典型的代表就是 Bootshrap 之類的響應(yīng)式框架了九昧，此類框架多如牛毛，技術(shù)實(shí)現(xiàn)也相對(duì)簡(jiǎn)單毕匀，只需要開(kāi)發(fā)者為不同的用戶開(kāi)發(fā)不同的UI界面就行了,相對(duì)rem布局铸鹰，Media Query布局只能通過(guò)使用%單位來(lái)自適應(yīng)寬度，高度無(wú)法自適應(yīng)皂岔。并且為了增強(qiáng)不同屏幕寬度下的用戶體驗(yàn)蹋笼，必須花很多的功夫多寫幾套布局來(lái)適配部分屏幕會(huì)有如下幾種問(wèn)題：- 無(wú)法適配所有的屏幕；
- 適配屏幕數(shù)量越多，工作量越繁重剖毯；
- 如果將為不同屏幕的樣式分開(kāi)寫圾笨，各個(gè)css文件中會(huì)有重復(fù)的部分，不利于代碼復(fù)用逊谋，不分開(kāi)寫擂达，代碼有限的繁雜，可讀性較低胶滋；
rem：
-
rem：
根據(jù)HTML根節(jié)點(diǎn)（html節(jié)點(diǎn)）的字體大小來(lái)確定rem的單位長(zhǎng)度板鬓。
-
flexible.js
根據(jù)屏幕寬度確定html 節(jié)點(diǎn)的 font-size ，根據(jù) 手機(jī)dpr值設(shè)定 Viewprot scale的值
如下：iphone5s的 viewport 設(shè)置代碼 （flexible.js自動(dòng)生成）
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
本文主要來(lái)講我現(xiàn)在一直采用的 flexible.js+rem解決方案 以及其他一些移動(dòng)端需要注意的地方
先來(lái)一個(gè)例子
首先項(xiàng)目結(jié)構(gòu)
┌scss┐
│ ├ common ┐
│ │ ├ _public.scss
│ │ ├ _common.scss
│ │ ├ ……
│ └ style.scss
├css┐
│ └style.css
├js ┐
│ ├ plugs┐
│ │ ├ felxible.js
│ ├
├img ┄
├config.rb
└html┐
├ index.html
├ ……
_public.scss //_ 符號(hào)究恤，寫在scss文件前面穗熬，在 compass watch命令下 文件不會(huì)被編譯
這個(gè)文件主要用來(lái)存放，rem（） px轉(zhuǎn)像素的函數(shù)丁溅，以及一些公共的顏色變量唤蔗，可復(fù)用的樣式等！
詳細(xì)配置請(qǐng)?zhí)D(zhuǎn)移動(dòng)端適配——REM等比縮放學(xué)習(xí)總結(jié)
**_common.scss **
主要用來(lái)引入compass/reset模塊 窟赏，同時(shí)引入_public.scs文件
style.scss
@charset "utf-8"; //設(shè)置scss文件字符編碼 妓柜，每個(gè)scss文件都需要
@import "compass/css3"; //引入 compass的css3模塊
@import "common/_common.scss"; // 引入 預(yù)先編寫的 _common.scss 文件
body{
width:10rem; //定義body的寬度充滿全屏，在_public.scss 文件 和 flexible.js 文件 //里面是將移動(dòng)端屏幕平均劃分為 10等分涯穷。沒(méi)一份為 1rem棍掐；
}
header{
width:10rem;
height:rem(96); //此處嘉定設(shè)計(jì)的標(biāo)題欄高度為 96px ，所以寫法是將 96px 的數(shù)值
//傳入rem（） 函數(shù)中 拷况，scss在編譯的時(shí)候回自動(dòng)將其編譯成rem值
}
index.html
<!DOCTYPE html> <!-- -->
<html>
<head>
<meta charset="UTF-8">
<!-- 設(shè)置字符編碼 -->
<meta name='apple-touch-fullscreen' content='yes'>
<!-- 設(shè)置在蘋果手機(jī)上以應(yīng)用模式啟動(dòng)時(shí)作煌，是否全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios 系統(tǒng) 作用未知 -->
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
<!-- iso 系統(tǒng) 作用未知 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- iso 系統(tǒng) 作用未知 -->
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<!-- 是否識(shí)別 手機(jī)號(hào)碼、 電子郵件 地址 等-->
<title>演示</title>
<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入 flexible.js 必須在css之前引入 赚瘦，否則會(huì)引起屏幕閃爍 -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- 引入編譯好的css -->
</head>
<body>
</body>
</html>
好了基本設(shè)置完畢粟誓，可以放心的使用量到的px值來(lái)寫布局了。其他的flexible.js 和 compass 會(huì)幫你搞定
請(qǐng)注意如下部分
_common.scss中
body{
background-color: #eee;
width: 10rem;
max-width: 10rem; //為了屏幕超出了寬度后起意，頁(yè)面最大值為10rem
margin: 0 auto; // 屏幕超寬后 body內(nèi)容居中顯示
font-size: $font22;
font-family:Helvetica,STHeiti,sans-serif;
color: #333333;
@include user-select(text); //用戶選擇操作限制 鹰服，避免用戶選擇文本以外的范圍
@include opacity(0); //入場(chǎng)動(dòng)畫初始值設(shè)定
@include transition(all 0.5s); //入場(chǎng)動(dòng)畫效果設(shè)定
}
input,button,select{ //去掉安卓 和蘋果給定的默認(rèn)效果，方便自定義
border: none;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color:rgba(255,255,255,0);
font-size: $font20;
}
項(xiàng)目開(kāi)始編寫前 揽咕，請(qǐng)?jiān)?項(xiàng)目根目錄 也就是 config.rb 目錄下 啟動(dòng)命令行窗口 （PS：shift+鼠標(biāo)右鍵） 并且輸入 compass watch 命令悲酷，來(lái)監(jiān)聽(tīng)scss文件變化 ，在每次保存scss 文件的時(shí)候亲善，compass會(huì)自動(dòng)編譯 scss文件夾中的文件到css目錄下
現(xiàn)行移動(dòng)端多屏幕適配方案有Media Query（媒介查詢） 和 rem兩種设易，相對(duì)于Media Query來(lái)說(shuō) ，Rem 中 flexible.js 更適合懶人操作蛹头。
問(wèn)題：
通常設(shè)計(jì)圖的單位都是px顿肺，而我們使用rem單位之后戏溺，就涉及到了，px單位轉(zhuǎn)換為rem單位挟冠；
在頁(yè)面加載的時(shí)候，可能會(huì)出現(xiàn)一次閃動(dòng)
px單位轉(zhuǎn)rem單位解決方法
style.scss
//設(shè)計(jì)圖寬度 640px 等分為10等分
/**
* rem單位長(zhǎng)度
*/
$fontSize: 64;
/**
* 將px數(shù)值轉(zhuǎn)換成rem數(shù)值的函數(shù)
* @param $n px數(shù)值
*/
@function rem($n) {
@return ($n / $fontSize) * 1rem;
}
div{
width:rem(640);
height:rem(128);
}
參數(shù)說(shuō)明：
$fontSize rem單位長(zhǎng)度袍睡，這是理想狀態(tài)下的數(shù)值知染，根據(jù)設(shè)計(jì)圖確定，計(jì)算方法：
設(shè)計(jì)寬度/等分份數(shù)$n px數(shù)值,有設(shè)計(jì)標(biāo)注 斑胜，或者控淡，頁(yè)面制作前自己標(biāo)注。
style.css
div{
width:10rem;
height:2rem;
}
經(jīng)過(guò)compass編譯之后會(huì)得到如上圖的結(jié)果
當(dāng)然止潘，flexible.js 也是需要設(shè)置的掺炭，如下圖部分?jǐn)?shù)值需要和scss中函數(shù)的數(shù)值對(duì)應(yīng)
function t() {
var t = o.getBoundingClientRect().width;
t / i > 640 && (t = 640 * i), e.rem = t / 10, o.style.fontSize = e.rem + "px"
}
圖中有兩個(gè)640的數(shù)值，此處對(duì)應(yīng)的是設(shè)計(jì)圖寬度為640凭戴，
另有一處數(shù)值為10意思是將屏幕分為10等分涧狮，
次數(shù)兩個(gè)數(shù)值 能得上文中
$fontSize = 640/10 = 64;
加載時(shí)屏幕閃動(dòng)的問(wèn)題
講flexlibe.js文件放置在css樣式文件之前加載，這樣能夠有效的減少屏幕閃動(dòng)情況的出現(xiàn)
父文中么夫，有關(guān)于compass 以及 flexible.js下載地址或相關(guān)介紹
前端技術(shù) App開(kāi)發(fā)記
