国模大胆无码私拍啪啪AV,日本胸大公妇被公侵犯中文字幕,天堂无码人妻精品一区二区三区,国产精品18禁污污网站

鄭州APP開(kāi)發(fā)
鄭州APP開(kāi)發(fā)電話(huà)
網(wǎng)站開(kāi)發(fā)-移動(dòng)H5開(kāi)發(fā)入門(mén)知識,CSS的單位匯總與用法
2017-03-07

移動(dòng)H5開(kāi)發(fā)入門(mén)知識,CSS的單位匯總與用法

網(wǎng)站移動(dòng)端的使用效率是一個(gè)什么情況,相信做過(guò)運營(yíng)的朋友都知道,一般占比在90%以上,因此移動(dòng)開(kāi)發(fā)是我們這些網(wǎng)站開(kāi)發(fā)從業(yè)者必備的基本技能,下面分享一些日程網(wǎng)站開(kāi)發(fā)中的一些總結。
說(shuō)到css的單位,大家應該首先想到的是px,也就是像素,我們在網(wǎng)頁(yè)布局中一般都是用px,但是近年來(lái)自適應網(wǎng)頁(yè)布局越來(lái)越多,em和百分比也經(jīng)常用到了。然后隨著(zhù)手機的流行,web app和hybrid app的開(kāi)發(fā),都用到了css3技術(shù),在css3中,新增了許多單位,rem、vw和vh、vmin和vmax、ch和ex等等,那現在對這些單位分別做一下詳細的介紹吧。

1、em

做前端的應該對em不陌生,不是什么罕見(jiàn)的單位,是相對單位,參考物是父元素的font-size,具有繼承的特點(diǎn)。如果字體大小是16px(瀏覽器的默認值),那么 1em = 16px。

不過(guò),這樣使用很復雜,很難很好的與px進(jìn)行對應,因此,前端開(kāi)發(fā)的前輩們總結了一個(gè)經(jīng)驗

body {
font-size: 62.5%;
}

那么,這樣之后 1em = 10px 在布局等使用的時(shí)候好換算了很多。

2、百分比

百分比相信大家更不會(huì )陌生了,百分比一般寬泛的講是相對于父元素,但是并不是十分準確。

1、對于普通定位元素就是我們理解的父元素

2、對于position: absolute;的元素是相對于已定位的父元素(offset parent)

3、對于position: fixed;的元素是相對于 ViewPort

viewport:可視窗口,也就是瀏覽器的window那么大。

例外情況

1、使用了padding、margin 等,實(shí)際百分比和你想要的百分比是有區別的。(關(guān)于這個(gè),解決方法之一,就是我們可以使用css3的calc()屬性,具體,您請繼續往下看,在文章最后我會(huì )解釋。)

2、line-height百分比的一些情況,通常結果是百分比 計算后的值。(關(guān)于這個(gè),您請繼續往下看。。。)

3、rem

rem支持IE9及以上,意思是相對于根元素html(網(wǎng)頁(yè)),不會(huì )像em那樣,依賴(lài)于父元素的字體大小,而造成混亂。使用起來(lái)安全了很多。

html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%    1rem = 10px   **/}   
body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}
h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}

這樣整個(gè)網(wǎng)頁(yè)都會(huì )比較統一!不會(huì )造成混亂!

4、vh 和 vw

IE10+ 和現代瀏覽器都支持這兩個(gè)單位。

vw Viewport寬度, 1vw  等于viewport寬度的1%

vh Viewport高度, 1vh  等于viewport高的的1%

vw和vh會(huì )隨著(zhù)viewport變化自動(dòng)變化,再也不用js控制全屏了。

甚至有些人喪心病狂的字體大小都用vw和vh控制,來(lái)達到字體和viewport大小同步的效果。

5、vmin和vmax

IE10+ 和現代瀏覽器都已經(jīng)支持vmin

webkit瀏覽器之前不支持vmax,新版已經(jīng)支持,所有現代瀏覽器已經(jīng)支持,但是IE 全部  不支持vmax

vmin vw和vh中比較  的值

vmax vw和vh中比較  的值

這兩個(gè)屬性也會(huì )隨著(zhù)viewport變化

6、ch和ex

IE9+ 和現代瀏覽器都已經(jīng)支持,這兩個(gè)單位時(shí)根據 當前font-family  的相對單位。

ch 字符0的寬度

ex 小寫(xiě)字符x的高度

如下圖:

<iframe frameborder="0" id="iframe_0.8958783512935042" scrolling="no" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=http://www.cnmcafee.cn/uploadfile/2017/0307/20170307105033729.jpg!web?_=6512705%22%20style=%22border:none;max-width:1571px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.8958783512935042',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" style="border-style: none; border-width: initial; width: 500px; height: 304px;"></iframe>

當font-family改變的時(shí)候這兩個(gè)單位的值也會(huì )變化,不同字體表現的樣式不一樣。

第二部分移動(dòng)H5開(kāi)發(fā)入門(mén)知識:CSS3的新單位算法

A、css3的calc()。

上面我們已經(jīng)提到了calc(),下面我們就具體說(shuō)一說(shuō)吧!

瀏覽器支持IE9+、FF4.0+、Chrome19+、Safari6+

calc()語(yǔ)法非常簡(jiǎn)單,就像我們小時(shí)候學(xué)加 (+)、減(-)、乘(*)、除(/)一樣,使用數學(xué)表達式來(lái)表示:

.haorooms {
  width: calc(expression);
}

這樣padding和margin和百分比一起用,問(wèn)題就可以解決了。

例如,我們margin是20px。那么我們就可以寫(xiě)成

.haorooms{
  width: calc(100% - 20px);  //注:減號前后要有空格,否則很可能不生效??!
}

也可以這么用:

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
     width: 90%;/*寫(xiě)給不支持calc()的瀏覽器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

B、line-height百分比

line-height百分比在面試中可能經(jīng)常問(wèn)到。例如你知道line-height:120%和line-height:1.2的區別嗎?

現在就說(shuō)一下行高帶單位和不帶單位的區別,例如下面的例子:

line-height:26px; 表示行高為26個(gè)像素
line-heigth:120%;表示行高為當前字體大小的120%
line-height:2.6em; 表示行高為當前字體大小的2.6倍

帶單位的行高都有繼承性,其子元素繼承的是計算值,如父元素的字體大小為14px,定義行高line-height:2em;則計算值為 28px,不會(huì )因其子元素改變字體尺寸而改變行高。(例如:父元素14px,子元素12px,那么行高就是28px,子元素雖然字體是12,行高還是父元素的行高)

line-height:2.6;表示行高為當前字體大小的2.6倍

不帶單位的行高是直接繼承,而不是計算值,如父元素字體尺寸為14px,行高line-height:2;他的行高為28px;子元素尺寸為12px,不需要再定義行高,他默認的行高為24px。(例如:子元素12px,他的行高是24,不會(huì )繼承父元素的28)

希望以上的這些移動(dòng)H5開(kāi)發(fā)入門(mén)知識點(diǎn),對各位的H5前端開(kāi)發(fā)學(xué)習有一定的幫助. 網(wǎng)站開(kāi)發(fā)者開(kāi)拓者科技會(huì )在以后的工作學(xué)習供多總結分享。


訪(fǎng)問(wèn)手機端更方便