APP應用前端開發


1、開發手機APP前端要重視meta標簽的編寫;

2、注意HTML5標簽在前端開發中的使用;

3、前端制作要舍棄CSS float屬性(可flex布局),用絕對定位不利於頁面布局的擴展;

4、APP前端制作利用CSS3邊框背景屬性。

5、尺寸大小 http://blog.sina.com.cn/s/blog_18b319a350102yhcz.html

6、-webkit-tap-highlight-color:transparent:移動端沒有hover偽類,但可以使用這個實現高亮效果,通過給a、html、body添加。

7、display: table-cell。

8、取消a標簽在移動端點擊時出現的藍色背景:
  -webkit-tap-hightlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;

  使用圖片作為a標簽的點擊按鈕時,當觸發touchstart的時候,去掉出現灰色背景:
  a, a:hover, a:active, a:visited, a:link, a:focus {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
    background: none;
    text-decoration: none;
  }

  改變選中的背景顏色:
  ::selection { background: #fff; color; #333 }
  ::-moz-selection { background: #fff; color: #333 }
  ::-webkit-selection: { background: #fff; color: #333 }

  去掉iOS input框點擊時的灰色背景:
  -webkit-tap-highlight-color: transparent;

9、關於背景圖片問題:

 移動端設置頁面背景填滿整個屏幕(html{}或body{}),在設計時,將background放置在外部樣式不行,放在行內樣式才可現實。background: url(/images/zhuceBG.jpg) no-repeat fixed center center / 100% 100%;

10、padding代替margin

  修改網頁發現問題:比如移動端網頁,在屏幕分辨率為375 * 640的情況下,不要設置html、body或一個大的容器(相當於html/body)margin為正值,如果容器的box-sizing值不是border-box的情況下。這時容器的值寬或高由分辨率 值加上margin值,從而會水平或上下拉動。不對box-sizing值只是針對(border/padding/content)設置而已,對 margin不起作用。所以最外圍容器(包含整個頁面內容)最好不要設置margin正值,可以以padding代替。

11、element:after { content:""; display:block; height:0; visibility:hidden; clear:both}

  之前一直覺得對偽類“:after”來清除浮動的方法還不會使用,以至於沒有效果。但是突然看到一篇文章,言外之意是,本來父元素的高度沒有撐開,而在這個元素添加偽類清除浮動后,父元素有高度了,也說明清除浮動有效。

12、移動端字體默認最小為12px,使用transform的scale()可以進行縮放,縮放后字體不是居左顯示的,設置transform-origin:left即可。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM