移動端h5開發相關內容總結css篇

來源:互聯網
上載者:User
1.開發移動端,頭部必要的配置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">(各屬性值不在介紹,在開發中小米(2016年小米4)測試user-scalable=no是不起作用的)
2.rem的使用設定根節點的font-size,開發過程中是用Js計算的。
公式 320/100=螢幕尺寸/fontSize值
3.需要點擊跳轉,語義標籤是a(dispaly:block;)
在語義化考慮的情況下a標籤中添加一個span(disply:block),span中在添加容器
4.為了方便使用體驗,在開發移動端頁面時候設定最大寬度和最小寬度。如
{
max-width:640px;
min-width:320px;
}
5.移動端開發頁面一些預設樣式
禁止a標籤背景
a,button,input,optgroup,select,textare{
// 去掉a,input,button點擊時藍色外邊框和灰色半透明
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
禁止長按a,img標籤出現功能表列
a,img{
// 禁止長按顯示功能表列
-webkit-touch-callout:none;
}
流暢滾動
body{
-webkit-overflow-scrolling:touch;
}

6.單行截取參照http://www.cnblogs.com/victory820/p/6728904.html

7.calc的使用,不考慮低版本(ie11以下安卓56以下,opera所有)相容性,建議使用,方便。

8.box-sizing的使用,解決不同瀏覽器盒模型的展現不一致。(移動端常用)
content-box;預設值標準模型,width和height不包括邊框內邊距外邊距
padding-box;width和height包括內邊距不包括邊框和外邊距
border-box;怪異模型width和height包括內邊距和邊框,不包括外邊距。

9.水平垂直置中(移動端常用)
缺點:需要知道小容器的寬度和高度
格式
<p class="parent">
<p class="child"></p>
</p>
.parent{
position:relative;
width:100px;
height:100px;
background-color:red;
}
// 注意是四個方向都是0
.child{
position:absolute;
margin:auto;
top:0;
right;0;
bottom:0;
left:0;
width:50px;
height:50px;
background-color:gold;
}
10.line-height的設定(移動端常用)
normal:預設,自動分配合理的行間距
number設定數字,會與當前字型尺寸相乘來設定,即倍數
length設定固定行間距
%基於當前字型尺寸的百分比行間距
inherit從父元素繼承過來
記住下面公式,利用排除Bug
空白間距=lineHeight - fontSize
設定父元素的line-height為100%就可以沒有留白

11.vertical-align調整表徵圖垂直置中(移動端常用)
baseline:內容與父元素基準對齊
sub:元素基準與父元素下標基準對齊
super:元素基準與父元素上標基準對齊
top:元素及其後代頂端與整行頂端對齊
text-top:元素頂端與父元素字型的頂端對齊
middel:元素中線與父元素的基準對齊
bottom:元素及其後代底端與整行的底端對齊
text-bottom:元素底端與父元素字型的底端對齊
percentage:百分比指定位移量。基準是0%
length:數值方式,基準是0(常用)

12.flex的使用
使用flex時候,如果兩列不是平均分配,試試給width設定為0
https://csstriggers.com/檢查css屬性觸發的哪些過程

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.