响应式设计

阅读目录

1. 理解响应式设计
   • 移动优先
   • 媒体查询
   • 流式布局
   • 响应式图片

 

---

回到顶部

理解响应式设计

　　页面的设计与开发能够根据用户行为（如：缩放页面尺寸）以及设备平台（如手机、平板等）进行相应的调整，这称为“响应式设计”。这样，就能避免维护多个网站来适应不同屏幕尺寸的设备。响应式设计遵循三大原则：

移动优先

　　由于移动版网页的限制条件更多，比如：屏幕空间受限、网络更慢。先考虑这些限制来进行移动版页面的设计，再在其基础上“渐进增强”，进行更大视口设备的页面的设计。为了处理移动端，需要在HTML文档的头部添加<meta>标签，来告诉移动设备已经特意将网页适配了小屏设备。若不加该标签，移动设备的浏览器会假定该页面不是响应式的，会尝试模拟PC端浏览器来呈现页面，之前做的移动端设计就白费了。

<meta name="viewport" content="width=device-width, initial-scale=1">

 

媒体查询

　　使用@media规则，使某些样式只在页面满足特定条件时才生效，可以为不同大小的视口定制样式。下面代码，在页面尺寸大于或等于50em时会使里面的样式生效。　

@media (min-width: 50em) {
      :root{
        font-size: 1.125em;
      }
}

流式布局

　　指的是页面使用的容器应该随视口宽度而变化，避免使用固定布局（如：使用width固定宽度，或使用px和em单位），在小屏上使用固定布局会导致超出视口范围，出现水平滚动条。

常见的流式布局操作：

• 为主页面容器设置左右内边距，或设置左右外边距为auto，让容器自动调整宽度以适应视口；
• 容器内的元素使用百分比来定义宽度；
• 内容使用相对单位来进行自适应调整；
• 采用弹性盒布局；

 

响应式图片

　　在移动端，不仅要让图片适应屏幕，还要考虑带宽限制的问题，避免不必要的高分辨率图片，因为小屏幕设备的浏览器会为了适配屏幕尺寸自动将图片缩小，增加下载流量。最好的方法是能够为一个图片创建多个不同分辨率的副本。

• 使用CSS加载的图片：可以使用@media规则来进行挑选
• HTML文档里的<img>标签：添加srcset属性来为不同的屏幕分辨率指定不同的图片URL。