手写响应式

Luckies
356 阅读3分钟

1. 响应式

1.1. 什么是"响应式"?

全称 responsive web page, 响应式网页 / 自适应网页

即一个页面即可以在 PC 浏览器中浏览, 也可以在移动终端( 手机 / pad )中浏览, 并且可以配合不同的设备, 有不同的响应结果( 布局不同 )

  • 响应式网页的特点: 1. 页面上的图片和文字要随着屏幕尺寸发生改变 2. 页面的布局要随着屏幕尺寸而发生变化
1.2. 如何测试响应式网页
  1. 使用真实物理设备
    • 优势: 测试结果真实可靠
    • 不足: 设备太多, 成本太大, 测试任务量大
    • 方式: 1. 搭建局域网, 搭建本地服务器, 部署项目 2. 让移动终端与服务器接入相同网络即可访问
  2. 使用第三方模拟设备( 模拟器 )
    • 优势: 不需要更多的物理设备
    • 不足: 效率偏低
  3. 使用浏览器自带的设备模拟器( Emulator )
    • 优势: 功能丰富
    • 不足: 与真实的物理设备会稍有偏差
1.3. 视口 - Viewport

  • 视口: 由 IOS 中的 Safari 所引入的一个概念, 在移动设备中有效, 浏览器里显示网页的一块区域( PC 端会自动忽略 )

  • 注意: 在开发响应式网页时, 需要自己指定视口的数据

    1. 视口的宽度: 要与设备的宽度一致
    2. 视口的初始化缩放倍率: 原始比例
    3. 视口手动缩放大小: 不允许手动缩放

  • 在 HTML 中指定视口的信息:

    <mate name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />

    以上代码, 移动端必备

1.4. 如何编写响应式网页

  1. 必须声明视

  2. 文字要使用相对尺寸( em, rem ), 尽量不要使用绝对尺寸( px, pt )

    • em: 父元素字体大小的倍数
    • rem: 根元素( html )字体大小的倍数

  3. 容器元素使用相对尺寸( %, auto ), 尽量不用绝对尺寸( px )

  4. 图片使用相对尺寸( %, auto ), 尽量不同绝对尺寸( px )

    img{
  width: 50px; /* 不推荐 */
  width: 50%; /* 推荐使用, 占据父容器宽度的占比, 可以无限缩放 */
  max-width: 50%; /* 推荐使用, 占据父容器宽度的占比, 最大不能超过图像原始大小 */
}

  5. 页面元素尽量使用流式布局

    • 流式布局特点: 1. 元素默认都是靠向容器的左上方 2. 横向排列，排列不下则换行
    • 方法: float, display: inline-block;, display: flex;

  6. 响应式网页使用 CSS3 media query 技术

    • CSS3 media query: CSS3 媒体查询

    • 作用: 可以根据不同的媒体类型以及特性去执行不同的 CSS Ex: 1. 浏览器宽度小于 768 像素时, 背景色: 红色

      1. 浏览器宽度大于 768 但小于 991 之间, 背景色: 绿色

    • 语法: 在样式表中, 通过 @media 规则声明

      • @media MEDIA-TYPE and | not | only ( MEDIA-FEATURE ):

        • MEDIA-TYPE: 媒体类型
          • 取值: 1. all: 默认值 所有设备 2. screen: 电脑屏幕, 智能手机, 平板电脑 3. tv: 电视设备
        • MEDIA-FEATURE: 媒体特性
          • 取值: 1. width: 判断是否为指定浏览器窗口大小
          1. min-width: 判断浏览器窗口宽度的最小值
          2. max-width: 判断浏览器窗口宽度的最大值

      • 判断多媒体特性: @media MEDIA-TYPE and | not | only (MEDIA-FEATURE) and|not|only (MEDIA-FEATURE)

        @media screen and (min-width: 768px) and (max-width: 991px){
  样式规则1{}
  样式规则2{}
}
        • 媒体类型必须是屏幕类型( PC, pad, phone )并且, 浏览器最小宽度( 视口 )为 768, 并且最大为 991 时, 执行 CSS

      • @media 的用法:

        1. 选择执行 CSS 内容

          • 在样式表中:

            @media screen and (min-width: 768px){
  样式规则{}
}

          • 注意: and 与媒体特征之间必须有空格, 否则效果不会出来

        2. 选择性的执行某个外部 CSS 文件: <link rel="stylesheet" href="" media="MEDIA-TYPE and | not | only (MEDIA-FEATURE)" />

          <link rel="stylesheet" href="url" media="screen and (min-width: 768px)" />

          • 注意: 即使不满足当前设备条件的 CSS 文件也会被请求, 但不会生效( 不会被执行 )

avatar
文章
阅读
粉丝