1.6 响应式设计

响应式设计

背景

上网，从我们坐在靠椅上，看着电脑显示屏，到每个人随处随地地上网。互联网终端从主要的计算机为主体，到全民普及的手机终端为主。网页的布置不得不适应时代的变化。

最开始，网站设计者直接将手机访问直接转到 m 为三级域名代表手机页面的网页。这样在当时解决了手机用户访问的问题。可移动端开始千奇百怪地变化，ipad、ipad Mini、平板、折叠手机、电视的到来，又成了难题，不可能继续无限制的增加分离的网页。所以，应当有一个一劳永逸的办法，能适配不同终端的访问，这就是我们需要考虑的响应式设计。

设计原则

从移动端开始

不同的设备，显而易见的差别就在于尺寸的不同。先从那种尺寸开始设计尤为重要，这涉及到其它尺寸的适配难度。若从大到小，容易崩坏页面布局，内容安置。网页设计应当先有内容，再有布局，与之相仿的，移动端由于屏幕太小，手机用户往往也只关心网站的内容，故也是以内容为主，所以先从移动端，或者说是受众群体广的小尺寸用户为主。

先从移动端设计好基本内容，再对较大尺寸的美观设计。设计重心的转移相对简单流畅。

meta 设置

不设置的话，移动端默认网页没有响应式设计，并尝试模拟电脑浏览器浏览。

媒介分离

media feature 节点设置，由小而大，逐步覆盖，转换样式。用的最多的 一般是 @media (min-width: xxx)

最好用em为单位，适用性广，且用户可调节

media type有screen 和 print，一般不用关心 print 打印功能，除了一些文档页面的打印，应该去除一些不必要的头部、背景、颜色

流体设计

用户在主动改变浏览器尺寸时，比如电脑浏览器尺寸的调整，手机的分屏功能等等已有或以后的功能，流体设计会让响应式页面更流畅，用户体验更好。

更多的使用em、百分比，响应式布局。少使用固定尺寸，固定样式。

图片压缩

图片是流量的大头，必须涉法减少图片体积，并不影响用户体验。

• css 的at-rule @media 可以选择性加载图片
• html 可以srcset属性设置