1.移動(dòng)端開發(fā)視窗口的添加 h5端開發(fā)下面這段話是必須配置的 meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'> 其它相關(guān)配置內(nèi)容如下： - width viewport 寬度(數(shù)值/device-width)
- height viewport 高度(數(shù)值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否允許用戶縮放(yes/no)
- minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除）,，可以在頁面加載時(shí)最小化上下狀態(tài)欄,。
2.媒體查詢的改進(jìn) 之前在做移動(dòng)端開發(fā)的時(shí)候,，為了適配多屏幕,。使用的是rem 單位,。這個(gè)時(shí)候就需要根據(jù)屏幕的尺寸來來動(dòng)態(tài)的設(shè)置根節(jié)點(diǎn)html 的font-size 值。這樣可以解決多屏幕適配的問題,。 比如下面的 媒體查詢代碼 html { //iphone5 font-size: 62.5%; } @media (max-width: 414px) { html { //iphone6 font-size: 80.85%; } } @media (max-width: 375px) { html { //iphone6 font-size: 73.24%; } } 這樣做的結(jié)果,，有兩個(gè)很明顯的缺點(diǎn)。 - 適配屏幕的尺寸不是連續(xù)的,。
- 在自己的 css 文件中添加大段的這樣查詢代碼,。增加了 css 文件的體積。
后來參考淘寶移動(dòng)端頁面適配規(guī)則,，使用 js 獲取客戶端的寬度,，根據(jù)設(shè)計(jì)稿的原型動(dòng)態(tài)的計(jì)算font-size 的值。 詳細(xì)的內(nèi)容請(qǐng)看這里 根據(jù)iPhone6設(shè)計(jì)稿動(dòng)態(tài)計(jì)算rem值 3.a標(biāo)簽內(nèi)容語義化 大多數(shù)時(shí)候我們都會(huì)給一片區(qū)域加上點(diǎn)擊跳轉(zhuǎn)的功能,。如下圖： 很可能我們商品區(qū)域都是使用的div 標(biāo)簽,。很容易我們會(huì)給最外層加上一個(gè) a 標(biāo)簽。因?yàn)閍 是行內(nèi)元素,，是沒有寬和高的,。不能夠把容器撐開。 一種解決辦法就是給a 標(biāo)簽設(shè)置block 屬性,。如下： 功能上已經(jīng)沒有問題,。但是在語義化的層面上，上面的代碼是不標(biāo)準(zhǔn)的,。 最好的做法就是做如下的修改,這樣不會(huì)使自己的 html 代碼顯的太突兀： 4.為自己的頁面設(shè)置最大寬度和最小寬度 如果我們使用的是rem 單位,，使用 js 動(dòng)態(tài)計(jì)算font-size 值的話，我們可以無限適配最大和最小的終端屏幕,。但是當(dāng)用戶的屏幕超過一定的尺寸以后還繼續(xù)顯示h5頁面的話對(duì)用戶會(huì)很不友好,。 我們參看下京東和淘寶的h5 頁面 我們看到了都是定義了頁面的最大和最小寬度。這樣在屏幕超過一定的尺寸以后可以更友好的展示（當(dāng)然這不是必須的）,。 我給自己的產(chǎn)品頁面定義的最大的寬度和最小寬度分別是： { max-width:640px; min-width:320px; } 5.去掉 a,，input 在移動(dòng)端瀏覽器中的默認(rèn)樣式 1.禁止 a 標(biāo)簽背景 在移動(dòng)端使用 a標(biāo)簽做按鈕的時(shí)候，點(diǎn)按會(huì)出現(xiàn)一個(gè)“暗色”的背景,，去掉該背景的方法如下 a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a,、input和button點(diǎn)擊時(shí)的藍(lán)色外邊框和灰色半透明背景*/ } 2.禁止長(zhǎng)按 a，img 標(biāo)簽長(zhǎng)按出現(xiàn)菜單欄 使用 a標(biāo)簽的時(shí)候,，移動(dòng)端長(zhǎng)按會(huì)出現(xiàn)一個(gè) 菜單欄,，這個(gè)時(shí)候禁止呼出菜單欄的方法如下： a, img { -webkit-touch-callout: none; /*禁止長(zhǎng)按鏈接與圖片彈出菜單*/ } 3.流暢滾動(dòng) body{ -webkit-overflow-scrolling:touch; } 6.CSS 截?cái)嘧址?/strong> 單行截?cái)嘧址?這里必須指定字符串的寬度 { /*指定字符串的寬度*/ width:300px; overflow: hidden; /* 當(dāng)字符串超過規(guī)定長(zhǎng)度,，顯示省略符*/ text-overflow:ellipsis; white-space: nowrap; } 7.calc 相關(guān)問題 之前在做布局的時(shí)候使用calc 出現(xiàn)了很嚴(yán)重的線上 BUG。后來就深究了下這個(gè)屬性的使用,。 calc好用的地方就是,，可以在任何單位之間進(jìn)行換算。但是瀏覽器支持的不是很好,?？匆幌?can i use 截圖： 而且在使用的時(shí)候要加上廠商前綴，達(dá)到兼容性,。不過現(xiàn)在不推薦使用,，畢竟，瀏覽器支持有限,。 示例代碼： #formbox { width: 130px; /*加廠商前綴,，操作符（ ，-,，*,，/）兩邊要有空格）*/ width: -moz-calc(100% / 6); width: -webkit-calc(100% / 6); width: calc(100% / 6); border: 1px solid black; padding: 4px; } 研究過淘寶，天貓,，京東的 h5端頁面看到這個(gè)單位用的不多,，主要還是兼容性的問題吧。 8.box-sizing 的使用 解決盒模型在不同瀏覽器中表現(xiàn)不一致的問題,。但是仍然會(huì)有兼容性問題,。看最下面的瀏覽器支持列表,。 box-sizing 屬性用來改變默認(rèn)的 CSS 盒模型 對(duì)元素高寬的計(jì)算方式,。這個(gè)屬性用于模擬那些非正確支持標(biāo)準(zhǔn)盒模型的瀏覽器的表現(xiàn)。 它有三個(gè)屬性值分別是： content-box 默認(rèn)值,，標(biāo)準(zhǔn)盒模型,。 width 與 height 只包括內(nèi)容的寬和高， 不包括邊框,，內(nèi)邊距,，外邊距。注意: 內(nèi)邊距, 邊框 & 外邊距 都在這個(gè)盒子的外部,。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在瀏覽器中的渲染的實(shí)際寬度將是370px; padding-box width 與 height 包括內(nèi)邊距,，不包括邊框與外邊距。 border-box width 與 height 包括內(nèi)邊距與邊框,，不包括外邊距,。這是IE 怪異模式（Quirks mode）使用的 盒模型 。注意：這個(gè)時(shí)候外邊距和邊框?qū)?huì)包括在盒子中,。比如 .box {width: 350px; border: 10px solid black;} 瀏覽器渲染出的寬度將是350px. 瀏覽器支持： 9.水平垂直居中的問題 可以看之前寫定位的一篇文章,，末尾有講到各種定位：【從0到1學(xué)Web前端】CSS定位問題三(相對(duì)定位,絕對(duì)定位) 這里實(shí)現(xiàn)一個(gè)相對(duì)定位和絕對(duì)定位配合實(shí)現(xiàn)水平垂直居中的樣式,。看效果： html 代碼如下： class='parent-div'> class='child-div'> css代碼如下： .parent-div{ width: 100px; height: 100px; background-color:red; position:relative; } .child-div{ width:50px; height:50px; background-color:#000; position: absolute; margin:auto; top:0; left:0; right:0; bottom:0; } 絕對(duì)定位在布局中可以很方邊的解決很多問題,，但是大多數(shù)時(shí)候都不去使用絕對(duì)定位，而是使用浮動(dòng)等方法,。而當(dāng)需要 DOM 元素脫離當(dāng)前文檔流的時(shí)候才使用絕對(duì)定位,。如： 彈層，懸浮層等,。 10. css 中 line-height 的問題 line-height 一個(gè)很重要的用途就是讓我們的文本可以在父級(jí)元素中垂直居中,，但是在使用它的過程中也會(huì)遇到一些問題。 先來看一個(gè)實(shí)例,，如下圖： 代碼也很簡(jiǎn)單,，就是當(dāng)我們?cè)赿iv 中定義的字體很大的情況下，我們看到字體和父級(jí)元素之間有一些空隙,。那么這是為什么,？ 我們查一下 line-height 的定義，如下： normal 默認(rèn),。設(shè)置合理的行間距,。 number 設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來設(shè)置行間距,。 length 設(shè)置固定的行間距,。 % 基于當(dāng)前字體尺寸的百分比行間距。 inherit 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值,。 所以在以上的情況我們要想使,，我們的字體能夠撐滿我們的容器，就需要給父級(jí)容器添加 line-height屬性且值為 100% 代碼和效果如下： 那么為什么會(huì)出現(xiàn)上面的問題呢,？ line-height 與 font-size 的計(jì)算值之差(行距)分為兩半,，分別加到一個(gè)文本行內(nèi)容的頂部和底部。 所以,，可以得出下面的一個(gè)公式： 空白間距 = line-height – font-size 所以,，當(dāng)設(shè)置為line-height 的值為100%的時(shí)候，line-height的值就等于 font-size的尺寸,，此時(shí)的空白間距為0,。 11.使用 vertical-align 調(diào)整圖標(biāo)垂直居中 很多時(shí)候我們要把圖標(biāo)和文字配合使用，而且需要圖標(biāo)和文字都能夠垂直居中,。如下圖所示： 如果要實(shí)現(xiàn)文字的垂直居中很容易,，只需要使用line-height=父容器高度 。但是要想使圖標(biāo)能夠垂直居中就比較麻煩,。 正常情況下我們的文字或者說相鄰的容器,，都應(yīng)該和文字保持在相同的底線上,，如下圖： 明顯的可以看到我們的返回圖標(biāo)不是垂直居中的。那么應(yīng)該怎么樣使圖標(biāo)垂直居中呢,？ 首先,，我們先來搞清楚幾個(gè)線的關(guān)系（圖片來源于網(wǎng)絡(luò)，侵權(quán)請(qǐng)告知）： 這樣我們就要用到 vertical-align 這個(gè)屬性,，最重要的一點(diǎn)是: 指定了行內(nèi)（inline）元素或表格單元格（table-cell）元素的垂直對(duì)齊方式 baseline：將支持valign特性的對(duì)象的內(nèi)容與父級(jí)元素基線對(duì)齊 sub：元素基線與父元素的下標(biāo)基線對(duì)齊,。 super：元素基線與父元素的上標(biāo)基線對(duì)齊。 top： 元素及其后代的頂端與整行的頂端對(duì)齊,。 text-top：元素頂端與父元素字體的頂端對(duì)齊,。 middle：元素中線與父元素的基線對(duì)齊。 bottom：元素及其后代的底端與整行的底端對(duì)齊,。 text-bottom：元素底端與父元素字體的底端對(duì)齊,。 percentage：用百分比指定由基線算起的偏移量?？梢詾樨?fù)值,。基線對(duì)于百分?jǐn)?shù)來說就是0%,。 length：用長(zhǎng)度值指定由基線算起的偏移量,。可以為負(fù)值,?；€對(duì)于數(shù)值來說為0。（CSS2） 看下邊的一段 html ： class='title-div'> src='1_icon.png' alt='返回圖標(biāo)'> 我就是標(biāo)題 最初的結(jié)果是這樣子的 我們想實(shí)現(xiàn)如下圖所示的結(jié)果,，圖標(biāo)相對(duì)于右邊的字體居中： 這個(gè)時(shí)候我們就要使用vertical-align屬性和設(shè)置他的length屬性,，即設(shè)置我們的圖標(biāo)相對(duì)與文字基線的偏移量。 當(dāng)我們加入屬性的時(shí)候很容易使圖標(biāo)和文字都垂直居中,。 { vertical-align:15px; } 這個(gè)時(shí)候就會(huì)是我們的圖標(biāo)和字體相對(duì)于父級(jí)元素居中,。 12.flex 彈性盒模型的使用 flex 現(xiàn)在 pc 端支持的不好（主要是因?yàn)檫€有很多 IE8，9的用戶存在,。）大多情況下我們都是在移動(dòng)端使用flex布局,。但是就算是這樣，也會(huì)有很多坑人的 bug出現(xiàn),。 談?wù)勔恍┗镜氖褂媒?jīng)驗(yàn)吧,，什么時(shí)候使用 flex 。 1.什么時(shí)候使用 flex 屬性 先來看一個(gè)產(chǎn)品模型如下圖 我的左邊商品和右邊商品的寬度是一樣的,。當(dāng)我看到這個(gè)模型的時(shí)候,，第一件就是想就是使用 flex 讓我們兩列商品列表平分屏幕區(qū)域。這個(gè)時(shí)候就是用flex 來做。 父級(jí)元素如下定義 { margin-bottom: .5rem; display: box; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; } 2.添加廠商前綴 使用 flex 的時(shí)候一定要記得加廠商前綴（目前使用方式都有三種寫法：1,，舊的2,，過度的3，新的),。不然肯定會(huì)有兼容性問題,。 { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; } 3.flex低版本瀏覽器的兼容 先看我的代碼： { box-flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 18.5rem; } 這里只是讓左右兩邊平分屏幕的寬度。 之前使用 flex在安卓4.3的手機(jī)上遇到一個(gè)問題,。正常的頁面應(yīng)該如下圖所示,， 但是在 安卓4.3的手機(jī)上卻是如下的結(jié)果 后來研究了下天貓的頁面（因?yàn)橹笆褂眠@個(gè) flex 就是參考天貓來學(xué)習(xí)的），看到他們?cè)诙xflex值的時(shí)候 都會(huì)有這樣的一個(gè)屬性width=0; 而且當(dāng)我給我的頁面也加上這個(gè)屬性的時(shí)候,，頁面的布局也變得正常了。我現(xiàn)在想不明白愿意是什么,，只能當(dāng)一個(gè) hack 來使用,。如果大家也遇到這個(gè)問題，請(qǐng)?jiān)囈幌绿砑舆@個(gè)屬性,。如果大家知道為什么這么用,，請(qǐng)指教一下。 13.CSS3動(dòng)畫性能的問題 給大家推薦一個(gè)網(wǎng)站（點(diǎn)擊這里）可以檢測(cè)我們平時(shí)使用的 css 屬性改變?cè)貥邮降臅r(shí)候,，觸發(fā)的是 cpu還是 gpu ,，特別是在做動(dòng)畫的時(shí)候，如果使用 gpu 渲染圖形,，可以減少 cpu 的消耗,，提高程序的性能。 比如我們做一個(gè) slider 動(dòng)畫切換圖片位置的時(shí)候,，會(huì)使用margin-left的屬性,，通過網(wǎng)站查詢?cè)搶傩灾档玫饺缦碌慕Y(jié)果 由上可以知道使用margin-left 的時(shí)候會(huì)處罰頁面的重繪和重排。 但是當(dāng)我們使用css3新屬性transform 來代替?zhèn)鹘y(tǒng)的 margin-left 來改變?cè)匚恢玫臅r(shí)候?qū)撁嬗惺裁从绊懩?？先來看下網(wǎng)站查詢的結(jié)果： 由查詢結(jié)果可以知道,，使用transform 不會(huì)觸發(fā)任何的重繪。而且會(huì)觸發(fā) gpu 來幫助頁面的排版,。即使用GPU操作渲染動(dòng)畫,，減少cpu的消耗，提高性能,。 css動(dòng)畫簡(jiǎn)單實(shí)例,，css代碼如下： .lottery-animation { -webkit-animation: lottery-red 2s; animation: lottery-red 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes lottery-red { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes lottery-red { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } 效果如下圖： 這里我只是對(duì)圖像標(biāo)簽添加了一個(gè) class='lottery-animation' 我截取動(dòng)態(tài)圖片軟件的問題，我的這個(gè)gif 截圖動(dòng)畫有些卡頓,，不流暢,。在正常機(jī)器上是沒有問題的（如果大家有mac下好用的 gif截圖軟件可以推薦給我，謝謝！）,。
|
