共计 1286 个字符，预计需要花费 4 分钟才能阅读完成。
设计准则 Design Principle
响应式设计 Responsive
响应式设计的意思是网页可能依据其显示在的屏幕的大小主动伸缩。
响应式设计使得对笔记本和手机用户更加敌对。
分辨率的计算：宽度 高度，最常见的屏幕分辨率是 1920px 1080px。
响应式设计三大技术:
- Flexible grids 灵便网格：由列，gutter（列之间的距离）和 margin（内容和屏幕的左右边界的距离）组成。该技术不以像素为单位，而是以百分比为单位适应屏幕。
- Fluid images 流式图片：设置
max-width值为100%可确保图片不超出父容器的范畴；设置height属性为auto能够放弃图片的原始宽高比。 - Media queries 媒体查问：是 CSS 的一部分，容许开发者指定长宽比（aspect ratio）和方向（orientation）来有条件地利用 CSS。
在响应式设计中，像素值通常被称为“断点（breakpoint）”。断点指的是网页的内容和布局会自适应并尽可能提供最好的用户体验。
断点能够在三种栅格下发挥作用：
- Fixed grid 固定栅格：由列和灵便的 margin 组成。其内容（列）大小是固定的，而 margin 则会依据屏幕的宽度主动伸缩。
- Fluid grid 流式栅格：由列，gutter 和 margin 组成。其内容（列）大小可变，会主动伸缩适应屏幕，gutter 是固定的。
- 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%。
正文完