当前位置：首页 » 网站代码 » 响应式网页代码

响应式网页代码

发布时间: 2021-03-24 02:30:41

Ⅰ 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支持。

如果你的网站页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。

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小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。

Ⅱ 网页中做到自适应的响应式页面有几种方法

如果很多页面都需要做自适应的话，建议使用bootstrap这类成熟的框架，如果页面不多，可以使用媒体查询的方式：
@media screen and (min-width:1201px) and (max-width:1366px){}

@media screen and (max-width:1200px){}

Ⅲ 响应式网站是用相同的代码不同的css吗

这位网友你好，响应式网站是指网站样式根据屏幕大小自适应，基本的HTML结构不变，不同屏幕应用不同的css代码，可以用媒体查询，也就是@media这个来做。

举例：

@mediascreenand(max-width:960px){
body{background-color:red;}
}
@mediascreenand(max-width:480px){
body{background-color:blue;}
}

在不同的屏幕大小下显示不同的颜色，你可以缩放浏览器窗口查看一下效果。

Ⅳ 如何将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
第七步：加工检测
响应式设计完成之后，用不同的终端全部检测一遍，有不合格的地方继续修改，这是程序员必须知道的也不能忽视的。

Ⅳ 有没有谁有一个自适应(响应式)网页的源码或者一个自适应网站的网址

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
这里是一复个自适应制网站的设计模式，你可以参考一下。

Ⅵ 如何实现html响应式网页代码如何实现（求给关键代码）

你去下载个bootstrap，然后按照他的使用手册一步一步的来，也许你就能找到点感觉了。在他的框架下按照手册来，你自己写的东西也都是响应的。

Ⅶ css的图片响应式代码

<div style="width:100%; height:300px; background:url(1.jpg) center center no-repeat #8bbbff;"></div>
div宽度100%
加载的居中图片以背景形式，<div>也可以改为<a>
重点在背景后面的两个center 第一个是左右居中，第二个是上下居中
如果图片本身不够大，可以再加颜色值来衬托，及时显示器再大两侧也能有颜色垫底。
上述是居中的方法，如果再想做成轮播，我这里有现成代码，如有需求可以索要。

Ⅷ html5怎么制作一个响应式网页

HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。

1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。

2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。

Ⅸ 响应式网站需要什么代码

HTML5遵循web3规范大腕互联响站建站一键制作响应式网站 ,希望对你有帮助

阅读全文

响应式网页代码

与响应式网页代码相关的阅读推荐