css响应式设计
一. 响应式设计的概念
设计一套网页适配不同的屏幕，在不丢弃网页信息的前提下获得最佳的用户体验。如果您使用 HTML和 CSS调整大小，隐藏、缩小、放大或移动内容，以使其在任何屏幕上看起来都很好，则称为响应式 Web 设计。
二. 视口（viewport）
视口是用户在网页上的可见区域。
视口随设备而异，在移动电话上会比在计算机屏幕上更小。
在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。
然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。为了解决这个问题，这些设备上的浏览器会按比例缩小整个网页以适合屏幕大小。
设置视口
<meata name="viewport" content="width=device-width,initial-scale=1.0">
width=device-width:将页面宽度设置为屏幕宽度；
initial-scale=1.0:浏览器首次加载时，初始化缩放级别为1.0；
maximum-scale:允许用户缩放的最大比例；
minimum-scale:允许用户缩放到的最小比例；
user-scalable:用户是否可以手动缩放；
把内容调整到视口大小
用户习惯在台式机和移动设备上垂直滚动网站，而不是水平滚动！
因此，如果迫使用户水平滚动或缩小以查看整个网页，则会导致不佳的用户体验。
还需要遵循的一些附加规则：
1. 请勿使用较大的固定宽度元素 - 例如，如果图像的宽度大于视口的宽度，则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。
2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大，因此内容不应依赖于特定的视口宽度来呈现良好的效果。
3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值，例如 width: 100%。另外，要小心使用较大的绝对定位值，这可能会导致元素滑落到小型设备的视口之外。
三. 网格视图（grid-view）
响应式网格视图通常有 12 列，总宽度为 100％，并且在调整浏览器窗口大小时会收缩和伸展。
构建响应式网格视图
首先添加如下的css样式：
*{box-sizing: border-box}确保元素的总宽度和高度包含内边距和边框。其次计算每一列所占的百分比：100% / 12；在每列中指定
class,class= "col-"用于定义每列有几个span。<style> .col-1 {width: 8.33%} .col-2 {width: 16.66%} ... </style>
四. 媒体查询
媒体查询是 CSS3 中引入的一种 CSS 技术。
仅在满足特定条件时，它才会使用 @media 规则来引用 CSS 属性块。
断点
顾名思义，断点即争对不同设备(屏幕尺寸)的边界值。
典型的设备断点
/* 超小型设备（电话，600px 及以下） */
@media only screen and (max-width: 600px) {...}
/* 小型设备（纵向平板电脑和大型手机，600 像素及以上） */
@media only screen and (min-width: 600px) {...}
/* 中型设备（横向平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {...}
/* 大型设备（笔记本电脑/台式机，992px 及以上） */
@media only screen and (min-width: 992px) {...}
/* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}
五. 响应式图像与视频
图像
如果 width 属性设置为百分比，且高度设置为 "auto"，则图像将进行响应来放大或缩小
img { width: 100%; height: auto; }如果将 max-width 属性设置为 100％，则图像将按需缩小，但绝不会放大到大于其原始大小
img { max-width: 100%; height: auto; }
背景图像
- 将
background-size属性设置为"contain",背景图像将缩放, 并尝试匹配内容区域, 保持长宽比- 将
background-size属性设置为"100% 100%"，则背景图像将拉伸以覆盖整个内容区域- 如果
background-size属性设置为"cover"，则背景图像将缩放以覆盖整个内容区域。请注意，"cover" 值保持长宽比，且可能会裁剪背景图像的某部分
视频
针对视频依旧有
width和max-width属性
