响应式布局如何实现

响应式布局的好处？

响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好的体验。

 

响应式布局如何实现？

 

方案一：百分比布局

 

利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、 font-size 不能用百分比设置的。

 

方案二：使用媒体查询 (CSS3 @media 查询)

 

利用媒体查询设置不同分辨率下的 css 样式，来适配不同屏幕。

下面例子中，在屏幕可视窗口尺寸小于 480 像素(px)的设备上修改背景颜色。

@media screen and (min-width: 480px){
    body {
      background-color: green;
    }
}

下面例子中，在屏幕可视窗口尺寸大于 480(px)像素小于1200(px) 像素的设备上修改背景颜色。

@media screen and (max-width: 1200px) and (min-width: 480px) {
    body {
      background-color: lightgreen;
    }
}

下面例子中，在屏幕可视窗口尺寸大于 1200 (px)像素的设备上修改背景颜色。

@media screen and (min-width: 1200px){
    body {
      background-color: red;
    }
}

 

三个不同分辨率下显示对应的背景色。

媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个 分辨率下面都写一套 css 样式；分辨率拆分可视项目具体情况而定。

注意：IE6、7、8 不支持媒体查询。

 

方案三.rem 响应式布局

 

当前页面中元素的 rem 单位的样式值都是针对于 html 元素（根元素）的 font-size 的值 进行动态计算的，所以有两种方法可以达到适配不同屏幕：

 

第一种利用媒体查询，在不同分辨率下给 html 的 font-size 赋值。

第二种利用 js 动态计算赋值，详细代码如下：

 

function rem() {

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";

    console.log(document.documentElement.clientWidth)

}

rem();

window.onresize = rem;

缺点就是打开页面时候，元素大小会有一个变化过程。

 

方案四.vw 、vh、vmax、vmin响应式布局

vw   css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px。   
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

 

vh   css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px。   
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

vmax  css3新单位，是指可视窗口的宽度或高度，取决于哪个更大。假如宽度是1200px，高度是900px的话。那10vmax就是120px。

 

vmin css3新单位，是指可视窗口的宽度或高度，取决于哪个更小。假如宽度是1200px，高度是900px的话。那10vmin就是90px。

 

方案五.flex 弹性布局

 

利用 flex 属性来适配不同屏幕。

 

flex-direction      设置项目的排列方向
            row (默认)      水平方向起点在左边
            row-reverse    水平方向起点在右边
            column         竖直方向 起点在上方
            column-reverse 竖直方向 起点在下方

  flex-wrap           设置如何换行
            nowrap（默认）   不换行
            wrap            换行
            wrap-reverse    换行，第一行在下方

  flex-flow           是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  justify-content     定义项目在主轴上的对齐方式
            flex-start（默认值）     左对齐
            flex-end               右对齐   
            center                 居中对齐 
            space-between          两端对齐 项目之间的间隔相等 
            space-around           每个项目两侧的间隔相等

  align-items         定义项目在纵轴上如何对齐
            stretch（默认值）         如果项目未设置高度或设为auto，将占满整个容器的高度。
            flex-start              纵轴的起点对齐。
            flex-end                纵轴的终点对齐。
            center                  纵轴的居中对齐。
            baseline                项目的第一行文字的基线对齐。
            
  align-content       定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
            flex-start          与纵轴的起点对齐。
            flex-end            与纵轴的终点对齐。
            center              与纵轴的居中对齐。
            space-between       与纵轴两端对齐，轴线之间的间隔平均分布。
            space-around        每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
            stretch（默认值）     轴线占满整个交叉轴。