实现响应式效果

1、理解

1-1 对于响应式

• 响应式布局是同一页面在不同的屏幕尺寸下有不同的布局，根据设备的环境进行相应的响应和调整
• 当屏幕的宽度改变时后面的样式会覆盖前面的样式。移动端一般使用min-width，PC端一般使用max-width

1-2 响应式与自适应的区别

• 响应式：开发一套界面，通过检测视口分辨率，针对不同客户端做代码处理，来进行相应的响应和调整
• 自适应：开发多套界面，通过检测视口分辨率来判断的当前的设备，进而请求服务层返回不同的页面

1-3 响应网站的特点

• 适配PC+平板+手机
• 手机终端设备为经典的抽屉式导航
• 网站布局根据视口来调整模块的大小和位置

2、响应式部分配置

页面头部meta中声明name="viewport"（为了处理移动端） --> 属性配置

属性配置
● width=device-width: 是自适应手机屏幕的尺寸宽度
● maximum-scale:是缩放比例的最大值
● inital-scale:是缩放的初始化
● user-scalable:是用户的可以缩放的操作
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

3、响应式具体实现方式

3-1. 媒体查询

• 针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小时，页面会根据浏览器的宽度和高度重新渲染页面

//设置不同类型的媒体条件，根据对应的条件给对应的媒体调用相应的样式表。
//方式一 -- link标签引入
<link rel="stylesheet" media="screen and (max-width:800px)" href="./demo.css">

//方式二 -- style直接引入
//当视口在375px - 600px之间，设置特定字体大小18px
@media screen (min-width: 375px) and (max-width: 600px) {
    
    
  body {
    
    
    font-size: 18px;
  }
}

3-2.百分比

%单位实现响应式效果，使浏览器组件的宽高随浏览器宽高变化。

子元素相对于父元素宽、高的百分比设置

1. 子元素的height和width使用百分比，相对于父元素
2. 子元素的top和bottom设置百分比，相对于直接非static定位父元素的高度
3. 子元素的left和right设置百分比，相对于直接非static定位父元素的宽度
4. 子元素水平和垂直方向设置margin、padding百分比，都是相对于父元素的宽度，与父元素的高度无关
5. 子元素相对于自己的设置：border-radius、translate、background-size等

使用百分比实现响应式布局的缺点

• 计算困难，按照原型表的具体数据必须将其转换为百分比，较麻烦
• 子元素设置百分比的时候，相对父元素的宽度、高度或者相对于子元素本身，易造成百分比过度使用使布局问题复杂化

3-3. rem

rem布局可以使屏幕发生变化时，元素的高度和宽度以及文字大小等等比例缩放。

rem是一个相对单位，相对于html元素的字体大小。

//根元素设置font-size=12px；非根元素设置width:2rem; 换算为px为2rem = 2x12px = 24px
 <style>
      html {
    
    
        font-size: 12px;
      }
      .box {
    
    
        width: 10rem;
        height: 10rem;
        background-color: orange;
        font-size: 1.5rem;
        color: #fff;
        text-align: center;
        line-height: 10rem;
      }
 </style>

优点：

• 相对于一个html的font-size，可以控制整个页面的大小
• 可以结合媒体查询来进行不同设备字体设置

缺点：

• 需要js动态的控制根元素font-size的大小，必须将改变font-size的代码放在css样式之前

/* pc width > 1100px */
html{
    
     font-size: 100%;}
body {
    
    
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    
    
    body {
    
    
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    
    
    body {
    
    
      background-color: green;
      font-size: 1.3rem;
    }
}

3-4. vw/vh

• CSS3中新引入单位，相对于视图
• vw相当于视图的宽度，1vw相当于视图宽度的1%，视图的宽度为100vw
• vh相对于视图的高度，1vh想读与视图的宽度的1%，视图的高度是100vh

页面实现响应垂直居中

#box {
    
     
  width: 50vw; 
  height: 50vh; 
  margin: 25vh auto; 
}