html设计响应网站

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

建议展开阅读

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

三个部分[Viewport][网格视图][媒体查询]

1.先在head里面设置Viewport

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

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

2.很多响应式都基于网格视图设计

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

比如CSS里面写

* {
    box-sizing: border-box;
}
[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">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
</div>
<div class="col-9">
<h1>2333333</h1>
<p>333333333333333333</p>
<p></p>
</div>

达到简单的响应式效果[拖拽浏览器大小查看]

图片响应式方法

div {
width: 100%;
height: 400px;
background-image: url('url');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}

background-size 属性设置为 "contain", 图片比例会自动缩放。

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

比如我在电脑显示图片1,但是在手机显示的是图片2

详细可以私信我

2、网页设计中响应式具体怎么实现？

响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。

第一步：Meta标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。

第二步：HTML结构

在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。

第三步：媒介查询-Media Queries

CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

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

然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。

对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。

你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

3、html5和响应式页面到底是有什么关系

html5是html4的更新标准。html5新增了一些html标签以及这些标签对应的css和js接口。 bootstrap是在html5标准形成之际推出的，因此bootstrap天生含有html5的一些标签和特性。 比如，bootstrap支持响应式设计，具体体现在bootstrap的css库（主要是启用了css3标准的media query功能）实现了各种设备下的一些预设的html＋css组件（就是一些半成品的代码片段，适合在网页各个地方复制粘贴）。

简单说：
html5是html的最新标准 ，体现在新标签，新css标准，新js接口
bootstrap是基于html5技术的一个好用的前端代码框架，可以简单的复制粘贴，修修改改做一个漂亮页面
响应式设计是一种设计实现理念 ，css3的meida query功能让这个理念的实现变的现实而方便。
H5是指在html5标准推行以后，利用html5新特性在手机上的配合市场营销采用了大量的js css 及canvas技术实现的页面。个人认为H5的概念很狭隘不能代表整个web前端，更不能包含webapp。 但H5的概念也可以变的更宽放，泛指一切在手机上实现的应用或页面。

4、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]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
如果你的网站页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
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小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。

5、html5怎么制作一个响应式网页？

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

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

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

6、什么是 HTML响应式设计？

就是能根据你打开网页窗口大小随意变化
适合你窗口大小的
设计，比如说以前有版的网页在权pc端上打开刚好
但是在手机端上载体变小了，相应字就变的比较小了，而且还只能显示左边一半的页面内容，但是用了响应式设计后
，他就能根据你自身载体的大小来变化了