大家好，今天Win10系统之家小编给大家分享「如何做响应式布局网站」的知识，如果能碰巧解决你现在面临的问题，记得收藏本站或分享给你的好友们哟~，现在开始吧！

1.什么是响应式布局网站

　　先来说说什么是响应式的网站呢，我们通过搜索百度百科得知，响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。这下大家应该明白了吧，就是我们设计的网站在针对电脑，手机，还有一些智能设备的时候都能正常的浏览。不需另建单独的网址，一个页面适用于所有的设备，即自适应功能，可以自动识别屏幕宽度、并做出相应调整的网页。如今，这种响应式网站设计已经成为时代的潮流了。
下面我们带大家了解一下响应式网站设计的优缺点
1、更加方便维护和工作 
以有我们一般要做一个电脑网站，想让我们的电脑网站能在手机上面正常打开，要开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。当然成本方面可能也就大大减少。
2、积累分享
响应式网站设计可以让你通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。
3、用户友好
 响应式的网站设计能够对用户产生友好度，并且对于不同的分辨率能够灵活的进行操作应用。同时还可以进行收集分享，我们可以通过网站中这些单一的网站URL地址把那些社交分享链接收集起来。
小微企业用微企点自助建站，真响应。

2.HTML5中响应式布局怎么弄

　　步骤1 创建空白的HTML 5模版 
首先，我们创建一个空白的模版，代码很简单，如下所示：
复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：
复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码 
1）首先往标题中增加如下代码：
Simple HTML5 Template 
复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：
Home About Parent Page Child
One Child Two with child Child One Child 
Two Child Three Child Three
Contact 
复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：
This is a title for post 
Richard KS 20th March 2013 Tutorials HTML5, CSS3 
and Responsive 10 Comments Lorem 
Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 
1500s 
复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

3.web响应式网站怎么做

