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

 

一、html：head设置

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

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

二、这里是css样式基础配置 蓝色加粗加大绿色背景部分是最关键的，其他的都是辅助
 1 @charset "utf-8";
 2 html {
 3     font-size: 625%;
 4 }
 5 body,h1,h2,h3,h4,p,ul,ol,form,fieldset,figure {
 6     margin: 0;
 7     padding: 0;
 8 }
 9 body {
10     background-color: #fff;
11     font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
12     font-size: .16rem;
13 }
14 ul,ol {
15     list-style: outside none none;
16 }
17 a {
18     text-decoration: none;
19 }
20 img {
21     display: block;
22     max-width: 100%;
23 }
24 div,figure,figcaption {
25     box-sizing: border-box;
26 }
27 .none {
28     display: none;
29 }
30 .clearfix:after {
31     content: '.';
32     display: block;
33     clear: both;
34     height: 0;
35     visibility: hidden;
36 }

 以下是测试代码

.45rem意思是45px

.16rem意思是16px 

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

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

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

 

1 37 #header {
2 38     width: 100%;
3 39     height: .45rem;
4 40     background-color: #333;
5 41     font-size: 0.16rem;
6 42     position: fixed;
7 43     top: 0;
8 44     z-index: 9999;
9 45 }

 

posted @ 2016-05-10 23:09  HALEY168  阅读(2015)  评论(1)  编辑  收藏  举报