TZ : 看問(wèn)題的角度是很重要的,有的擅長(zhǎng)多角度被稱為聰明,有的人從始至終固執(zhí)己見被稱為死腦筋,一事無(wú)成
一 : 科普一分鐘
我們熟悉了在PC端進(jìn)行開發(fā)網(wǎng)頁(yè),相對(duì)于移動(dòng)設(shè)備需要有哪些調(diào)整呢,才能設(shè)計(jì)出符合各個(gè)場(chǎng)景和機(jī)型的完美移動(dòng)網(wǎng)頁(yè).在眾多APP 中大多嵌入H5頁(yè)面開發(fā),所以解決適配的問(wèn)題很重要.其實(shí)和移動(dòng)的原生適配想通,網(wǎng)頁(yè)適配很多也是用到比例或者說(shuō)是百分比來(lái)解決一下棘手問(wèn)題.但是還有更多的細(xì)致技巧,下面一一列舉.
二:教你用 python 創(chuàng)建局域網(wǎng)絡(luò)
首先我們做移動(dòng)適配,首先咱們要把材料準(zhǔn)備全,把網(wǎng)頁(yè)端做好了,但是我們需要一個(gè)載體來(lái)解決移動(dòng)端顯示問(wèn)題.
要想移動(dòng)端顯示我們做的網(wǎng)頁(yè)下面幾種通俗方式,但是只適合有條件的同學(xué)
(1).購(gòu)買空間域名
上傳頁(yè)面到服務(wù)器,綁定這個(gè)服務(wù)器的域名.通過(guò)購(gòu)買服務(wù)商的空間和域名.或者通過(guò)購(gòu)買云服務(wù)來(lái)獲取在線服務(wù),如阿里云,新浪云,騰訊云等等
(2)本地測(cè)試的話在PC架設(shè)IIS或者Apache,借助局域網(wǎng)來(lái)實(shí)現(xiàn)手機(jī)訪問(wèn).
如果大家覺(jué)得還是太麻煩了,那么只能教大家一種30秒搭建局域網(wǎng)的方法了
(3)
因?yàn)槲业氖荕AC所以拿來(lái)舉例,首先打開終端檢查一下版本
python --version
然后選擇你想共享的文件夾
cd 你想共享的文件夾
為共享文件設(shè)置端口
python -m SimpleHTTPServer 9000
最后打開手機(jī)輸入電腦IP地址進(jìn)行訪問(wèn)(拿我電腦地址舉例)
192.168.10.235:9000
是不是很簡(jiǎn)單,材料準(zhǔn)備好,下面研究一下具體適配問(wèn)題.
三 : Viewport設(shè)置
為了使桌面頁(yè)面能夠在移動(dòng)端正常顯示,移動(dòng)端瀏覽器虛擬出了叫viewport的顯示窗口,在不同設(shè)備中這一顯示窗口的大小不同,iOS設(shè)備為980像素,windowsPhone的寬度為1024像素.
為了使移動(dòng)設(shè)備能夠完整地顯示網(wǎng)頁(yè),盡可能不出現(xiàn)橫向滾動(dòng)條,viewport往往被瀏覽器自動(dòng)加以縮放以適應(yīng)屏幕寬度,例如將本身虛擬顯示980像素寬的頁(yè)面顯示窗口加以縮小,使其顯示在320像素的屏幕中.
在移動(dòng)頁(yè)面我們可以在<head>中添加meta標(biāo)簽,對(duì)viewport專門加以設(shè)置.
<meta name = "viewport" content="width=device-width,initial-scale=1.0 user-scalable = no , maximum-scale=1.0">
首先看一下沒(méi)有上述代碼的效果
再看一下有上述代碼的效果
分析:設(shè)置viewport首先適配了設(shè)備的寬度即為窗口的寬度,默認(rèn)窗口不縮放,以 1:1的比例提供移動(dòng)頁(yè)面瀏覽.用戶不可縮放,縮放最大值為1,相當(dāng)于鎖定頁(yè)面的縮放.避免用戶觸屏?xí)r影響瀏覽效果,
四 : 百分比布局
和寫原生APP的相對(duì)布局一樣,移動(dòng)端頁(yè)面開發(fā)很多用到百分比
我們先做一個(gè)小頁(yè)面然后規(guī)定它的不同約束 ,首先創(chuàng)建6個(gè)標(biāo)簽圖片.
<div class="comic">
<img src = "fate.png" alt="Fate">
<h1>Fate</h1>
</div>
<div class="comic">
<img src = "hulk.png" alt="Hulk">
<h1>Hulk</h1>
</div>
<div class="comic">
<img src = "superman.png" alt="Superman">
<h1>Superman</h1>
</div>
<div class="comic">
<img src = "captain.png" alt="Captain">
<h1>Captain</h1>
</div>
<div class="comic">
<img src = "wonder.png" alt="Wonder">
<h1>Wonder</h1>
</div>
<div class="comic">
<img src = "ironman.png" alt="Ironman">
<h1>Ironman</h1>
</div>
頁(yè)面效果
(1)頁(yè)面內(nèi)外間距清零,字體和背景色,并且兩列輸出
*{
margin:0;
padding:0;
}
body{
background:#f3f2ef;
font-family:Tahoma, Geneva, sans-serif;
}
.comic{
width:50%;
text-align:center;
float:left;
background:#e5e8e1;
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
padding:30px 0;
margin: 10px 4%;
}
(2)三列
同理只需要改width
.comic{
width:33.33%;
text-align:center;
float:left;
background:#e5e8e1;
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
padding:30px 0;
margin: 10px 4%;
}
但是圖片的大小是不變的當(dāng)我們縮小到一定程度就會(huì)有所擠壓,用比例解決圖片擠壓?jiǎn)栴}
.comic img{
width:60%;
}
解決文字的自適應(yīng)問(wèn)題 vw 和 vh 相對(duì)字體大小單位來(lái)解決
.comic h1{
color:#666;
font-weight:normal;
font-size:5vw;
}
在 vw 相對(duì)體系中,默認(rèn)將整個(gè)viewport的寬度設(shè)置為100vw,以此相對(duì)換算文字的大小.
(3)想要兩列,并且距離上邊,左邊和右邊有等距的距離,這種情況我們要把奇數(shù)的右側(cè)margin清零 用 nth-child偽類選擇器
.comic:nth-child(even){
margin-left:0;
}
width:44%;
text-align:center;
float:left;
background:#e5e8e1;
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
margin:10px 4%;
效果圖
四 : Flexbox 彈性布局
了解 Flexbox 又成為彈性框布局- Flexible Box Model.在傳統(tǒng)的定位方式各種float屬性,浮動(dòng)對(duì)于移動(dòng)來(lái)說(shuō)就是對(duì)渲染性能的消耗,在Flexbox提升了移動(dòng)的效能,我們不必去考慮 marg,padding,width,height這些煩人的東西,一切由Flexbox處理
同樣是上面頁(yè)面 接下來(lái)用Flexbox處理
body{
background:#f3f2ef;
font-family:Tahoma, Geneva, sans-serif;
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
flex-wrap:wrap;
}
上下排列
body{
-webkit-flex-direction:column;
flex-direction:column;
}
可以去掉所以float marg width
.comic{
text-align:center;
background:#e5e8e1;
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
padding:30px 0;
}
倒敘顯示
body{
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
橫向,同理很簡(jiǎn)單
body{
-webkit-flex-direction:row;
flex-direction:row;
}
伸縮方式
參數(shù)分析 : 參數(shù) 1 : flew-grow 決定伸縮元素可擴(kuò)展空間的分配,1表示每個(gè)元素的可擴(kuò)展控件大小相等;
參數(shù) 2 :flew-shrink 決定來(lái)定義當(dāng)元素超過(guò)容器的大小后的壓縮比例,1 表示每個(gè)元素的壓縮能力相同
參數(shù) 3 : flew-basis 定義伸縮的基準(zhǔn)值,auto即自動(dòng)分配空間.
.comic{
/*已完成代碼*/
-webkit-flex:1 1 atuo;
flex:1 1 auto;
}
設(shè)置換行屬性
body{
flex-direction:row;
flex-wrap:wrap;
}
五:雪碧圖
了解:移動(dòng)網(wǎng)頁(yè)中不能并行下載,只能串行完成一一下載等操作,因此多張圖片的下載時(shí)長(zhǎng)會(huì)很大.為了解決這一問(wèn)題,我們會(huì)用 CSS Sprites 也被稱為雪碧圖
首先我們利用 Photoshop 來(lái)制作一張雪碧圖.
還是看代碼
<ul>
<li>Weather</li>
<li>Feature</li>
<li>Phone</li>
<li>Notebook</li>
</ul>
預(yù)處理
*{
margin:0;
padding::0;
font-family:Tahoma, Geneva, sans-serif;
}
li{
font-size:32px;
color:#565656;
border-bottom::1px solid #ccc;
line-height:120px;
text-indent:130px;
position:relative;
}
接下來(lái)通過(guò)在每個(gè) li 節(jié)點(diǎn)前面插入 before偽元素來(lái)作為icon顯示容器,在偽元素中,我們將 content屬性設(shè)置為空,使其不顯示內(nèi)容,并設(shè)置寬高.并設(shè)置sprite.png 我們制作好的雪碧圖 當(dāng)作背景圖片.
li::before{
content:"";
width:96px;
height:100px;
background:url(sprite.png) no-repeat;
position:absolute;
top:18px;
left:12px;
}
效果圖
最后通過(guò)改變垂直位置完成最終顯示
li:nth-child(1)::before{
background-position:0 0;
}
li:nth-child(2)::before{
background-position:0 -100px;
}
li:nth-child(3)::before{
background-position:0 -200px;
}
li:nth-child(4)::before{
background-position:0 -300px;
}
效果圖
解析: 通過(guò)在垂直方向移動(dòng) -100像素,來(lái)完成分段顯示.
六:移動(dòng)交互和調(diào)試技巧
(1)交互
當(dāng)手指替換成了鼠標(biāo),有了哪些新的交互方法和定義呢.
首先我們寫一個(gè)控件 class = "submit",這個(gè)現(xiàn)在都沒(méi)問(wèn)題了應(yīng)該,跳過(guò)此步驟,直接去完成交互代碼部分.
為submit 元素注冊(cè)事件監(jiān)聽 當(dāng)手指觸摸時(shí)候觸發(fā)
submit.addEventListener("touchstart",submitForm);
function submitForm(){
//功能代碼
}
在觸發(fā) touchstart事件同時(shí)也會(huì)產(chǎn)生一個(gè)event對(duì)象,我們可以求出觸摸點(diǎn)的個(gè)數(shù)
submit.addEventListener("gesturestart",editForm);
function submitForm(event){
submit.innerHTML = "觸摸點(diǎn)個(gè)數(shù)為" + event.touches.length;
}
獲取觸摸點(diǎn)的x ,y 屬性, pageX pageY
function submitForm(event){
submit.innerHTML = "觸摸點(diǎn)x位置" + event.touches[0].pageX;
}
獲取用戶正在操作姿勢(shì) 會(huì)不斷觸發(fā) gesturechange事件
submit.addEventListener("gesturechange",changeForm);
function changeForm(event){
submit.innerHTML = "手指的旋轉(zhuǎn)度為" + event.rotation + ",縮放值"+event.scale;
(2)調(diào)試技巧
以iOS為例子,蘋果為我們提供了一套有效的移動(dòng)調(diào)試方案, 設(shè)置 ->Safari->"高級(jí)"
接下來(lái)在 iphone 的Safari 訪問(wèn)頁(yè)面
然后切換到Mac-Safari-開發(fā)中,對(duì)頁(yè)面調(diào)試,我們可以直接修改調(diào)試節(jié)點(diǎn)元素,iphone 會(huì)做出相應(yīng)的反應(yīng).
有了如此直觀的調(diào)試工具,制作移動(dòng)端頁(yè)面的效率大大提高.
七 : 總結(jié)
之所以要進(jìn)行移動(dòng)端的適配,就是因?yàn)镻C和移動(dòng)兩者的分辨率存在明顯差別.對(duì)于移動(dòng)端,屏幕尺寸小得多,而桌面頁(yè)面是橫向的,移動(dòng)端是縱向的.
兩者文件的大小尺寸也有不同,太大的頁(yè)面對(duì)于移動(dòng)流量有很大壓力,需要加載時(shí)間也很長(zhǎng),因此要盡量精簡(jiǎn),進(jìn)行適配.
兩者性能不同,桌面需要更好的渲染,特效,特性,而移動(dòng)需要的相對(duì)要低很多.
兩者的交互方式不同,移動(dòng)是用手指觸發(fā)事件,而PC是用鼠標(biāo)鍵盤來(lái)操作.兩者的差異還存在于兼容性 等等的各個(gè)地方,所以做適配是必要的選擇.簡(jiǎn)單的敘述了移動(dòng)端H5的適配.