　　Step1：信息架构，确定内容策略。
根据产品定位和用户分析，交互设计师确定站点信息架构。（信息架构呈现方式有很多种，这不是本文重点，不详述）。
这时候可以明确这个产品有多少页面，每个页面包含多少内容，内容优先级是什么。很多产品包含N多页面，每个页面一一考虑响应式设计容易造成混乱且成 本巨大。所以下一步重要工作是分析页面类型把页面归类。以玩客为例，可以把10多个页面分成三类：列表类页面、详情类页面、操作类页面。
Step2：响应式移动框架
先说下为什么第二步要先设计移动框架。移动优先是移动互联网浪潮下应运而生的理念，由Luke Wroblewski最早提出。移动优先并不是指移动更重要，响应式设计理念里设备是同等重要的。它是指优先设计手机端的体验，有三个原因：
手机让设计专注，强迫你想清楚什么信息是最重要的。因为手机屏幕小，每屏呈现的内容少；触屏手机使用手指操作而非鼠标这样的精密设备来操作，对操 作有更高要求；手机使用场景更加丰富，很多场景用户是缺乏耐心的，比如当你排队看电影正在找手机上的电子票，马上排到你了翻半天却迟迟找不到那张票这是多 么令人崩溃的事情。
手机许多特性让设计更强大。手机上的语音输入、地理位置定位、丰富的手势操作、越来越多传感器，手机交互比PC拥有更多可能性。从手机开始设计，让你更早地思考如何发挥这些特性。
手机正在迅猛增长。手机即将超越PC，成为最主流的上网方式，这个趋势是不可逆的。
从移动开始做设计对习惯了PC环境的设计师可能是一种挑战，思考方式工作习惯都被迫做出改变。但这种改变必须去适应，因为用户习惯在改变。
回正题，上一步已经把页面归类并确定每个页面内容优先级，现在接着分析每种类型页面的导航、主体内容等框架结构，最终得出一份框架结构表。从玩客框 架结构看出，全局导航是所有页面公共的，局部导航只有列表类页面才有，详情类页面都有一个“页面主人”信息，而关联导航不是每个页面都有。
Step3：响应式设计框架
根据手机端的框架拓展出平板和PC端框架。这是复杂产品实现响应式设计的关键步骤，它是让众多页面有条理地响应起来的基础。第一件事情是确定响应式 模式，即从手机到平板到PC，导航怎么变化，页面布局用哪种响应方式，根据内容优先级如何调整模块顺序，等等。玩客在PC端以三栏布局为主，左边栏作为局 部导航或者主人信息区，中间栏始终是页面主体信息，当页面需要关联导航时统一放在右边栏。
应式是一种设计理念与前端技术紧密结合的新兴形态，鼓励尽早进行跨职能沟通协作。交互确定响应式框架和栅格系统后，其他角色就可以同步开展工作 了。前端开始介入完成栅格和框架搭建，产出页面基础框架。视觉同步开始探索和定义视觉风格探索，制定视觉框架，产出风格关键词、产品配色方案。整个过程需 要几个角色不断讨论确定。
Step4：模块设计
按照用户体验中的移动优先的原则应该先进行移动端的模块细节设计，不过我们选择了从PC端开始设计细节。因为PC端开发能够充分暴露业务复杂度，项目团队的设 计、开发、测试在PC环境下拥有成熟的工具和流程，从PC开始让开发过程更顺畅。所以个人认为移动优先是确定内容策略时应该遵循的理念，细节设计和开发过 程是否要移动优先，取决于产品定位和项目团队情况。
响应式框架确定了页面结构和响应模式，模块设计这个过程开始完善所有信息排版和交互形式，这是交互设计师最熟练也是最耗时的工作。这个过程与传统流程没太大区别，只是心里要不断提醒自己，这个模块不是只为这个设备设计，它在其它设备下会出问题吗？
交互确定页面模块细节后可以抽取出产品用到的控件、组件和公共模块，现在视觉和前端开始做一件有别于传统流程的事情。视觉根据前期定义的风格设计控组件和公共模块的视觉效果，把它们拼成一个模拟的页面，我们称之为风格拼贴稿。前端再把风格拼贴稿里的控组件和公共模块实现出来，统一维护一套组件规范代码。
Step5：响应式模块设计
PC端页面模块细节和风格拼贴稿完成后，剩下工作是拓展出平板和手机端的完整设计稿，前端产出全部响应式页面代码。进行响应式模块设计时最需要关注的仍然是让操作符合设备习惯，充分利用设备特性。
至此，一个全站响应式产品的页面就陆续出来了。很多人认为响应式设计维护成本高的理由是一个页面要同时设计多套设计稿。玩客这次经验告诉我们，确定一套设计稿和栅格系统后再拓展出其它设备下的设计方案，工作量远比想象中的低。
Step6：测试&讨论&优化，提交开发
离大功告成还差最后一步，在真实设备下测试页面效果，项目团队讨论并持续优化用户体验。
在提交开发之前需要尽早明确服务端响应（RESS） 的策略。服务端与客户端结合是目前解决响应式页面性能问题的最合理方案。哪些大图片在移动设备下只需输出小尺寸图片？哪些内容在什么设备下是不需要开发输 出的？哪些可以减少输出的数据数量？与开发团队协作的响应式可以有效控制页面文件大小，避免页面成为移动设备上烧用户流量的罪魁祸首。
测试通过后提交页面进入开发环节。我们从可用性和可访问性两方面总结了一份响应式页面测试checklist，测试要点包括但不限于以下内容。

4.CSS3怎么做出响应式布局

　　做响应式网站离不开CSS响应式布局查询代码写法，而在此之前，我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询。
 
什么是媒体查询？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
 
如何在CSS中引入媒体查询？
媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。
 
如何用CSS做响应式布局呢？
1、在HTML头部添加以下代码，用来显示兼容移动设备的显示效果。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
参数详解：
width=device-width ：宽度等于当前设备的宽度
initial-scale=1 ：初始的缩放比例（默认为1）
minimum-scale=1 ：允许用户缩放到的最小比例（默认为1）
maximum-scale=1 ：允许用户缩放到的最大比例（默认为1）
user-scalable=no ：用户是否可以手动缩放（默认为no）
 
2、引入包含Media的CSS文件
一般情况HTMLCSS代码都是分开写的，Media也不例外。
<link rel="stylesheet" type="text/css"  media="only screen and (max-width:320px)"/>
<link rel="stylesheet" type="text/css"  media="only screen and (min-width:321px) and (max-width:375px)"/>
 
