设计原则设计原则响应式设计响应式设计是指网页可以根据显示屏幕的大小自动缩放。响应式设计使其对笔记本电脑和移动用户更加友好。分辨率计算：widthheight，最常见的屏幕分辨率是1920px1080px。响应式设计三大技术：Flexiblegrids灵活网格：由列、gutter（列之间的空间）和margin（内容与屏幕左右边框之间的空间）组成。该技术不是以像素而是以百分比适合屏幕。流体图片：设置max-width值为100%，保证图片不超出父容器的范围；将height属性设置为auto以保持图像的原始纵横比。媒体查询媒体查询：它是CSS的一部分，允许开发人员指定纵横比（aspectratio）和方向（orientation）以有条件地应用CSS。在响应式设计中，像素值通常被称为“断点”。断点意味着网页的内容和布局将适应并提供最佳的用户体验。断点可以在三种网格中工作：固定网格固定网格：由列和灵活的边距组成。它的内容（列）大小是固定的，而边距会根据屏幕的宽度自动缩放。流体网格：由列、排水沟和边距组成。它的内容（列）大小可变，会自动缩放以适应屏幕，并且间距是固定的。Hybridgrid：结合以上两种方式，一些应用会根据使用的设备有不同的CSS规则。MediaQuery媒体查询是CSS3中引入的一项新技术，可以根据不同的窗口大小调整内容的布局。窗口是指浏览器中用户可见的网页内容。视口将根据访问网站的设备而变化。媒体查询由媒体类型组成，如果媒体类型与显示页面的设备类型匹配，则应用相应的样式。在媒体查询中使用各种选择器和样式。@media(最大高度:800px){p{字体大小:10px;}}视网膜图像应该用于高分辨率屏幕。更高分辨率的显示器像素密度是区分不同显示设备的指标。一般以PPI（PixelPerInch（每英寸像素数）或DPI（每英寸点数）为计量单位表示。最简单的方法是让图像在高分辨率显示器（如MacBookPro的“Revistinadisplay")就是定义它们的宽度和高度为它们原始值的一半。img{width:100px;height:100px;}让排版根据设备尺寸自由响应TypographyResponsive除了使用em或px设置文字大小，也可以使用窗口单位进行响应式排版，视口单位和百分比是相对单位，但它们是基于不同的引用，视口单位是相对于设备的视口尺寸（宽或高），百分比是相对于父级元素的大小。四种不同的窗口单位是：vw：例如10vw表示窗口宽度的10%vh：例如3vh表示窗口高度的3%vmin：例如70vmin表示较小的70%窗口的高度和宽度。vmax：例如，100vmax表示窗口高度和宽度中较大者的100%。
