育才学习网响应式页面怎么写
1.普通div+css改为响应式界面怎么写
方法1：使用已有的响应式网页框架，如bootstrap;
方法2:
a：声明页面viewport标签—-响应式页面的前提条件
<!--device指设备，initial-scale指打开的缩放比例，user-scalable指用户是否可以缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">b：使用响应式图片
/*只是举例而已，max-width是图片在页面缩小到影响自身大小时，图片的最大宽度，但不会超过自身图片的原有宽度*/
img{
max-width:50%；/*防止图片无限放大产生失真*/
}c：使用流式布局
布局元素使用浮动float或者行内块 inline-block;
ps：个人建议使用行内块，第一不影响其余元素的布局，第二方便设置。
d：避免使用绝对尺寸（px等），使用相对单位（如rem/em/%）;
ps：这里科普一下，我们都知道em是根据 父级元素 字体的大小来计算的，而rem更狠是根据 根元素 的字体大小来计算，所以推荐使用rem，减少使用em计算的难度。
f：使用CSS3 MediaQuery技术
2.Dreamweaver中响应式网页代码如何写
默认一个固定宽度为980px的网页，当浏览器窗口比980px小的时候，这个布局就变为100%比宽度的液态布局，而不是固定宽度。
当浏览器窗口再缩小于700px的时候，我们就隐藏侧边栏。当窗口小于480px的时候，横向导航条隐藏，换成点击下拉效果的导航条。
如上图，从左至右依次为移动版本—>平板电脑—>桌面浏览器的效果。1、响应式网页结构首先，我们先来看下上面案例展示的html结构，如下图所示：可以说这是一个很典型的博客模版结构。
一个wrapper容器包含了头部、内容、侧栏、底部。2、Meta标签其次就需要我们针对移动设备加入这个meta标签。
告诉webkit内核浏览器初始缩放比例为1。（很多iOS和Android的浏览器都是基于webkit内核的）<meta name="viewport" content="width=device-width; initial-scale=1.0">IE8或者更早的浏览器并不支持Media Query。
你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。<！--[if lt IE 8]> 如果你的网站页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。
<！--[if lt IE 9]> 3、媒介查询-Media Queries在这里马海祥就不再详细的讲正常页面下的布局如何写了。在此主要讲解下媒体查询media queries这个css的设计思路。
这个是css3的属性，也是我们这个响应式网页设计的最重要的部分。可以说是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。<link href="media_queries.css" rel="stylesheet" type="text/css">下面我们用CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。
@media screen and (max-width: 480px) { 这里就是重新设定一些css的属性 }（1）、当浏览器视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。
#pagwraper { width: 94%；}重新设定容器宽度为94%; #content { width: 65%; padding: 3% 4%；}重新设定内容宽度为65%; #sidebar { width: 30%；}重新设定侧边栏宽度为30%注意这里我们用到了%，使得页面是一个流体布局。（2）、当浏览器视图宽度为小于等于700像素时，视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。
#content { width: auto;float: none;margin: 20px 0;} #sidebar { display:none; width: 100%; margin: 0; float: none； }容器宽度继承了上面94%的宽度，这个时候我们设定内容宽度为自动，使其填满外部的wraper容器。并清除其浮动样式。
这个时候的浏览的页面，可以权衡下右边侧栏的重要程度，如果觉得有必要继续在页面中显示，我们可以清除其浮动，并把宽度也设为100%，这样就在content这个容器下显示。但马海祥觉的一般情况下，在这么小的浏览窗口中，用户只想看到最主要的内容，右边侧栏成为了一个补助模块，那么可以直接把它隐藏掉。
这样可以减少页面的高度。（3）、当浏览器窗口小于等于480px的时候，一般这个就是iPhone的横向宽度。
就要将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。首先我们设计webkit内核浏览器下禁用文字大小调整，代码如下：html { -webkit-text-size-adjust: none； }其次就是代码的转换了，如下图所示：其实在480px宽度下的时候，整体框架布局已经不用设置，马海祥认为我们应该考虑得更多的是怎么把一个良好的页面布局展示给用户。
而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。
3.做响应式web 页面怎么设计
响应式Web设计的方法
介绍完响应式Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。
首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍。
通过媒体查询的设置，我们可以根据屏幕宽度e69da5e6ba90e799bee5baa631333335313737、屏幕方向等各个属性来加载不同场景下不同的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设计的
4.如何将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
第七步：加工检测
响应式设计完成之后，用不同的终端全部检测一遍，有不合格的地方继续修改，这是程序员必须知道的也不能忽视的。
5.bootstrap怎么写响应式布局
响应式设计的初衷是对于不同屏幕属性的设备进行近乎一致的呈现，当然，是使用『一份』代码，但是，问题来了，不同设备的网络环境不同（强弱网），对样式表支持度不同（客户端属性），所以如果采用响应式的思路来玩，这里我们适配主要的受众设备即可，以下举例以常见设备为主：PC高分屏，PC常规屏，各种平板，各种手机以及其打开页面的client，特别的设备，诸如阅读器。
首先根据自己的主要受众的设备屏幕属性完成你的原型设计，包括以上的设备中脚本渲染的模块。
使用真机，模拟器或者chrome开发模拟器中的device切换的功能（审查元素-最上面一条，左边三个图标中的手机按钮），以下重点讲第三种（前两种没啥可讲的吧。）
转载请注明出处育才学习网 » 响应式页面怎么写比较简单