9,12移動web

標籤：

移動web由於其比較方便的上網方式,受到各大公司的極力推廣,市場佔有率甚至超過了pc端,所以前端開發人員需要不僅做好pc端的開發工作,更要做好移動端的開發.
移動端市場份額由高到低的瀏覽器有:UC.QQ.baidu.360.獵豹.搜狗.opera,其中除了opera擁有自己的核心,其他瀏覽器都用的webkit核心,所以我們開發移動端時只考慮webkit即可,所以H5和C3可以充分發揮其作用,基本不用考慮相容,當然,大型網站還是要考慮相容.還有一些瀏覽器,firefox.ie.windowphone裝機量都很低
移動端基本上好多裝置都是用的retina螢幕,即視網膜螢幕裝置,市場上比較多的是2x裝置和3x裝置,2x裝置是4個點當一個點用,3x裝置是9個點當一個點用,為了讓肉眼看不出像素顆粒,提供更好的使用者體驗,比如4s是2x裝置,其螢幕解析度是640*960,但物理解析度,顯示內容依據的解析度是320*480,這個裝置是喬布斯推出的,最先運用在4s上
viewport即移動端的視口大小,也就是可以看到的內容地區大小
meta:vp + tab就可以打出來<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width:設定寬度,不需要px,device-width可以實現自動適應螢幕
user-scalable:是否只是縮放,可選值為 yes no 也可以寫 1(yes) 0(no)
initial-scale=1.0 預設viewport的縮放大小,一般設定的是 1.0 不進行縮放
maximum-scale 最大的縮放比例(縮放比例為1時,不用設定)
minimum-scale 最小的縮放比例(縮放比例為1時,不用設定)
height:高度(基本不用,內容將頁面撐大即可)
我們開發時,一般會設定最大寬度和最小寬度max-width: 640px;min-width: 320px;

開發時,通用格式至少需要寫
*,
::before,
::after {
margin: 0;
padding: 0;
/* 去除移動端 預設的 手指 點擊 高亮效果 transparent 透明*/
-webkit-tap-highlight-color: transparent;

/* 添加 盒子模型 為了 優先 保證 盒子的 大小 */
-webkit-box-sizing:border-box ;
box-sizing: border-box;
}
a{
text-decoration: none;

}
ul,ol{
list-style: none;
}
/* 移動端 會取出 他四周的 邊框 */
input{
border: none;
outline: none;
/* 有一些 移動端的瀏覽器 會有預設的 3d效果 比如 陰影,3d漸層 */
-webkit-appearance: none;
}
.clearfix::before,
.clearfix::after{
content: ‘‘;
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}

為了提高開發效率,可以設定下面的方法
浮動:
.f_left{
float: left;
}
.f_right{
float: right;
}
設定margin:
.m_l10{
margin-left: 10px;
}
.m_r10{
margin-right: 10px;
}
.m_b10{
margin-bottom: 10px;
}
.m_t10{
margin-top: 10px;
}
設定border:
.b_l{
border-left: 1px solid #eee;
}
.b_t{
border-top: 1px solid #eee;
}

.b_b{
border-bottom: 1px solid #eee;
}

.b_r{
border-right: 1px solid #eee;
}
需要使用時直接加相應的class即可

sublime中可以封裝相應的程式碼片段
tool--新程式碼片段--
<snippet>
<content><![CDATA[ 此處寫相應代碼
]]></content>
<tabTrigger>此處寫引出程式碼片段的字元</tabTrigger>
</snippet>

9,12移動web