如何实现自适应页面 (响应式布局)

Posted 2021-12-01 lee-cappuccino

当我们在做网页时，应当充分考虑到网页自适应的问题

否则可能会出现同一个网页在不同的屏幕尺寸上排版布局混乱的情况

方案一：用比例控制大小

1. 在网页代码的头部，加入一行viewport元标签

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   • 以下是相关的属性的解释：
     1. width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
     2. height：和 width 相对应，指定高度
     3. initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例，1.0就是占网页的100%
     4. maximum-scale：允许用户缩放到的最大比例
     5. minimum-scale：允许用户缩放到的最小比例
     6. user-scalable：用户是否可以手动缩放

2. 用百分比去写元素的宽度，不要写绝对宽度

   .myDiv {
       width: 30%;
   }

   • 这里需要注意div宽度的计算方法，CSS盒式模型的宽度设置有两种模式：
     1. width = 内容宽度
        • 实际总宽度 = width + padding + border
        • 这种情况下设置了 width 后，内容宽度不变，而调整 padding 和 border 都会使得div的实际总宽度变化
     2. width = 实际总宽度
        • width = 内容宽度 + padding + border
        • 这种情况下设置了 width 后，div总宽度不变
   • 可以通过设置 css 的 box-sizing 属性来控制
     • content-box：width = 内容宽度 (默认)
     • border-box：width = 实际总宽度

3. 让子元素撑起父元素的高度，而不要写绝对高度

   .parent {
       width: 30%;
   }
   .child {
       width:100%;
       height:100px;
   }

4. 字体使用相对大小 "em"** 或 "rem" **

   h1 {
       font-size: 2rem;
   }

   • 浏览器默认字体为 16px ，2rem 即 2 * 16px = 32px
   • em（font size of the element）是指相对于父元素的字体大小的单位，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，因此 em 的大小并不是固定的
   • rem（font size of the root element）是指相对于根元素的字体大小的单位

     • 目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

       h1 {
           font-size: 32px;
           font-size: 2rem;
       }

5. 图片的大小也用百分比表示

   img {
       width: 100%;
   }

   • 也可以设置 max-width ，这样一来图片最大不会超过原始尺寸，避免图片由于放大而模糊

     img {
         max-width: 100%;
         width: auto;
     }

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

当网页需要在移动端和PC端展示时，由于二者屏幕尺寸差别较大，可能需要用两种不同的布局才能更加友好地展示内容
此时可以使用媒体查询来检测屏幕(或浏览器窗口)的大小，然后采用相应的css样式来渲染页面

• 举个例子,当浏览器窗口小于 500px 时，背景变为蓝色：

  @media only screen and (max-width: 500px) {
      body {
          background-color: lightblue;
      }
  }