【慕课网】六个案例学会响应式布局

第一章 课程介绍

讲师：大谷 课程：https://www.imooc.com/learn/1285

1-1 课程介绍

• 课程安排

  • CSS 中媒体查询的作用和使用方法

  • flex 弹性盒子的用法

  • rem 的作用和使用方法

  • 响应式布局、弹性布局等六个课程案例

mediaquery 媒体查询

2-1 什么是媒体查询

概念：为不同尺寸的屏幕设定不同的 CSS 样式

2-2 @media 常用参数

2-3 媒体查询其他引入方式-1

<style media="(min-device-width:100px) and (max-device-width:300px)">
  #div0 {
    background-color: red;
  }
</style>

媒体查询其他引入方式-2

<link href="css/css-1.css" rel="stylesheet" media="(min-device-width:100px) and (max-device-width:300px)" />

媒体查询其他引入方式-3

@media (min-device-width: 400px) and (max-device-width: 500px) {
  #div0 {
    background-color: blue;
  }
}

第三章 flex 基础与应用

3-1 什么是 flex

概念：FlexiableBox 即是弹性盒子，用来进行弹性布局，可以配合 rem 处理尺寸的适配问题

第四章 常用布局

4-1 rem 的使用方法

• 概念

  指相对于根元素的字体大小的单位

• 区别

  与 em 区别，em 是相对于父元素的字体大小的单位

• 案例

  /* 初始化根字体相当于设置 html{font-size:} */
  var c = () => {
    let w = document.documentElement.clientWidth; /* 获取设备的宽度*/
    let n =
      20 * (w / 320) > 40
        ? 40 + "px"
        : 20(w / 320) +
          "px"; /* 假设基准字体大小为20px；基准屏幕宽度为320px；在各种尺寸里字体大小不大于40（这是常识） */
    document.documentElement.style.fontSize = n;
  };
  window.addEventListener("load", c);
  window.addEventListener("resize", c);
  

4-2 自适应布局

• 布局特点

  不同设备对应不同的 html；局部自适应即不同的设备用不同的页面或局部伸缩

• 设计思路

  判断设备的类型或控制局部的变化

<script type="text/javascript">
  var redirect=()=>{
    let userAgent = navigator.userAgent.toLowerCase();
    //正则表达式，判断设备类型
    let device = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|window ce|window mobile/;
    if(device.test(userAgent)){
      //跳转移动端页面
      window.location.href="move.html";
    }else{
      //跳转PC端页面
      window.location.href="pc.html";
    }
  }
  redirect()
</script>

4-3 响应式布局

• 布局特点

  确保一个页面在所有终端上，都能显示出令人满意的效果（重 CSS）

• 设计思路

  使用%或 rem 作为单位，此处采用%为单位

• 案例

  一定要加入的一句

  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
  

  width 决定宽度；initial-scale 控制在默认情况下显示原始尺寸；user-scalable 代表是否允许缩放，设置为 0 表示不使用浏览器自身是缩放

4-4 rem 弹性布局

• 布局特点

  为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算，即一套方案，使不同尺寸、分辨率的视口，都能呈现出较好的效果。

• 设计思路

  使用%或 rem 作为单位，此处采用 rem 为单位