AitSchool

响应式

Responsive Web Design 响应式页面设计，同一个页面可以适应不同屏幕大小设备的设计方案。

viewport

设置屏幕视口，如果不设置，浏览器会默认设置一个 PC 的宽度（980px)，兼容之前的 PC 的页面，让其在手机上可以放大和拖动页面。在 iPhone 出来之前，大部分都时 PC 的页面，很少为手机做的页面，因此为了在手机上也能看 PC 的页面，浏览器就有了这样一个兼容处理。但是这个方法不适用于我们的移动页面开发，可以通过设置改变 viewport 的大小。

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

某些页面还会做一个处理，不希望用户自行方法和缩小页面，把两手指放大缩小的功能禁用。

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

响应式图片

  • 大图随着容器自动缩放，保持高宽比
  • max-width: 100%

媒体查询

媒体查询包含一个媒体类型(media type) 以及一个到多个测试媒体特性(media feature)的表达式，表达式和媒体类型将根据实际情况计算得到true或者false。如果指定的媒体类型符合当前设备并且媒体特性表达式都为真，那当前媒体查询为。针对不同屏幕，应用不同的样式。

<link rel="stylesheet" href="m.css" media="screen and (max-width: 480px)">

@media screen and (min-width: 480px) {
    .selector { ... }
}

可以查询的 media

  • width
  • height
  • device-width
  • device-height
  • device-pixel-ratio
  • orientation

device-width 为设备宽度，在某些 App 中，网页只是视图中的一个部分。大部分情况下，和 width 一样。

自适应

背景图片

  • background-size: cover 图片会覆盖容器，图片可能会被裁切
  • background-size: contain 图片非常重要，图片完整显示

固定高宽比容器

生成一个固定的高宽比容器，子元素再绝对定位于其中，适配容器。

height: 0;
padding-top: 50%:
background: #f99;

两栏

自适应布局

  • float 与 BFC
  • 绝对定位
  • 模拟 table
  • flex 布局

网格

网格布局，自动换行

  • inline-block + justify
  • flex

← 兼容性 →