响应式页面设计响应式web设计怎么实现

响应式页面设计时间:2021-09-07 阅读:()

响应式Web设计的概念，应该怎样做响应式Web设计

前言现在使用移动设备人越来越多，移动版的Website随之也越来越重要；但是移动端设备的大小不一，屏幕分辨率各不相同，我们不可能为 BlackBerry，iPhone， iPad等等每个都做单独的页面设计。

所以我们需要的Website设计要能迎合多种device的要求并且兼容所有的屏幕分辨率，这种设计就叫响应式 Web设计什么是响应式Web设计（Responsive Web design）？响应式Web设计是一种Web设计和开发能够根据屏幕大小、平台和方向对用户的行为和环境做出响应的设计。

它包括了灵活的网格和布局，图像和智能使用CSS的media queries特性。

当用户从切换到iPad上时，该网站应能自动地切换CSS规则以适应Device分辨率，图像尺寸和脚本执行。

换句话说，响应式Web设计是具备能够自动响应用户喜好的技术。

这将一劳永逸的满足对每个新上市的移动终端都要进行不同设计和开发的需求。

需要注意的是：响应式Web设计不仅仅是下图列出了一些最常见的：所以，如果你要使你的客户满意，你必须让你的网站能够自动调整并适合上述设备的屏幕。

例如，你应该为不同的设备定制不同的布局结构：定制布局同样，有些时候，根据需要显示或隐藏一些内容：显示或隐藏内容很明显，我们不能为每一种设备定制一个页面。

所以，我们应该如何处理这种情况呢？

什么是响应式网页设计

响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。

这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

什么是响应式布局设计

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。

随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式优点和缺点优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 2设计思路我们在上面了解了什么是响应式布局，那在我们的实际项目中应该怎么去设计呢？在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，还要来个不同尺寸设备，我们该怎么淡定下来呢？有需求就会有解决方案，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。

接下来就一起来深入的了解Media Query。

1、CSS3中的Media Query（媒介查询）是什么？通过不同的媒介类型和条件定义样式表规则。

媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。

如：width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

2、media query能够获取哪些值？设备的宽和高device-width，device-height显示屏幕/触觉设备。

渲染窗口的宽和高width，height显示屏幕/触觉设备。

设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。

画面比例aspect-ratio点阵打印机等。

设备比例device-aspect-ratio-点阵打印机等。

对象颜色或颜色列表color，color-index显示屏幕。

设备的分辨率resolution。

3、语法结构及用法 @media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules} 示例一：在link中使用@media： <link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/> 上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

示例二：在样式表中内嵌@media： @media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules} 在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。

only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

通过Media Queries实现响应式布局设计好了，我们明白了什么是Media Query，那我们一起来运用到响应式布局的设计项目中去。

设计思路很简单，首先先定义在标准浏览器下的固定宽度（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），然后用Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。

同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。

看看我们的例子： /* 当浏览器的可视区域小于980px */ @media screen and （max-width： 980px） { #wrap {width： 90%; margin:0 auto;} #content {width： 60%;padding： 5%;} #sidebar {width： 30%;} #footer {padding： 8% 5%;margin-bottom： 10px;} } /* 当浏览器的可视区域小于650px */ @media screen and （max-width： 650px） { #header {height： auto;} #searchform {position：： 5px;right： 0;} #content {width： auto; float： none; margin： 20px 0;} #sidebar {width： 100%; float： none; margin： 0;} } 通过上面我们就可以监测浏览器的可视区域变化的时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。

为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值： /* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust： none; } /* 设置HTML5元素为块 */ article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section { display： block; } /* 设置图片视频等自适应调整 */ img { max-width： 100%; height： auto; width： auto9; /* ie8 */ } .video embed， .video object， .video iframe { width： 100%; height： auto; } 最后要注意的是在页面的头部<head></head>之间加上下面这句∶ <meta name=“viewport” content=“width=device-width; initial-scale=1.0”> meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置∶ width – viewport的宽度 height – viewport的高度 initial-scale – 初始的缩放比例 minimum-scale – 允许用户缩放到的最小比例 maximum-scale – 允许用户缩放到的最大比例 user-scalable – 用户是否可以手动缩放

什么是响应式网页设计，对未来SEO有什么影响

响应式网页设计是根据设备的尺寸进行页面的适配的一种技术。

通俗一点说就是用响应式设计的网站，可以在不同的设备运行，比如说手机，pad、电脑等。

响应式设计的代码结构是div+css结构，相对应于以前老旧的容易被搜索引擎抓取。

更有利于SEO的优化。

未来SEO这个职业可能会跟网页设计结合在一起。

什么是响应式web设计

1. 响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。

再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。

当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。

这种特殊的设计形式就被成为“响应式Web设计”。

2. 响应式Web设计的优点：可以兼容所有尺寸的屏幕，随着手持设备（手机）屏幕尺寸繁多，也有很好的兼容性；而且开发一次，pc版和触屏版，手机版融合为一； 3. 响应式Web设计的缺点：对前端工程师要求比较高，它的屏幕兼容要求前端工程师对各种浏览器差异性了解比较多，对于大数据展示的门户站点，如果用同一页面，即时浏览器不崩溃，在手机上一个页面，很难滑到最底部，带来操作是十分不方便的，触屏版和手机版对优质信息展示不足。

4. 综合优缺点：响应式Web设计在企业站点，微型或者小站还是可以用的，对于大中型站点不合适（尤其大信息量展示的）。