3、写Media中的代码
以某个网页的响应式布局为例
结构:@media设备类型and (设备特性)｛样式代码｝
/*媒体查询*/
/*当页面大于1200px时，大屏幕，主要是PC端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
 #adver .center {
 width: 50%;
 margin: -10px 0 0 -25%;
 }
 main .center h2 {
 font-size: 40px;
 }
}
/*768和991像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
 #adver .center {
 width: 60%;
 margin: -10px 0 0 -30%;
 }
 #adver .search, #adver .button {
 font-size: 20px;
 }
 main .center h2 {
 font-size: 35px;
 }
}
/*在480和767像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
 header, header .center, header .link {
 height: 45px;
 }
 header .logo, .sm-hidden,.sidebar,.md-hidden {
 display: none;
 }
 header .link {
 width: 100%;
 line-height: 45px;
 }
 #adver {
 padding: 45px 0 0 0;
 }
 #adver .center {
 width: 70%;
 height: 53px;
 margin: -10px 0 0 -35%;
 }
 #adver .search, #adver .button {
 height: 45px;
 font-size: 18px;
 }
 .sm-visible {
 display: block;
 }
 main .center h2 {
 font-size: 30px;
 }
 main .center p {
 font-size: 15px;
 }
 main figure {
 width: 49.2%;
 }
}
/*在小于480像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
 header, header .center, header .link {
 height: 45px;
 }
 header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
 display: none;
 }
 header .link {
 width: 100%;
 line-height: 45px;
 }
 header .link li {
 width: 25%;
 }
 #adver {
 padding: 45px 0 0 0;
 }
 #adver .center {
 width: 80%;
 height: 48px;
 margin: -10px 0 0 -40%;
 }
 #adver .search, #adver .button {
 height: 40px;
 font-size: 16px;
 }
 .sm-visible {
 display: block;
 }
 footer .bottom, footer .version {
 font-size: 13px;
 }
 main .center h2 {
 font-size: 26px;
 }
 main .center p {
 font-size: 14px;
 }
 main figure {
 width: 99%;
 }
}
响应式布局的原理就是在不同的窗口大小下显示不同的结构和样式。只要掌握好CSS的样式，响应式布局就没问题。

5.怎么实现网站的响应式布局，适合不同分辨率

　　如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？对此，马海祥觉的我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置：
那么我们具体要怎么做呢？
1、Meta标签定义
使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
通过快捷方式打开时全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
隐藏状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhone会将看起来像电话号码的数字添加电话连接，应当关闭
<meta name="format-detection" content="telephone=no" />
2、使用Media Queries适配对应样式
常用于布局的CSS Media Queries有以下几种：
设备类型(media type):
all所有设备；
 screen 电脑显示器；
 print打印用纸或打印预览视图；
 handheld便携设备；
 tv电视机类型的设备；
 speech语意和音频盒成器；
 braille盲人用点字法触觉回馈设备；
 embossed盲文打印机；
 projection各种投影设备；
 tty使用固定密度字母栅格的媒介，比如电传打字机和终端。
设备特性(media feature):
width浏览器宽度；
 height浏览器高度；
 device-width设备屏幕分辨率的宽度值；
 device-height设备屏幕分辨率的高度值；
 orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；
 aspect-ratio比例值，浏览器的纵横比；
 device-aspect-ratio比例值，屏幕的纵横比。
例子：
/* for 240 px width screen */
 @media only screen and (max-device-width:240px){
 selector{ ... }
 }
 /* for 320px width screen */
 @media only screen and (min-device-width:241px) and (max-device-width:320px){
 selector{ ... }
 }
 /* for 480 px width screen */
 @media only screen (min-device-width:321px)and (max-device-width:480px){
 selector{ ... }
 }
适用于布局的Media Queries，这里在马海祥博客上我们就不再做详述，有兴趣的话，可通过官方文档进一步了解。
3、表格(table)的响应式处理
那么对于表格(table)的响应式处理该是怎样的呢？我们该如何突破Table的局限性呢？接下来我们来了解以下的几种针对表格响应式处理的方法：
（1）、隐藏不重要数据列
处理前：
（点击查看大图）
处理后：
实现方法代码：
@media only screen and (max-width: 800px) {
 table td:nth-child(2),
 table th:nth-child(2) {display: none;}
 }
 @media only screen and (max-width: 640px) {
 table td:nth-child(4),
 table th:nth-child(4),
 table td:nth-child(7),
 table th:nth-child(7),
 table td:nth-child(8),
 th:nth-child(8){display: none;}
 }
