什么是Responsive设计?有人认为Responsive设计是自适应布局，也有人认为Responsive是网格布局。其实这些想法都不正确。Wikipedia对Responsive做了详细的描述，Responsive设计简单的称为RWD，是精心提供各种设备都能阅读网页的一种设计方法，RWD能让你的网页在不同的设备中展现成不同的设计风格。下面学步园小编来讲解下Responsive设计有哪些技巧?
Responsive设计有哪些技巧
Responsive设计无疑是网页设计中的一个热门话题。某种程度上，他将是一个最受欢迎的网页设计概念，因为随着网站用户日渐多样化的访问方法，比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不同形式的显屏出现。这样我们以前那样的网页设计就无法在适合上述各种设备的浏览，这也给我们后续的网页设计提出了一个全新的设计概念Responsive设计。让我们的网页能适应各种平台、各种设备上渲染。
这个时候可能又有人会心生疑问，是不是Responsive是用来制作Mobile页面的?这个问题我经常听到有同学问?其实这是一个很简单的问题，Mobile页面和我们平时的页面制作基本上是一样的，只不过大小不一样，其中稍有细节需要注意，从这一点出发，如果就Responsive设计是用来制作Mobile页面并不妥，只能说Responsive设计能让你的页面在Mobile上显示的更加完美。说到这，可能你会感觉到Responsive到底是什么?又怎么使用?我又要怎么学习呢?其实这些都不是问，接下来和大家分享一下学习或者说使用Responsive设计的一些基本技巧，以及对应的学习资源。
一、保持一个简单的布布局
布局是一个在简单不过的问题了，也是每个网页设计中必须包含的部分，但我们使用Responsive设计第一步要做的事情就是让你的页面布局尽量的简单。实现一个简单的布局，我们有一些小技巧：
Responsive布局技巧
在Responsive布局中，我们可以毫无保留的丢弃：
尽量少用无关紧要的div
不使用内联元素(inline)
尽量少用js或flash
丢去没用的绝对定位和浮动样式
屏弃任何冗余结构和不使用100%设置
有舍才有得，丢去了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢?
使用HTML5 Doctype和相关指南
重置好你的样式(reset.css)
一个简单的有语义的核心布局
给重要的网页元素使用简单的技巧，比如导航菜单之类元素
使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分(元素)不要过分的依赖现代技巧来实现，比如说css3特效或者js脚本。
说了这么多，怎么样的一个布局或者说HTML结构才是简单干净的呢?这里教大家一个快速测试的方法：
你首先禁掉你页面中所有的样式(以及与样式相关的信息)，在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。
扩展阅读：
Responsive Layouts, Responsively Wireframed
Responsive Design 101
A Simple Device Diagram for Responsive Design Planning
Multi-Device Layout Patterns
Beginner’s Guide to Responsive Web Design
Create A Responsive, Mobile-First WordPress Theme
Initializr
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 导入法*/
/*直接写在样式文件中*/
@media screen and (max-width:300px) {
/*Tiny styles*/
}
@media screen and (max-width: 600px) {
/*small styles*/
}
@media screen and (max-width:900) {
/*big styles*/
}
Responsive设计有哪些技巧
上面只是一种简单的使用方法，其实Medial Queries很简单，你可以为Responsive制定一些常用的模板，例如：
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
以上就是关于“Responsive设计有哪些技巧”的内容，希望对大家有用。更多资讯请关注学步园。学步园，您学习IT技术的优质平台!