移动前端知识汇总

本篇文章主要针对前端样式的一些总结，至于适配方面的我想大家已经听了很多方法了，这里就不在重复了。最近以来一直在做移动端的一些活动页面，其中最主要的一些问题就是样式的统一，但在这个过程中也遇到很多问题和难题，先总结如下：

一、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：

    
    
    
    
    
    
    
    
    
    
    



    
测试的标题
    
    

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);

如果觉得有帮助请支持我吧！