Herb-Hub

【前端】响应式布局设计

8/19/2022 UI

# 概述

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

  • 布局单位
    • 像素 px：表示计算机屏幕所能显示的最小区域
    • 百分比：height/width，top/bottom/left/right，padding/margin，border-radius/translate/background-size
    • em/rem：em 是相对于父元素的 font-size，rem 则是相对于 html 根元素的 font-size
    • vw/vh：相对于视图窗口的宽度与高度（视窗为 100 vw/vh）
  • 布局方式
    • 流体布局：使用百分比来控制元素大小，进而控制 Web 页面布局
    • 自适应布局：借助 JavaScript 判断视窗大小，在不同的视窗下引用不同的 CSS 文件
    • 响应式布局：通过 CSS 媒体查询，不同条件下应用不同的样式规则
    • 注：对于内容较少、主要用于信息展示的网站，大多采用响应式布局；对于内容较多、管理类网站，通常采用自适应布局
  • 基本概念
    • 像素：pixel，数字领域特有名词，是成像设备的最小单元
    • 分辨率：给定的距离（或面积）内点或像素的数量，包括显示分辨率、图像分辨率、打印分辨率和扫描分辨率等
    • 描述分辨率的单位：DPI（点每英寸），PPI（像素每英寸），px/cm（像素每厘米），LPI（线每英寸）等
      • DPI：dots per inch，表示每英寸（对角线长度）能打印上的墨滴数量，最初应用于打印技术上
      • PPI：pixels per inch，显示器每英寸（对角线长度）上像素点的数量，表示像素密度
    • 屏幕的物理尺寸：通常用可视画面对角线长度表示，且一般以英寸为单位
    • 物理像素尺寸：如 2224 x 1668，指长边上和短边上最多能显示的物理像素点个数
    • 屏幕分辨率 = 对角线上的像素数 / 对角线长度
    • 注：物理像素点是每个设备生产的时候就定好了的，是无法改变的，是设备能控制显示的最小物理单位，和屏幕物理尺寸大小有关
    • 设备独立像素：可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（如 CSS 像素）
      • 设备像素比（dpr）= 物理像素（pp）/ 设备独立像素（dp）
      • 例如，对于 dpr 为 2 的设备，为了达到高清的效果，视觉稿的画布大小会使基准的 2 倍。
      • 理论上，1 个位图像素对应于 1 个物理像素，图片才能得到完美清晰的展示。

# 基础响应式布局方案

  • 方案一：媒体查询
    • 设置 meta 标签：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    • 使用媒体查询设置样式：@media screen and (max-width: 1920px) { ... }
    • 设置布局分界点，即通过设置多种视图宽度样式来控制页面布局
      • 移动端优先，使用 min-width；PC 端优先，使用 max-width（320px - 375px - 414px - 768px - 1024px - 1100px）
      • 在适配移动端的时候，需要切换导航栏样式
  • 方案二：百分比布局
    • 通过将百分比和 max/min 结合使用，来定义元素在不同设备下的宽高
    • 缺点：必须要弄清楚 css 中子元素的百分比到底是相对谁的百分比，计算困难
  • 方案三：rem 布局
    • 根据视图容器的大小，动态的改变 font-size 大小
    • 当页面的 size 发生变化时，只需要改变 font-size 的值，那么以 rem 为固定单位的元素的大小也会发生响应的变化
    • 布局思想
      • 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
      • 高度值可以设置固定值，设计稿有多大，就严格有多大
      • 所有设置的固定值都用 rem 做单位
      • js 获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定
    • 缺点：必须通过 js 来动态控制根元素 font-size 的大小，也就是说 css 样式和 js 代码有一定的耦合性，且必须将改变 font-size 的代码放在 css 样式之前
    • 注：可利用媒体查询，设置在不同设备下的字体大小，默认 html 标签的 font-size 为 16px
  • 方案四：视窗布局
    • 1vw 表示视口宽度的 1%；vmin 表示 vw 和 vh 中的较小值
    • 方法 1：仅使用 vw 作为 CSS 单位
      • 对于设计稿的尺寸转换为为单位，使用 Sass 函数编译
      • 无论是文本还是布局宽度、间距等都使用 vw 作为单位
      • 1 物理像素线采用 transform 属性 scale 实现
      • 对于需要保持宽高比的图，应该用 padding-top 实现：padding-top: percentage(100/700);
    • 方法 2：vw 和 rem 搭配使用（若仅用视口布局，便失去最大最小宽度的限制）
      • 给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小
      • 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度
  • 其他：图片响应式
    • 两个方面
      • 大小自适应：图片在不同的屏幕分辨率下将会出现压缩、拉伸的情况
      • 分辨率自适应：根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片
    • 使用 max-width（背景图片灵活使用 background-size 属性）：img { display: inline-block; max-width: 100%; height: auto; }
    • 使用 srcset：<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">
    • 使用 background-image：通过媒体查询设置不同的背景图片
    • 使用 picture 标签
      <picture>
  <source
    type="image/jpg"
    srcset="banner_w1000.jpg"
    media="(min-width: 801px)"
  />
  <source
    type="image/jpg"
    srcset="banner_w800.jpg"
    media="(max-width: 800px)"
  />
  <img src="banner_w800.jpg" alt="" />
