移动端响应式的基础设置（rem的使用）

一、html：head设置

　　<meta http-equiv="X-UA-Compatible" content="IE=edge">

　　<meta name="viewport" content="width=device-width, initial-scale=1">

二、这里是css样式基础配置 蓝色加粗加大绿色背景部分是最关键的，其他的都是辅助

@charset "utf-8";
html {
    font-size: 625%;
}
body,h1,h2,h3,h4,p,ul,ol,form,fieldset,figure {
    margin: 0;
    padding: 0;
}
body {
    background-color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "5B8B4F53", simsun, sans-serif;
    font-size: .16rem;
}
ul,ol {
    list-style: outside none none;
}
a {
    text-decoration: none;
}
img {
    display: block;
    max-width: 100%;
}
div,figure,figcaption {
    box-sizing: border-box;
}
.none {
    display: none;
}
.clearfix:after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

 以下是测试代码

.45rem意思是45px

.16rem意思是16px 

如果需要设置响应式的1px 红色 实线 边框，可以这样写------border:solid  .01rem #f00;

注：rem是css3新的单位，是相对根元素的一种单位

       em是相对父级元素的单位，详情可以咨询W3C

37 #header {
38     width: 100%;
39     height: .45rem;
40     background-color: #333;
41     font-size: 0.16rem;
42     position: fixed;
43     top: 0;
44     z-index: 9999;
45 }