响应式布局

参考链接：https://www.yuque.com/fe9/basic/hqbhn3 (opens new window)

https://juejin.im/post/5b39905351882574c72f2808

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。

响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

[TOC]

一、响应式图片

• max-width 属性用来给元素设置最大宽度值。
  • 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大。
• max-width会覆盖width设置, 但 min-width设置会覆盖max-width。

图片随时显示区域的变小而变小。

img{
    /* 父级宽度大于1200px时，图像大小仍然为1200px,避免模糊 */
    width: 1200px;
    /* 图片的宽度等于父级的宽度 */
    max-width: 100%;
}

二、首屏内容始终填充整个窗口(视口单位)

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

<div class="intro">
  <h1>首屏内容</h1>
</div>

.intro {
  background: #e0ebe8;
  text-align: center;
  /* height + padding-top -> 100vh */
  height: 55vh;
  padding-top: 45vh;
}

三、媒体查询（@media)

• 如果视窗的宽度小于 480px 时，将背景色变为淡绿色。

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

四、百分比

4.1 百分比

4.1.1 height、width

width相对于父元素的width，height相对于父元素的height。

4.1.2 top和bottom 、left和right

子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度。

子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。

4.1.3 padding 和 margin

不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

margin亦如此。

4.1.4 border-radius

相对于自身的宽度。

4.2 应用

• 固定长宽比的长方形

.trangle{
    height: 0;
    width: 100%;
    padding-top: 75%；
}

但是啊，计算会比较麻烦~

五、rem单位

默认情况下，html的元素都为16px。

1 rem = 12 px;

为了方便计算

html{ font-size: 62.5% }

此时

1 rem = 10 px;

5.1 使用vw定制rem自适应布局

• 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
• 场景：rem页面布局(不兼容低版本移动端系统)
• 兼容：vw、calc()

/* 基于UI width=750px DPR=2的页面 */
html {font-size: calc(100vw / 7.5);}