這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹移動(dòng)端html5開(kāi)發(fā)的知識(shí)點(diǎn),文章內(nèi)容步步緊湊,希望大家根據(jù)這篇文章可以有所收獲。
我們提供的服務(wù)有:成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、慈溪ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的慈溪網(wǎng)站制作公司1.開(kāi)發(fā)移動(dòng)端,頭部必要的配置
<meta name=" viewport " content=" width =device-width,initial-scale=1,user- scala ble=no">(各 屬性 值不在介紹,在開(kāi)發(fā)中小米(2016年小米4)測(cè)試user-scalable=no是不起作用的)
font-size,開(kāi)發(fā)過(guò)程中是用Js計(jì)算的。
公式 320/100=屏幕尺寸/fontSize值
3.需要點(diǎn)擊跳轉(zhuǎn),語(yǔ)義標(biāo)簽是a(dispaly:block;)
在語(yǔ)義化考慮的情況下a標(biāo)簽中添加一個(gè)span(disply:block),span中在添加容器
4.為了用戶(hù)友好體驗(yàn),在開(kāi)發(fā)移動(dòng)端頁(yè)面時(shí)候設(shè)置大寬度和最小寬度。如
{ max-width :640px; min-width :320px; }
5.移動(dòng)端開(kāi)發(fā)頁(yè)面一些默認(rèn)樣式
禁止a標(biāo)簽背景
a,button,input,optgroup,select,textare{ // 去掉a,input,button點(diǎn)擊時(shí)藍(lán)色外邊框和灰色半透明 -webkit-tap-highlight-color:rgba(0,0,0,0); }
禁止長(zhǎng)按a,img標(biāo)簽出現(xiàn)菜單欄
a,img{ // 禁止長(zhǎng)按顯示菜單欄 -webkit-touch-c all out:none; } 流暢滾動(dòng) body{ -webkit- overflow -scrolling:touch; }
6.單行截取
7.calc的使用,不考慮低版本(ie11以下安卓56以下,opera所有)兼容性,建議使用,方便。
8.box-sizing的使用,解決不同瀏覽器盒模型的展現(xiàn)不一致。(移動(dòng)端常用)
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.水平垂直居中(移動(dòng)端常用)
缺點(diǎn):需要知道小容器的寬度和高度
格式
<p class="parent"> <p class="child"></p> </p> .parent{ position :relative; width:100px; height:100px; background-color :red; } // 注意是四個(gè)方向都是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è)置(移動(dòng)端常用)
normal:默認(rèn),自動(dòng)分配合理的行間距
number設(shè)置數(shù)字,會(huì)與當(dāng)前字體尺寸相乘來(lái)設(shè)置,即倍數(shù)
length設(shè)置固定行間距
%基于當(dāng)前字體尺寸的百分比行間距
inherit從父元素繼承過(guò)來(lái)
記住下面公式,利用排除Bug
空白間距=lineHeight - fontSize
設(shè)置父元素的line-height為100%就可以沒(méi)有留白
11.vertical-align調(diào)整圖標(biāo)垂直居中(移動(dòng)端常用)
baseline:內(nèi)容與父元素基線對(duì)齊
sub:元素基線與父元素下標(biāo)基線對(duì)齊
super:元素基線與父元素上標(biāo)基線對(duì)齊
top:元素及其后代頂端與整行頂端對(duì)齊
text-top:元素頂端與父元素字體的頂端對(duì)齊
middel:元素中線與父元素的基線對(duì)齊
bottom:元素及其后代底端與整行的底端對(duì)齊
text-bottom:元素底端與父元素字體的底端對(duì)齊
percentage:百分比指定偏移量?;€是0%
length:數(shù)值方式,基線是0(常用)
12.flex的使用
使用flex時(shí)候,如果兩列不是平均分配,試試給width設(shè)置為0
到此為止, 關(guān)于移動(dòng)端html5開(kāi)發(fā)的知識(shí)點(diǎn)有了一個(gè)基礎(chǔ)的認(rèn)識(shí), 但是對(duì)于具體的使用方法還是需要多加鞏固和練習(xí),如果想了解更多相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊。
當(dāng)前名稱(chēng):移動(dòng)端html5開(kāi)發(fā)的知識(shí)點(diǎn)-創(chuàng)新互聯(lián)
文章位置:http://bm7419.com/article36/dicppg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站營(yíng)銷(xiāo)、品牌網(wǎng)站建設(shè)、微信公眾號(hào)、域名注冊(cè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容