開發(fā)移動(dòng)端布局時(shí),移動(dòng)端有些不同于PC端網(wǎng)頁的特有樣式,比如:
1.a標(biāo)簽被點(diǎn)擊時(shí)會(huì)產(chǎn)生藍(lán)色遮罩層的高亮效果.
- 在移動(dòng)端手指的相應(yīng)面積是一個(gè)區(qū)域，開發(fā)者在移動(dòng)端是必須考慮
到a標(biāo)簽的相應(yīng)面積. - 移動(dòng)端沒有 :hover.
可設(shè)置的基本樣式:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
/* 最大寬度 */
max-width: 750px;
/* 最小寬度 */
min-width: 320px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}
/*去掉a標(biāo)簽在移動(dòng)端中點(diǎn)擊會(huì)出現(xiàn)藍(lán)色遮罩層的效果 設(shè)置為transparent 完成透明*/
a {
-webkit-tap-highlight-color: transparent;
}
/*在移動(dòng)端瀏覽器默認(rèn)的外觀在iOS上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式*/
input {
-webkit-appearance: none;
}
/*禁用長按頁面時(shí)的彈出菜單*/
img, a {
-webkit-touch-callout: none;
}
ul {
list-style: none;
}
img {
/* 清除圖片底下的空白縫隙 */
vertical-align: middle;
width: 100%;
}
input, button {
outline: 0;
border: 0;
}
a {
display: block;
color: #666;
text-decoration: none;
}
/* 清除浮動(dòng) */
.clearfix::after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
補(bǔ)充:(讓產(chǎn)品詳情兩行顯示)
p{
/*1. 超出的部分隱藏 */
overflow: hidden;
/*2. 文字用省略號替代超出的部分 */
text-overflow: ellipsis;
/* 3. 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 4. 限制在一個(gè)塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 2;
/* 5. 設(shè)置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
