Responsive设计的十个基本技巧

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也分享了很多这方面的教程和资源。由于组织了YY活动在线上和大家分享Responsive的设计,为了能让大家更好的理解,我自己也有必要好好的做一下功课,今天这个就是功课,想和大家一起分享一下Responsive设计的一些基本技巧,和相对应的学习资源,希望对大家有所帮助。

什么是Responsive设计?有的同学认为Responsive设计是自适应布局,也有的同学认为Responsive是网格布局。其实这些想法都不正确。WikipediaResponsive做了详细的描述,我在这里就简单的说一下。Responsive设计简单的称为RWD,是精心提供各种设备都能阅读网页的一种设计方法,RWD能让你的网页在不同的设备中展现成不同的设计风格。从这一点描述来说,Responsve既不是流体布局,也不是什么网格布局,他是一种独特的网页设计方法。

Responsive设计无疑是网页设计中的一个热门话题。某种程度上,他将是一个最受欢迎的网页设计概念,因为随着网站用户日渐多样化的访问方法,比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不同形式的显屏出现。这样我们以前那样的网页设计就无法在适合上述各种设备的浏览,这也给我们后续的网页设计提出了一个全新的设计概念Responsive设计。让我们的网页能适应各种平台、各种设备上渲染。

这个时候可能又有人会心生疑问,是不是Responsive是用来制作Mobile页面的?这个问题我经常听到有同学问?其实这是一个很简单的问题,Mobile页面和我们平时的页面制作基本上是一样的,只不过大小不一样,其中稍有细节需要注意,从这一点出发,如果就Responsive设计是用来制作Mobile页面并不妥,只能说Responsive设计能让你的页面在Mobile上显示的更加完美。说到这,可能你会感觉到Responsive到底是什么?又怎么使用?我又要怎么学习呢?其实这些都不是问,接下来和大家分享一下学习或者说使用Responsive设计的一些基本技巧,以及对应的学习资源。

一、保持一个简单的布布局

布局是一个在简单不过的问题了,也是每个网页设计中必须包含的部分,但我们使用Responsive设计第一步要做的事情就是让你的页面布局尽量的简单。实现一个简单的布局,我们有一些小技巧:

Responsive布局技巧

在Responsive布局中,我们可以毫无保留的丢弃:

  1. 尽量少用无关紧要的div
  2. 不使用内联元素(inline)
  3. 尽量少用js或flash
  4. 丢去没用的绝对定位和浮动样式
  5. 屏弃任何冗余结构和不使用100%设置

有舍才有得,丢去了一些对Responsive有影响的东东,那么有哪些东东能帮助Responsive确定更好的布局呢?

  1. 使用HTML5 Doctype和相关指南
  2. 重置好你的样式(reset.css)
  3. 一个简单的有语义的核心布局
  4. 给重要的网页元素使用简单的技巧,比如导航菜单之类元素

使用这些技巧,无非是为了保持你的HTML简单干净,而且在你的页面布局中的关键部分(元素)不要过分的依赖现代技巧来实现,比如说css3特效或者js脚本。

说了这么多,怎么样的一个布局或者说HTML结构才是简单干净的呢?这里教大家一个快速测试的方法:

你首先禁掉你页面中所有的样式(以及与样式相关的信息),在浏览器中打开,如果你的内容排列有序,方便阅读,那么你的这个结构不会差到哪里去。

扩展阅读:

  1. Responsive Layouts, Responsively Wireframed
  2. Responsive Design 101
  3. A Simple Device Diagram for Responsive Design Planning
  4. Multi-Device Layout Patterns
  5. Beginner’s Guide to Responsive Web Design
  6. Create A Responsive, Mobile-First WordPress Theme
  7. Initializr
  8. 5 Patterns To Rearrange Responsive Layouts

二、使用Medial Queries

Medial Queries在CSS3中得到很大的扩展,如果你不太了解Medial Queries是什么?建议你先狠狠点击这里进行了解。而且Medial Queries在Responsive中扮演着一个非常重要的角色,可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说Medial Queries是一个媒体查询,可以根据设置的尺寸,查询出适配的样式。我们回过头来想,Responsive设计最关注的就是宽度:根据用户的使用设备的当前宽度,你的Web页面将加载一个备用的样式,实现特定的页面风格。

那么Medial Queries要怎么使用呢?有几种调用的方式,详细的也可以阅读这里.

/*import 导入法*/
<style>
  @import url(tiny.css) (min-
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/10-basic-tips-about-responsive-design.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部