原 web移動端常用知識點筆記

摘要：因為平時搞移動端的比例多一點，做個小小的總結。雖然網上很多這方面的總結，不過還是想自己也總結一下，適合自己的才是最好的。這樣也方便以後自己的查閱

內容

p
在ios裡面，當乙個文字框的樣式為fixed時候，如果這個文字框獲得焦點，它的位置就會亂掉，由於ios裡面做了自適應居中，這個fixed的文字框會跑到頁面中間。類似：

（請原諒盜圖，我錯了）
解決辦法有如下兩個：
1、可以在文字框獲得焦點的時候將fixed改為absolute，失去焦點時在改回fixed，但是這樣會讓螢幕有上下滑動的體驗不太好。
.fixfixed 

$(document)
.on('focus', 'input', function(e) )
.on('blur', 'input', function(e) )
2、還有一種就是用乙個假的fixed的文字框放在頁面頂部，乙個absolute的文字框隱藏在頁面頂部，當fixed的文字框獲得焦點時候將其隱藏，然後顯示absolute的文字框，當失去焦點時，在把absolute的文字框隱藏，fixed的文字框顯示。

.fixfixed $(document)

.on('focus', 'input', function(e) )
.on('blur', 'input', function(e) );
在有滾動的地方加上下面這段css，滑動起來就會特別的順暢。而不會出現那種一卡一卡的現象。主要還是針對ios機，個人覺得這個很實用

.div

.ennoblelist::-webkit-scrollbar 

.ennoblelist::-webkit-scrollbar:horizontal 

.css

.css

//css 

.box 
.box .box_flex1
.box .box_flex2 
.box .box_flex3 
//html
為了適應不同解析度的手機，我們不建議把寬度寫死。而是採用自適應的布局。可以看看我的這篇博文

a,button,input,textarea
在網頁載入的過程中，以css背景圖存在的background-image會等到結構載入完成（網頁的內容全部顯示以後）才開始載入，

而html中的標籤img是網頁結構（內容）的一部分會在載入結構的過程中載入，換句話講，網頁會先載入標籤img的內容，再載入背景background-image，
才開始載入背景，不會影響你瀏覽網頁內容。
input[type=number]::-webkit-textfield-decoration-container

input::-webkit-input-placeholder

input:focus::-webkit-input-placeholder
可以參考這篇文章 ：

打**給:110
發簡訊：

發簡訊給: 110
在 chrome and safari中，修復使用css transforms 或者 animations時可能會有頁面閃爍的效果

下面的**可以修復此情況：
.cube
在webkit核心的瀏覽器中，可用下面的方法

.cube

element

這個問題比較經典，小小總結

情景再現:
<

div 
id="mask"
>點選測試
$('#mask').on('tap',function());
按照我們預想，遮罩層div消失了。但是當我們在a標籤上點選遮罩層時，a鏈結被觸發，跳轉了。也就是出現我們所說的點透事件。

出現原因：
事件的觸發順序：touchstart >touchmove>touchend >click
也就是說，touchstart 早於 touchend 早於click。click在移動端有300ms延遲，，當我們tap觸發之後遮罩層隱藏， 此時 click還沒有觸發，300ms之後由於遮罩層隱藏，我們的click觸發到了下面的a鏈結上，因而發生點透事件。
解決方法：
（1）盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
（2）使用fastclick，
（3）用preventdefault阻止a標籤的click
（4）實在不行就換成click事件
使用touchend事件解決方法，如下：
$("#mask").on("touchend", function (e) );
角標的實現：

類似於這種效果
下面是相容安卓和ios的寫法
<

p class
="rongqi"
>
<
span 
class
="wenan"
>跟團遊
span
>
<
span 
class
="script"
>
span
>
p>
/**css**/
.rongqi 
.wenan
.script 
**標題

這種寫法比較好的及時應用偽類的形式：css**如下：
pp::before當然，這裡用定位也是可以的
還有類似於這種的布局：

可以用以下的方式，當然其他的方式也是可以滴：
/*html*/

<
li class
="ent-li"
>
<
img 
class
="ent-img"
src="img/1.png"
>
<
div 
class
="left"
>主題門票
div>
<
div 
class
="right"
>10
div>
li>
/**css**/
.ent-li 
.ent-li .left 
.ent-li .right 
雖然網上很多這方面的總結，不過這套總結是適合我自己的。方便以後自己查閱

未完待續，持續更新.....
 
移動端知識點總結
二,取消表單元素在點選態時的邊框以及半透明灰色背景 css input,textarea,button,a 三,移除原生控制項樣式 css input,button,textarea 四,使用rem來做響應式開發 scss html media screen and min width 360px ...
移動端css基本知識點
移動端css基本知識點 ppi pixels per inch 也叫dpi dots per inch 表示的是每英吋所擁有的畫素 pixel 數目。數值越高，代表顯示屏能夠以越高的密度顯示影象。適用於移動端的dtd html public wapforum dtd xhtml mobile1.0 ...
C C 常用知識點筆記
1.return break continue用法總結 首先通過乙個簡單的程式做乙個直觀上的理解 includeint main void printf i am here n printf i am leving n getch return 0 2.c c 語言中struct結構體定義中 pac...