Online demo: http://www.liquidapsive.com

Basic Concept​

Before introduction on responsive and adaptive design, let's start by Static and Liquid which are basis of responsive and adaptive design.

Static​

Static layouts are the traditional web: one design that sits in the center of the page and requires horizontal scrolling if the window is too small for it. M dot sites (m. site is a website that's specifically designed for mobile devices, and exists on a separate subdomain) are the traditional answer to this, providing a wholly separate site for a lower resolution - and all the work of creating a separate site.

npm (Node Packaged Modules) is node's official package manager. You can also see all the versions of node and corresponding npm here.

Overview​

npm CLI documentation

Acronym​

-g​

--global 缩写为 -g，表示安装之后的包将位于系统预设的全局目录之下。

-S​

--save 缩写为 -S，表示安装的包将写入 package.json 里面的 dependencies。

选择加载 CSS​

"自适应网页设计"的核心，就是 CSS3 引入的 Media Query 模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的 CSS 文件。

<link
  rel="stylesheet"
  type="text/css"
  media="screen and (max-device-width: 400px)"
  href="tinyScreen.css"
/>

上面的代码意思是如果屏幕宽度小于 400 像素，就加载 tinyScreen.css 文件。

简介​

HTTP/2 主要目的是提高网页性能，最近几年比较火，将其单独抽成一块讲。2015 年，HTTP/2 发布。它不叫 HTTP/2.0，是因为标准委员会不打算再发布子版本了，下一个新版本将是 HTTP/3。

目前还有不少服务还是 HTTP/1.1，NodeJS 也是从 v10 才将 http2 转正。Express5.x 才开始支持 http/2。

可以打开谷歌首页看看，基本上都是 http/2 协议，简写成 h2

TS 允许将一些不同类型的变量相互赋值，虽然某种程度上可能会产生一些不可靠的行为，但增加了语言的灵活性，毕竟它的祖宗 JS 就是靠灵活性起家的，而灵活性已经深入前端的骨髓，有时会不得不做一些妥协。

当一个类型 Y 可以被赋值给另一个类型 X 时，我们就可以说类型 X 兼容类型 Y。

X (目标类型) = Y (源类型)

Primitive type compatibility​

原始类型的兼容性主要关注三点：