</picture>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

# 成型响应式布局方案

  • 自行实现基础方案：媒体查询 + px；媒体查询 + 百分比；媒体查询 + rem + js；vm/vh；vm/vh + rem
  • flex 弹性布局
    • 一维布局系统，适合做局部布局，比如导航栏组件。浏览器兼容性比较差，只能兼容到 IE9 及以上。
    • 容器属性：display，flex-flow（flex-direction + flex-wrap），justify-content，align-items，align-content（只对多行生效）
    • 项目属性：flex（flex-grow 0 + flex-shrink 1 + flex-basis auto），align-self，order
  • grid 弹性布局
    • 二维布局系统，通常用于整个页面的规划，兼容性较差
    • 可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置；可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠
    • 容器属性：
      • display，grid-template（grid-template-columns + grid-template-rows + grid-template-areas）
      • repeat() & auto-fill 关键字 & fr 关键字 & minmax() & auto 关键字 & 网格线的名称
      • grid-gap（grid-row-gap + grid-column-gap）
      • grid-auto-flow，place-items（justify-item + align-items），place-content（justify-content + align-content）
      • grid-auto-columns & grid-auto-rows
      • grid（grid-template-rows + grid-template-columns + grid-template-areas + grid-auto-rows + grid-auto-columns + grid-auto-flow）
    • 项目属性：
      • grid-column（grid-column-start + grid-column-end），grid-row（grid-row-start + grid-row-end），grid-area（使用区域名称或网格线指定项目位置）
      • place-self（justify-self + align-self）
  • 栅格系统
    • Bootstrap 设计原理
      • bootstrap@3.x：左浮动 + 百分比 + 媒体查询，采用相对定位进行左右移动栅格排版
      • bootstrap@4.x：flex + 百分比，利用 order 属性排版
      • 两者都用 margin-left 进行偏移量设置
    • Pure 设计原理
      • flex + 行内 + 百分比，不支持偏移和指定顺序的排版，最大支持 24 等分
    • Foundation 设计原理：与 bootstrap@4.x 类似，都最大支持 12 等分
    • 栅格七要素：最小单位、总宽度、列数、大列宽、水槽、列宽、安全边距

# 响应式布局设计原则

4 个要素：流畅的布局、响应式单元、灵活的图像、媒体查询
9 个基本原则：流体布局；尽可能采用相对单位；断点选择；设置最大值和最小值；嵌套对象应该尽可能简洁；PC/Mobile 优先；网页字体/系统字体；位图和矢量图

  • 按内容设置分割点：网页内容应在所有屏幕上以最佳方式呈现
  • 明智地选择网页字体和系统字体：考虑加载时间和设计需求
  • 优化位图图像和矢量：图标细节多，建议使用位图；矢量图可以很好地放大或缩小图标
  • 对网站的首屏显示进行测试
  • 不要在小屏幕上隐藏内容
  • 使用嵌套对象管理布局
  • 桌面优先 or 移动端优先？

一般而言，对于响应式网站，宽度、左右间距和左右内边距的长度采用百分比；像高度、上下间距、字体大小等与垂直方向相关的属性则使用 em 或者 rem 单位。

# 为何推崇移动端优先？

  • 由简入繁，前期精力只放到最核心功能模块上，是一个递增的过程
  • 默认打开的如果是移动端的样式，一些复杂的鼠标滑动、阴影或动画效果则不会加载
  • 如果先有的是桌面版的复杂网页，然后想要逐步做减法来最终达成手机版网页，容易造成重复设计劳动，如果处理不好，还可能导致臃肿的代码

# 参考

Last Updated: 10/8/2022, 2:29:52 PM