這篇文章運用簡單易懂的例子給大家介紹移動端html5開發(fā)的知識點，文章內(nèi)容步步緊湊，希望大家根據(jù)這篇文章可以有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、慈溪ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的慈溪網(wǎng)站制作公司

1.開發(fā)移動端，頭部必要的配置

<meta name="
viewport
" content="
width
=device-width,initial-scale=1,user-
scala
ble=no">（各
屬性
值不在介紹，在開發(fā)中小米（2016年小米4）測試user-scalable=no是不起作用的）

font-size,開發(fā)過程中是用Js計算的。
公式 320/100=屏幕尺寸/fontSize值
3.需要點擊跳轉(zhuǎn)，語義標(biāo)簽是a（dispaly:block;）
在語義化考慮的情況下a標(biāo)簽中添加一個span(disply:block)，span中在添加容器
4.為了用戶友好體驗，在開發(fā)移動端頁面時候設(shè)置大寬度和最小寬度。如

{
 
max-width
:640px;
 
min-width
:320px;
}

5.移動端開發(fā)頁面一些默認(rèn)樣式
禁止a標(biāo)簽背景

a,button,input,optgroup,select,textare{
 // 去掉a,input,button點擊時藍色外邊框和灰色半透明
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

禁止長按a,img標(biāo)簽出現(xiàn)菜單欄

a,img{
 // 禁止長按顯示菜單欄
 -webkit-touch-c
all
out:none;
}
流暢滾動
body{
 -webkit-
overflow
-scrolling:touch;
}

6.單行截取

7.calc的使用，不考慮低版本（ie11以下安卓56以下，opera所有）兼容性，建議使用，方便。

8.box-sizing的使用，解決不同瀏覽器盒模型的展現(xiàn)不一致。（移動端常用）
content-box;默認(rèn)值標(biāo)準(zhǔn)模型，width和height不包括邊框內(nèi)邊距外邊距
padding-box;width和height包括內(nèi)邊距不包括邊框和外邊距
border-box;怪異模型width和height包括內(nèi)邊距和邊框，不包括外邊距。

9.水平垂直居中（移動端常用）
缺點：需要知道小容器的寬度和高度
格式

<p class="parent">
 <p class="child"></p>
</p>
.parent{
 
position
:relative;
 width:100px;
 height:100px;
 
background-color
:red;
}
// 注意是四個方向都是0
.child{
 position:absolute;
 
margin
:auto;
 
top
:0;
 
right
;0;
 
bottom
:0;
 
left
:0;
 width:50px;
 height:50px;
 background-color:gold;
}

10.line-height的設(shè)置（移動端常用）
normal:默認(rèn)，自動分配合理的行間距
number設(shè)置數(shù)字，會與當(dāng)前字體尺寸相乘來設(shè)置，即倍數(shù)
length設(shè)置固定行間距
%基于當(dāng)前字體尺寸的百分比行間距
inherit從父元素繼承過來
記住下面公式，利用排除Bug
空白間距=lineHeight - fontSize
設(shè)置父元素的line-height為100%就可以沒有留白

11.vertical-align調(diào)整圖標(biāo)垂直居中（移動端常用）
baseline:內(nèi)容與父元素基線對齊
sub:元素基線與父元素下標(biāo)基線對齊
super:元素基線與父元素上標(biāo)基線對齊
top:元素及其后代頂端與整行頂端對齊
text-top:元素頂端與父元素字體的頂端對齊
middel:元素中線與父元素的基線對齊
bottom:元素及其后代底端與整行的底端對齊
text-bottom:元素底端與父元素字體的底端對齊
percentage:百分比指定偏移量?；€是0%
length:數(shù)值方式，基線是0（常用）

12.flex的使用
使用flex時候，如果兩列不是平均分配，試試給width設(shè)置為0
到此為止, 關(guān)于移動端html5開發(fā)的知識點有了一個基礎(chǔ)的認(rèn)識, 但是對于具體的使用方法還是需要多加鞏固和練習(xí)，如果想了解更多相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊。

當(dāng)前名稱：移動端html5開發(fā)的知識點-創(chuàng)新互聯(lián)
文章位置：http://jinyejixie.com/article36/dicppg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站設(shè)計公司、網(wǎng)站營銷、品牌網(wǎng)站建設(shè)、微信公眾號、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)