简洁的响应式网页代码

Dreamweaver里响应式网页代码怎么编写

预设一个固定宽度为980像素的网页，当浏览器窗口小于980像素时，该布局变为100%宽度的流动布局，而非固定宽度。当浏览器窗口进一步缩小至700像素时，我们将隐藏侧边栏。当窗口小于480像素时，水平导航栏隐藏，改为点击式下拉导航条。

如图所示，从左至右依次为移动版、平板电脑版和桌面浏览器的效果。

1、响应式网页结构

首先，我们来看看上述案例展示的HTML结构，如下图所示：

这是一个典型的博客模板结构。一个wrapper容器包含了头部、内容、侧栏和底部。

2、Meta标签

其次，我们需要为移动设备添加这个meta标签。告诉webkit内核浏览器初始缩放比例为1。（许多iOS和Android浏览器都是基于webkit内核的）

meta name="viewport" content="width=device-width;initial-scale=1.0"

IE8或更早的浏览器不支持MediaQuery。你可以使用media-queries.js或respond.js为IE添加MediaQuery支持。

<!--[if lt IE8]>

![endif]--

如果你的网站页面中使用了html5文档声明，并使用了许多html5标签，但这些标签在ie9以下版本是不支持的，因此我们必须引用一个html5.js文件，以便这些标签被其他低版本浏览器识别。

<!--[if lt IE9]>

![endif]--

3、媒介查询-MediaQueries

在这里，我们不再详细讲解正常页面下的布局如何编写。在此主要讲解媒体查询mediaqueries这个css的设计思路。这是css3的属性，也是我们这个响应式网页设计的最重要的部分。可以说是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

link href="media_queries.css" rel="stylesheet" type="text/css"

我们使用CSS3的媒介查询（MediaQuery）特性来使网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。

media screen and (max-width:480px){

这里就是重新设定一些css的属性

}

（1）、当浏览器视图宽度小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比，以使容器大小自适应。

pagewrapper{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%的宽度，此时我们设定内容宽度为自动，使其填满外部的wrapper容器。并清除其浮动样式。此时浏览的页面，可以权衡下右边侧栏的重要性，如果觉得有必要继续在页面中显示，我们可以清除其浮动，并把宽度也设为100%，这样就在content这个容器下显示。但马海祥认为，一般情况下，在这么小的浏览窗口中，用户只想看到最主要的内容，右边侧栏成为一个辅助模块，那么可以直接将其隐藏掉。这样可以减少页面的高度。

（3）、当浏览器窗口小于等于480像素时，一般这个就是iPhone的横向宽度。就要将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。

首先我们设计webkit内核浏览器下禁用文字大小调整，代码如下：

html{-webkit-text-size-adjust:none;}

其次就是代码的转换了，如下图所示：

其实在480像素宽度下的时候，整体框架布局已经不用设置，马海祥认为我们应该考虑得更多的是如何把一个良好的页面布局展示给用户。而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：

这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480像素小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。

如何用简单的CSS制作响应式HTML网页

建议进一步阅读

新手如果想快速开发出响应式网站建议使用响应式框架Bootstrap、Foundation等等......

三个部分[Viewport][网格布局][媒体查询]

1.先在head里面设置Viewport

meta name="viewport" content="width=device-width,initial-scale=1.0"

用户可以通过平移和缩放来看网页的不同部分。

2.许多响应式都基于网格布局设计

响应式网格布局通常是12列，宽度为100%，在网页自动伸缩

比如CSS里面写

{

[class="col-"]{

float:left;

padding:15px;

}

.col-1{width:8.33%;}

.col-2{width:16.66%;}

.col-3{width:25%;}

.col-4{width:33.33%;}

.col-5{width:41.66%;}

.col-6{width:50%;}

.col-7{width:58.33%;}

.col-8{width:66.66%;}

.col-9{width:75%;}

.col-10{width:83.33%;}

.col-11{width:91.66%;}

.col-12{width:100%;}

这样即可在html写

div class="row"

div class="col-3"

div class="col-3"

ul

li题目1/li

li题目2/li

li题目3/li

li题目4/li

/ul

/div

div class="col-9"

h1

p2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333/p

p2333333333333333333333333333333333323333333333/p

/div

实现基本的响应式布局[调整浏览器窗口大小查看]

图片自适应技巧

div {

width: 100%;

height: 400px;

background-image: url('url');

background-repeat: no-repeat;

background-size: contain;

border: 1px solid red;

}

背景大小属性设置为"contain"，图片将自动按比例缩放。

3.媒体查询主要用于为不同的媒体类型定义不同的样式

例如，在电脑上显示图片1，而在手机上显示图片2

详情可私信咨询

如何用HTML5构建一个响应式网页？

HTML5

构建响应式网页，首先需考虑是全平台兼容还是仅移动端兼容。以下以移动端响应式网站为例，讲解如何构建响应式网页。

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

2、当美工完成原始设计图后，前端工程师的工作就开始了。这时你就可以使用PS或FW进行切片了。通常来说，Fireworks CS6切片更快，但Fireworks有时会出现图片失真的情况，因此，有时需要使用PS进行辅助，PS有切片工具可以专门用于切片。

具体代码：

(function

(doc,

win)

{

var

docEl

=

doc.documentElement,

resizeEvt

=

'orientationchange'

in

window

?

'orientationchange'

:

'resize',

recalc

=

function

(){

var

clientWidth

=

docEl.clientWidth;

if

(!clientWidth)

return;

docEl.style.fontSize

=

20

*

(clientWidth

/

320)

+

'px';

};

构建响应式网站需要关注哪些问题呢

这个价格并不固定，关键看贵公司对网站的需求如何，几百元的有，几千元的有，上万元的也有。

目前来看，建设手机网站更为合适一些，手机网站也能绑定在微信端，这样在手机浏览器中也能打开，而微网站则无法打开。网络建设公司众多，没有具体的衡量标准。但可以从以下几个方面去选择：

1、有制作许多优秀案例的

2、案例都是可验证的

3、只专注于网络建设的，不涉及其他业务

4、经营时间较长的。微官网的价格与选择的开发方式以及功能需求密切相关。根据小编的调查了解，第三方开发商的微官网开发，大致报价在几千元左右。这是一般的微官网开发费用，还有一种是定制开发，即根据客户自身的需求来完成功能方面的设计开发，这种开发的费用比普通的高出许多，有的甚至高达几十万。不同微官网开发公司的报价也不尽相同。而且微官网开发的价格影响因素也非常多，因此微官网开发的报价也没有统一性。

另外，除了第三方开发公司的微官网开发方式外，还可以自主开发，即企业组建一支微官网开发团队进行建设。这种方式的费用主要与开发团队的聘请费用紧密相关。企业自主开发的费用通常比第三方开发商开发的成本要高，开发时间越长，费用会越高。因此，建议一般的中小企业及个人用户选择第三方微官网开发方式。这取决于你需要什么样的微网站，一般基础的微网站价格大约是3980元。