什么是Responsive设计？响应式设计的基本技巧

Posted 2021-04-30 天天向上好好学习

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

       什么是Responsive设计？有的同学认为Responsive设计是自适应布局，也有的同学认为Responsive是网格布局。其实这些想法都不正确。Wikipedia对Responsive做了详细的描述，我在这里就简单的说一下。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结构才是简单干净的呢？郑州网站建设公司这里教大家一个快速测试的方法：

 

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