移动端响应式的基础设置(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 }

 

haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
posted @ 2016-05-10 23:09  HALEY168  阅读(1931)  评论(1编辑  收藏  举报

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)

haley二维码

715560471@qq.com

qq:715560471