REM响应式布局

为什么么要响应式？

因为能兼容，手机、平板、PC终端既省钱又省力；

有很多网站的解决办法是，为不同的设备提供不同的mobile版本，或者iPhone/iPad版本。这样效果有保证，但是比较麻烦，同时要维护好几个版本；

于是，“”“一次设计，普遍适用”，根据屏幕宽度，自动调整布局（layout）

第一步： meta:vp标签

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

上面代码的意思是。

viewport是网页默认的宽度高度

 content="width=device-width 网页宽度默认屏幕宽度 user-scalable=no,（禁止缩放） initial-scale=1.0,（原始缩放比例） maximum-scale=1.0, minimum-scale=1.0"（最大最小缩放比例）

所有主流都支持，对于IE6-8适用

　<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

第二部：不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度，也不能使用具有绝对宽度的元素。（重点）

第三部：相对大小字体

使用rem,em对字体进行设置;

rem相对根元素中的fontSize

html{
   font-size:100px;  //设置根元素上的100px=1rem;
}

p{
   width:1rem;       //100px
}

em,相对上级元素

html{
      font-size: 100%;  //默认是浏览器默认16px=1em||rem
  }

h1{
         font-size: 1em; //1em=16px
     }

  p{
            font-size: 2em;  //2em=32px
            margin-top: 1em;//你以为是16px，搓搓，此时1em=32px;被自己重置了
        }

怎么选择em,rem？？？

如果这个元素有其他属性与自身字体有关联，使用em,剩余使用rem

例子

  html{
      font-size: 100%;  //1rem||em=16px
  }
  .tit{
      font-size: 1em;       //=16px
      padding: 1em;         //=16px
  }
  .titH1{
            font-size: 1em;  //1em=16px
        }
  .titH2{
      font-size: 2em;       //2em=32px=>1em=32px  所以 padding:32px
  }
  .titH3{
      font-size: 3em;       //3em=48px=>1em=>48px  所以padding:48px
  }

<h1 class="tit titH1">我是H1</h1>
<h2 class="tit titH2">我是H2</h2>
<h2 class="tit titH3">我是H3</h2>

所有这个元素中与em相关的尺寸全部改变;

rem则任何尺寸都不进行改变

  html{
      font-size: 100%;//1rem=16px
  }
  .tit{
      font-size: 1rem; //1rem=16px
      padding: 1rem;  //16px
  }
  .titH1{
            font-size: 1rem; //16px
        }
  .titH2{
      font-size: 2rem;  //16px  padding=16px
  }
  .titH3{
      font-size: 3rem;   16px   padding=16px
  }

第四部：流动布局

　.main {
　　　　float: right;
　　　　width: 70%;
　　}

　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}

装不下会自动跑到下面去，绝对定位的使用一定要小心；

第五部：css加载media

<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />
//上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

　<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />
//如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

第六部：媒体查询media

@media screen and (max-device-width: 400px) {

　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}

　　　　#sidebar {
　　　　　　display:none;
　　　　}

　　}
//如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节

第七部：图片响应式

　　img { max-width: 100%;}
//老版本IE使用
　　img { width: 100%; }

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。太累了，没条件；

转紫阮一峰响应式布局

原文地址：https://www.cnblogs.com/liangfc/p/9123786.html