刚开始接触移并开始尝试写移动端应该都遇到过这样的情况,你以iPhone 6/7/8移动端为基础写的页面在切换到其他移动端的时候页面会由这个样子
变成这个样子
让你原本已经布好的排版变得不那么美观,甚至有点丑,这就牵扯到一个新的东西 响应式布局
那响应式布局到底是什么呢?它可以起到什么作用呢?
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计使用呢?
1:使用相对单位 % rem vh vw
2: 使用媒体查询,相当于在不同情况下令写了一套CSS样式
3: 借助UI 框架;因为UI是别人封装好的响应式。