深入解析CSS(最后一天)

适配

适配不出意外是很多前端开发者最头疼的点之一,我们常常会遇到有具有挑战性的问题:应该如何设计网站，才能让用户在任何设备上访问时，网站都既实用又美观？如今我们出现了各种各样的设备来访问你的网站,但是最终还是处理二种类型的设备:电脑版和移动版,在以往我们会设置二个页面,当检测到窗口大小后自动重定向到另一个网站去,随着市场上出现越来越丰富的设备，这种方法便开始捉襟见肘了。平板设备该用移动版还是桌面版呢？大屏的“平板手机”呢？iPad Mini呢？如果移动端用户想要执行桌面版的功能呢？最终，这种将桌面版和移动版强制分开的方案所带来的麻烦比它解决的问题还多。除此之外，还需要同时维护多个网站。

随着互联网技术的不断发展,我们更好的方式是给所有用户提供同一份HTML和CSS。通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。网页设计师Ethan Marcotte称这种方式为响应式设计

响应式设计

浏览网页的时候，留意一下你遇到的响应式设计。看看网站是如何响应不同的浏览器宽度的。新闻类网站尤其有趣，因为它们需要将很多内容挤到一个页面。在写作本书的时候，一些新闻网站就提供了一个很好的示范，它根据浏览器窗口的宽度分别提供了一列、两列、三列布局。通常我们缩放浏览器窗口的宽度就可以直接查看网页布局的响应。这就是响应式设计的工作方式。

三大原则

1. 移动优先
2. @media规则
3. 流式布局

移动优先

当我们要做二个版本时,第一时间应该优先制作移动端布局,因为移动端和PC端相差很大,例如空间受限,网络更慢,用户跟网页交互的方式也不一样,很多pc端的效果,移动端不支持,所以如果一开始以PC端来设计的话一般都会以失败告终.

而移动优先的方式则会让你设计网站的时候就一直想着这些限制。一旦移动版的体验做好了（或者设计好了），就可以用“渐进增强”（progressive enhancement）的方式为大屏用户增加体验。

移动端一般比较难一点就是菜单,因为要考虑PC端菜单展示和移动端菜单展示.

媒体查询

@media,"适配人"必会的属性,而移动优先的方式则会让你设计网站的时候就一直想着这些限制。一旦移动版的体验做好了（或者设计好了），就可以用“渐进增强”（progressive enhancement）的方式为大屏用户增加体验。

在最外层的大括号内可以定义任意的样式规则。@media规则会进行条件检查，只有满足所有的条件时，才会将这些样式应用到页面上。本例中浏览器会检查min-width: 560px。只有当设备的视口宽度大于等于560px的时候，才会给标题设置2.25rem的字号。如果视口宽度小于560px，那么里面的所有规则都会被忽略。在最外层的大括号内可以定义任意的样式规则。@media规则会进行条件检查，只有满足所有的条件时，才会将这些样式应用到页面上。本例中浏览器会检查min-width: 560px。只有当设备的视口宽度大于等于560px的时候，才会给标题设置2.25rem的字号。如果视口宽度小于560px，那么里面的所有规则都会被忽略。

流式布局

响应式设计的第三个也是最后一个原则是流式布局（fluid layout）。流式布局，有时被称作液体布局（liquid layout），指的是使用的容器随视口宽度而变化。它跟固定布局相反，固定布局的列都是用px或者em单位定义。固定容器（比如，设定了width: 800px的元素）在小屏上会超出视口范围，导致需要水平滚动条，而流式容器会自动缩小以适应视口。在流式布局中，主页面容器通常不会有明确宽度，也不会给百分比宽度，但可能会设置左右内边距，或者设置左右外边距为auto，让其与视口边缘之间产生留白。也就是说容器可能比视口略窄，但永远不会比视口宽。在主容器中，任何列都用百分比来定义宽度（比如，主列宽70%，侧边栏宽30%）。这样无论屏幕宽度是多少都能放得下主容器。用Flexbox布局也可以，设置弹性元素的flex-grow和flex-shrink（更重要），让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比，而不是任何固定的值。网页默认就是响应式的。没添加CSS的时候，块级元素不会比视口宽，行内元素会折行，从而避免出现水平滚动条。加上CSS样式后，就需要你来维护网页的响应式特性了。这个道理说着容易做着难，而意识到每次都是从一个好的默认状态开始，有助于我们更好地实现响应式布局。