本篇文章主要针对前端样式的一些总结,至于适配方面的我想大家已经听了很多方法了,这里就不在重复了。最近以来一直在做移动端的一些活动页面,其中最主要的一些问题就是样式的统一,但在这个过程中也遇到很多问题和难题,先总结如下:
一、meta标签
二、样式重置
移动端对于自己目前所有的项目结构来说需要重置样式的有:
重置padding和margin
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
dd,
button,
input {
margin: 0;
padding: 0;
}
文本的大小不会根据设备尺寸调整
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
列表类重置
ul,
ol,
li {
list-style: none;
}
图片
img {
border: none;
vertical-align: top; /* 图片底部会员缝隙,用这个就OK了 */
width: 100%;
}
超链接
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 移动端点击时的高亮显示 */
}
大部分就是这些,具体要根据自己的项目来定,下面还有一些是我自己在项目通常都会重置的样式:
文字显示
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
strong,
b {
font-weight: normal;
}
em,
i {
font-style: normal;
}
h5标签
section,
nav,
menu,
footer,
aside,
header {
display: block;
}
表单
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
vertical-align: baseline;
border: none;
background-color: transparent;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input:focus {
outline: none;
}
input::-webkit-input-speech-button {
display: none
}
最后送上一份自己做移动端时的一份template:
html:
Document
测试的标题
reset:
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
dd,
button,
input {
margin: 0;
padding: 0;
}
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
ul,
ol,
li {
list-style: none;
}
strong,
b {
font-weight: normal;
}
em,
i {
font-style: normal;
}
img {
border: none;
vertical-align: top;
width: 100%;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
section,
nav,
menu,
footer,
aside,
header {
display: block;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
vertical-align: baseline;
border: none;
background-color: transparent;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input:focus {
outline: none;
}
input::-webkit-input-speech-button {
display: none
}
最后一个就是移动端如果标签需要做点击事件时,需要给标签加上以下样式来取消高亮效果:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
如果觉得有帮助请支持我吧!