css常用移动端适配配置

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img{
    vertical-align: middle;/*图片设为垂直对齐*/
}
a,a:active,a:focus,a:hover{/*a:active, 选择活动链接。 a:focus: 获得焦点的链接, 选择鼠标指针浮动在其上的元素*/
    text-decoration: none; /*默认。定义标准的文本。*/
    color: inherit; /*像 button、input 这样的表单控件，不同的浏览器都会有自己的样式风格(UA样式)。我们可以使用 inherit 继承其父元素样式，从而覆盖浏览器的 UA 样式。*/
}
ul,li{
    list-style: none;/*列表符隐去不见, li 里面的内容与框之间没有距离*/
}
body,html{
    font-family: helvetica,arial,sans-serif;/*这个样式的意思是，设置文字字体为 helvetica，如果用户电脑里面没有这个字体，就使用 arial 作为字体，以此往后推，最后的 sans-serif 一般是所有电脑都有的*/
    color: #666;
    font-size: 10px;
    height: 100%;
    width: 100%;
    background-color: #F4F5F5;
}
@media screen and (min-width:321px) and (max-width:375px){html,body {font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html,body {font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html,body{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html,body{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html,body{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html,body{font-size:23.5px}}
@media screen and (min-width:800px){html,body{font-size:25px}}

 

注： box-sizing 属性
    　　box-sizing 属性可以为三个值之一：content-box（default），border-box，padding-box。
　　 　　content-box：
    　　　　border 和 padding 不计算入 width 之内。
　　　　 padding-box：
　　　　　　padding 计算入 width 内。
    　　border-box：
　　　　　　border 和 padding 计算入 width 之内，其实就是怪异模式了。