以用户角度思考，每个人对数据的认知不同，或许你隐藏的数据对于他却是很重要的，所以对于这种方法马海祥并不推荐。
（2）、多列横向变2列纵向
处理前：
处理后：
实现方法：<thead>定位隐藏，<td>变块元素，并绑定对应<th>列名，然后用伪元素的content:attr(data-th)实现<th>：
（3）、固定首列，剩余列横向滚动
处理前：
处理后：
实现原理代码：
thead {float:left;}
 tbody {display:block;width:auto;overflow-x:auto;}
二、响应式内容
1、响应式图片
带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。
处理原理：浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过查询。
解决方案：其实W3C已经有一个用于响应式图形的草案：新定义标签<picture>，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。虽然目前不支持，但我们还是来了解下，为之后的内容做个铺垫。
<picture>是一个图形element，内容由多个源图组成，并由CSS Media Queries来适配出合理图形，代码规范如下：
<picture width="500" height="500">
 <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
 <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
 <source srcset="small-1.jpg 1x, small-2.jpg 2x">
 <img src="small-1.jpg" alt="">
 <p>Accessible text</p>
 <!-- Fallback content-->
 <noscript>
 <img src="external/imgs/small.jpg" alt="Team photo">
 </noscript>
 </picture>
注：source: 一个图片源；
 media: 媒体查询，用于适配屏幕尺寸；
 srcset: 图片链接，1x适应普通屏，2x适应高清屏；
 <noscript/>: 当浏览器不支持脚本时的一个替代方案；
 <img/>: 初始图片；另外还有一个无障碍文本，类似<img/>的alt属性。
虽然<picture>目前还不支持，但它的原理我们是可借鉴的，所以就诞生了一个用于图片响应式处理的类库Picturefill
<span data-picture data-alt="图片描述文本">
 <span data-src="small.jpg"></span>
 <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
 <span data-src="large.jpg" data-media="(min-width: 800px)"></span>
 <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
 <!-- 浏览器不支持JS时的备用方案. -->
 <noscript>
 <img src="external/imgs/small.jpg" alt="图片描述文本">
 </noscript>
 </span>
其原理就是JS获取Source的源以及CSS Media Queries规则，输出适应图片，逻辑细节这里不再解析，感兴趣的可查看其JS代码，逻辑不是很复杂，也可以自己封装一个类库，以适用于自身产品，例如图片加载失败的替代方案。
当然，在未来的CSS Image Level 4中已经实现了响应式图片的原生语法：image-set
<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
 <image-set-decl> = [ <image> | <string> ] <resolution>
那么我们的响应式图片可以这样重写了
background-image:url(default.jpg); /* 普通幕 */
 background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */
注：Webkit 目前只实现了 url() 形式的取值，且dppx值取负值[-2x]貌似也是合法的。
当然除此之外，还有其他的响应式处理，如服务端user-agent嗅探。
2、高分辨率(DPI)下的响应式处理
（1）、SVG：优点可承载色彩丰富、设计复杂图形，且渲染不会出现边缘不顺滑；缺点是IE的支持不完美。
（2）、Icon fonts：支持多浏览器，图形颜色大小的修改成本低，易于维护；图形表现单一，不支持色彩丰富且复杂的图形，IE6渲染有毛边。
（3）、-webkit-image-set:只支持单个图形的适配，不利于图形合并，兼容不完美（Safari 6+, Chrome 21+）。
JS检测：var retina = window.devicePixelRatio > 1;
CSS Media Query:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
 (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
 (min-resolution: 2dppx), /* The standard way */
 (min-resolution: 192dpi) /* dppx fallback */
3、高分辨率下的1px border
由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完美的解决方案。
在Photoshop中，如果需要看似0.5px的边框，常见的方法就是对1px边框加上阴影模糊1px。同理，我们在retina屏下需要做到真实的1px边框，可利用box-shadow属性模拟。
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
 only screen and (min-device-pixel-ratio:1.5) {
 button {
 border:none;
 padding:0 16px;
 box-shadow: inset 0 0 1px #000,
 inset 0 1px 0 #75c2f8,
 0 1px 1px -1px rgba(0, 0, 0, .5);
 }
 }

以上就是关于「如何做响应式布局网站」的全部内容，本文讲解到这里啦，希望对大家有所帮助。如果你还想了解更多这方面的信息，记得收藏关注本站~

★文②章来自Win10系统之家，未经允许不得转载！