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%; }

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

      转紫阮一峰响应式布局

posted @ 2018-06-01 22:19  追忆枉然  阅读(357)  评论(0编辑  收藏  举报