Ⅰ 四十二、移动端web开发之响应式布局
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备的划分情况：
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小， 再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
但是我们也可以根据实际情况自己定义划分
bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。bootstrap是基于HTML、CSS和JavaScript的，它简洁灵活，使得web开发更加快捷。
中文网 官网 推荐网站
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
在现阶段，我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。
Bootstrap使用四步曲：
bootstrap需要为页面内容和栅格系统包裹一个 .container 或者 .container-fluid 容器，它提供了两个作此用处的类。
.container
.container-fluid
栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成 若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
演示效果
Ⅱ 列举响应式web设计需要应用哪些技术
响应式Web设计（Responsive Web design）的理念是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
Ⅲ 如何将web页面改成响应式
1.检测网页响应式 2.编辑网页源文件3植入响应式代码4.横屏响应式设计5.竖屏响应式设计
6.全屏响应式设计7.加工检测，如果嫌麻烦的话，直接用nicebox做
Ⅳ 响应式web设计怎么实现
想简单的话用bootstrap,vue.js这些框架，这些框架自动自适应
想自己写判断也可以，判断屏幕尺寸然后采用不同样式
<metaname=”viewport”content=”width=device-width,initial-scale=1.0″>
css里判断屏幕尺寸：
@mediaonlyscreenand(min-width:320px)and(max-width:480px){}
Ⅳ 如何将web页面改成响应式
第一步：检测网页响应式
浏览器打开调试模式，打开响应式设计模式，在预览区域拖动大小范围，如果页面元素随大小变化而自适应，则页面是响应式页面，反之，页面是固定非响应式页面。如图：
第二步：编辑网页源文件
用Dreamweaver打开页面源文件，查看代码样式及文件结构，（Web页面的视觉效果由CSS样式表文件控制）。如图：
第三步：植入响应式代码
在CSS样式表中插入以下代码：
@media screen and (min-width:200px) and (max-device-width:640px){
/*这里写元素的样式*/
}
代码解释：这句代码是指定了在200像素~640像素之间的终端，显示的效果，在其他终端不显示。
第四步：横屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：
第五步：竖屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：
第六步：全屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：
7
第七步：加工检测
响应式设计完成之后，用不同的终端全部检测一遍，有不合格的地方继续修改，这是程序员必须知道的也不能忽视的。
Ⅵ 做响应式web 页面怎么设计
响应式Web设计的方法
介绍完响应式Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。
首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍。
通过媒体查询的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种：
1、通过link标签：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />
示例代码代表当当前屏幕宽度小于479px的时候，加载testcssbywidth1.css文件来渲染页面。
2、CSS中直接设置：
@media screen and (max-width:479px) {
/* 具体的CSS属性设置 */
}
对于Media Queries的一些常用属性，只对常用的几个做一个简单列举说明，其他的属性请各位自行查阅相关资料：
width：描述终端设备显示区域的宽度，接受max/min的前缀；
height：描述终端设备显示区域的高度，接受max/min的前缀；
device-width：描述终端设备屏幕的宽度，接受max/min的前缀；
device-height：描述终端设备屏幕的高度，接受max/min的前缀；
orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。
当我们调整浏览器大小的时候，上面通过媒体查询属性的操作就可以完成响应式Web设计的工作，但是这却不能满足移动终端的浏览器，因为移动浏览器默认页面是为宽屏幕设计的，所以会把他缩小来适应小屏幕，但是终端设备却无法识别正确的宽度，所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的
Ⅶ html5怎么制作一个响应式网页
HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。
1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。
Ⅷ 网页设计中响应式具体怎么实现
眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？
在Web设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或许会有另外一种方式，可以帮助我们避免这种情况的发生。
响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
Ⅸ 如何测试响应式web
方法： 旧版本的谷歌浏览器，没有自动响应式测试的功能，可以在谷歌应用市场
安装一款名为“Mobile/RWD Tester”的插件。新的谷歌浏览器自带响应式测试功能，可以进行响应式网站的测试。 在网络搜索引擎搜索“Firefox Developer Edition”关键词，在搜索结果中，点击“Firefox Developer Edition — Mozilla”，进入Firefox Developer Edition官方网站。
下载Firefox Developer Edition 即火狐浏览器开发者版本，点击下载的可执行文件进行安装。
安装成功之后，点击开发者工具按钮，在下拉菜单中点击“响应式设计视图”，出现浏览器自带有响应式测试功能。
使用一个响应式网站进行测试，可以根据需要切换不同的屏幕分辨率。
BrowserStack 是一个提供网站浏览器兼容性测试的在线云端应用，支持9大操作系统上的100多款浏览器。支持本地测试，预装有完备的开发者工具。BrowserStack在近期发布了API，移动开发者将会进一步提高测试效率。
除此之外，还有“网络移动云测试中心”提供响应式测试服务，选择，其中的Web App测试服务，输入网站即可进行测试。
Ⅹ 什么是响应式Web设计怎样进行（4）
但是对于页面中的文字内容信息来说，则不能简单的只从"同比缩小"和"调整布局结构"这两方面去处理。对于手机等移动设备来说，在文字内容方面，已经有了很多最佳实践方式和指导原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。响应式Web设计的思想，一方面要保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；另一方面，则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。有一条样式代码，我们已经使用了多年：display: none;我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素，也可以使用前文的方法，通过JS判断当前硬件屏幕规格，在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如，对于手机类设备，我们可以隐藏掉大块的文字内容区，而只显示一个简单的导航结构，其中的导航元素可以指向详细内容页面。注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现；display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说，避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例：图中上半部分是大屏幕设备所显示的完整页面，下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下：<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p> <div id="content"> <h2>Main Content</h2></div><div id="sidebar-left"> <h2>A Left Sidebar</h2></div><div id="sidebar-right"> <h2>A Right Sidebar</h2> </div>下面是默认的主样式表，其中，我们要隐藏掉链接导航部分(sidebar-nav)，因为默认样式适用的设备屏幕会足够大，足够显示包括两个侧边栏在内的所有内容。#content{ width: 54%; float: left; margin-right: 3%;}#sidebar-left{ width: 20%; float: left; margin-right: 3%;}#sidebar-right{ width: 20%; float: left;} .sidebar-nav{display: none;}下面是用于小屏幕移动设备的样式表代码。现在，我们要隐藏掉两个侧边栏，并使sidebar-nav显示出来。借助JavaScript，当用户点击sidebar-nav中的链接时，对应的侧边栏可以恢复显示。当然，触发恢复显示的方式有很多种，即可以通过JS改变侧边栏的display属性值，也可以为其添加额外的布局样式。#content{ width: 100%;}#sidebar-left{ display: none;}#sidebar-right{ .sidebar-nav{display: inline;}现在，我们的页面已经可以随着设备和屏幕规格的变更，响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备，我们还要在实践过程中注意一些该类设备共有的设计指导原则。比如，针对手机设备，使用一个特定的样式，将页面原有的文字导航元素变为更易操作的图标形式。下面的一些文章资源可作参考阅读：Mobile Web Design Trends For 20097 Usability Guidelines for Websites on Mobile Devices触屏与鼠标触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品，比如手机，但是市场上越来越多的大屏幕设备也开始使用触屏技术；且不说iPad一类的平板电脑，就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t，即使用传统的键鼠设备，同时也加入了触屏技术。相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范；两者又有各自所适用的领域。所幸，要使我们的设计方案同时满足这两类设备的规范，并非一件难事，只是有些地方需要注意。比如，触屏设备无法反映CSS定义的hover行为及相应的样式，因为它没有鼠标指针的概念，手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。有兴趣的话，可以读读这篇"Designing for Touchscreen"，这里提到的很多建议即有利于改进针对触屏设备的设计方式，同时也不会削弱传统键鼠设备上的用户体验。比如，放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作，而左手负责握住设备；这样，放在右侧的导航列表即方便右手的点击，又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。