前言

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。

英文版（源）地址：www.freecodecamp.org/

中文社区：chinese.freecodecamp.org/forum/t/top…

此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点

响应式布局

如今，从大屏的台式电脑到小屏的手机，我们有各式各样可以上网的设备。

这些设备有着不同的屏幕尺寸、分辨率和处理能力。

响应式 Web 设计是一种能自动响应不同尺寸设备的设计方法。

实现这一切的核心要素是：媒介查询（Media Query）。

如果你预计网站的大部分流量来自移动端，那么应该采取“移动端优先”的策略，再为PC端做兼容。

如果你预计网站的大部分流量来自PC端，那么应该采取“PC端优先”的策略，再为移动端做兼容。

CSS 提供了书写不同样式规则的工具，然后根据显示网页的设备来应用这些样式。

本章介绍了如何使用媒介查询来实现响应式 Web 设计。

• 创建一个媒介查询
  • 媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小显示不同的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同

下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：

@media (max-width: 100px) { /* CSS Rules */ }

以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：

@media (min-height: 350px) { /* CSS Rules */ }

• 使图片根据设备尺寸自如响应
  • 用 CSS 来让图片自适应其实很简单。不要使用绝对单位
  • max-width属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。将 display属性设置为 block可以让 image 标签从内联元素（默认值）更改为块级元素。设置 height属性为 auto 保持图片的原始宽高比
• 针对高分辨率屏幕应使用视网膜图片
• 使排版根据设备尺寸自如响应
  • 视窗单位还有百分比，它们都是相对单位，但却基于不同的参照物。视窗单位相对于设备的视窗尺寸 (宽度或高度) ，百分比是相对于父级元素的大小。

vw：如 10vw的意思是视窗宽度的 10%。
vh：如 3vh的意思是视窗高度的 3%。
vmin：如 70vmin的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。
vmax：如 100vmax的意思是视窗中较大尺寸的 100% (高度 VS 宽度)