怎样避免3种响应式设计中出现的问题.doc_第1页
怎样避免3种响应式设计中出现的问题.doc_第2页
怎样避免3种响应式设计中出现的问题.doc_第3页
怎样避免3种响应式设计中出现的问题.doc_第4页
怎样避免3种响应式设计中出现的问题.doc_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

怎样避免3种响应式设计中出现的问题响应式设计方法对开发者非常有用，因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站，也可以摒除诸如缩放和流式布局这些方法的弊端。本文重点讨论设计师遇到最多的3个响应式设计问题，也会提供一些规避错误的策略。缩放、流式布局与响应式这些术语容易造成混淆，设计师常常错误地交替互用。实际上，每个都是布局技巧的显著进化过程，像技术演进那样逐一显现。缩放布局，旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容，就这方面而言，它们是响应式的。布局本身保持静止，通过改变每一个元素来保持一致的表现。上图：不同分辨率下缩放布局的例子，这种设计为了统一牺牲了易读性。流式布局就不一样，因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点，克服了缩小文字的问题。用户主动缩放时，设计就被破坏了。上图：不同分辨率下流式布局的例子，这种设计为了易读性牺牲了统一。响应式设计不会缩放任何东西。相反，它会根据窗口尺寸决定显示哪些内容。上图：不同分辨率下响应式布局的例子。灾祸1：菜单折行如果在页面顶部使用了导航栏，当页面展现在小屏幕上时，响应式设计通常会把它“掰”成更紧凑的格式，但这并非总是有效，如果显示区域比断点更宽，又不足以在一行显示所有菜单项的话。结果会导致菜单的折行。有些方法可以解决这个问题。其一，减少导航栏中横排菜单项的数量，将它们分门别类。然后选中某类时，你可以通过下拉菜单来显示子类。其二，减少断点的数值。应该以导航栏开始出问题的实际数值为准，而非具体设备尺寸。其三，不同设备使用不同方式，例如滑动抽屉。灾祸2：使用固定宽度图片内容区域通常都随窗口尺寸变化。所以当固定宽度图片超出显示区域时，图片就被裁剪了。上图：糟糕的固定宽度图片例子，它太大了。于是出现了滚动条，内容被推到屏幕之外。通过给图片设定相对单位，可以避免这个问题。或者使用支持响应式的框架（比如Bootstrap），使用响应式图片class名来控制（例如class=img-responsive）。上图：同样的元素，用响应式图片class名的方式，滚动条就不见了。灾祸3：元素的扭曲这有点晦涩难懂，但本质上，布局显示在小窗口上的时候，所有未经处理的列都会以行的形式呈现。这是个问题，因为内容的扭曲会不经意地改变设计的层级。上图：列变成了行，扭曲了内容。解决方法显而易见，但令人惊奇的是，仍有很多人在纠结它：只要明确地设定元素的宽度、高度、内边距。如果它移出所处位置，盖住了其他元素，可以通过将它包裹在div容器中，设置外边距，迫使它回到原本的地方。规划有助于避免问题本文只讨论了3种最普遍遇到的响应式设计灾
人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论