HTML & CSS 设计原则

设计原则 Design Principle

响应式设计 Responsive

响应式设计的意思是网页能够根据其显示在的屏幕的大小自动伸缩。

响应式设计使得对笔记本和手机用户更加友好。

分辨率的计算：宽度 高度，最常见的屏幕分辨率是 1920px 1080px。

响应式设计三大技术:

1. Flexible grids 灵活网格：由列，gutter（列之间的间隔） 和 margin（内容和屏幕的左右边界的间隔） 组成。该技术不以像素为单位，而是以百分比为单位适应屏幕。
2. Fluid images 流式图片：设置 max-width 值为 100% 可确保图片不超出父容器的范围；设置 height 属性为 auto 可以保持图片的原始宽高比。
3. Media queries 媒体查询：是 CSS 的一部分，允许开发者指定长宽比（aspect ratio）和方向（orientation）来有条件地应用 CSS。

在响应式设计中，像素值通常被称为“断点（breakpoint）”。断点指的是网页的内容和布局会自适应并尽可能提供最好的用户体验。

断点可以在三种栅格下发挥作用：

1. Fixed grid 固定栅格：由列和灵活的 margin 组成。其内容（列）大小是固定的，而 margin 则会根据屏幕的宽度自动伸缩。
2. Fluid grid 流式栅格：由列，gutter 和 margin 组成。其内容（列）大小可变，会自动伸缩适应屏幕，gutter 是固定的。
3. Hybird grid 混合栅格：结合了以上两种方式，有些应用会根据使用设备的不同有不同的 CSS 规则。

媒体查询 Media Query

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的视窗大小调整内容的布局。 视窗是指浏览器中，用户可见的网页内容。 视窗会随访问网站的设备不同而改变。

媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。 在媒体查询中使用各种选择器和样式。

@media (max-height: 800px) {
  p {
    font-size: 10px;
  }
}

针对高分辨率屏幕应使用视网膜图片 Higher Resolution Display

像素密度就是区分不同显示设备的一个指标，它一般会以 PPI（Pixel Per Inch，即每英寸像素）或 DPI（每英寸点数）为计量单位。

让图像正确出现在高分辨率显示器（例如 MacBook Pro's “Revistina display”）上的最简单方式， 是定义它们的 width 和 height 值为原始值的一半。

img {
  width: 100px;
  height: 100px;
}

使排版根据设备尺寸自如响应 Typography Responsive

除了使用 em 或 px 设置文本大小，还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位，但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。

四个不同的视窗单位分别是：

• vw：如 10vw 的意思是视窗宽度的 10%。
• vh： 如 3vh 的意思是视窗高度的 3%。
• vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
• vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。