开发移动端布局时,移动端有些不同于PC端网页的特有样式,比如:
1.a标签被点击时会产生蓝色遮罩层的高亮效果.
- 在移动端手指的相应面积是一个区域，开发者在移动端是必须考虑
到a标签的相应面积. - 移动端没有 :hover.
可设置的基本样式:
* {
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标签在移动端中点击会出现蓝色遮罩层的效果 设置为transparent 完成透明*/
a {
-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
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;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
补充:(让产品详情两行显示)
p{
/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
