移動端響應式的基礎設置（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, "\5B8B\4F53", 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 }