html响应式设计
HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。
1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。
Ⅱ 如何用一简单的CSS制作响应式HTML网页
建议展开阅读
新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等......
三个部分[Viewport][网格视图][媒体查询]
1.先在head里面设置Viewport
<metaname="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写
<divclass="row">
<divclass="col-3">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
</div>
<divclass="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:1pxsolidred;
}background-size属性设置为"contain",图片比例会自动缩放。
3.媒体查询主要用于针对不同的媒体类型定义不同的样式
比如我在电脑显示图片1,但是在手机显示的是图片2
详细可以私信我
Ⅲ html5移动端开发和响应式设计差别在哪里
html5移动端开发和响应式设计没有必然联系，不过在HTML5移动开发中经常会经常使用响应式设计。
1、响应式设计不仅用在移动网站，在PC端也有不同屏幕的适配，而且移动端和PC端可以只使用一套代码，这就是全平台的响应式设计。
2、HTML5移动端（移动网站、混合应用、WebAPP）为了解决屏幕适配经常会使用响应式设计（流式布局、CSS3媒体查询），但是响应式设计并不是必须，也可以使用流式布局和remnant来解决移动端的屏幕适配问题。
(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';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
3、HTML5移动端开发最初的时候使用固定布局，两边留白，那时也没有用到响应式设计，不过，那种用户体验不好。
Ⅳ html5和响应式页面到底是有什么关系
html5是html4的更新标准。html5新增了一些html标签以及这些标签对应的css和js接口。 bootstrap是在标准形成之际推出的，因此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的概念也可以变的更宽放，泛指一切在手机上实现的应用或页面。
Ⅳ 什么是响应式网站HTML响站又是什么
响应式技术或H5技术是最新的建站技术，网站页面可以智能的根据访问者所回使用的终端设答备（不同系统、不同屏幕宽度，不同屏幕定向）调整相对应的布局，以达到完美展示页面内容的效果。大腕互联响站就是HTML5响应式网站建设系统。
Ⅵ 什么是 HTML响应式设计
就是能根据你打开网页窗口大小随意变化
适合你窗口大小的
设计，比如说以内前有的网页在pc端上打开刚好容
但是在手机端上载体变小了，相应字就变的比较小了，而且还只能显示左边一半的页面内容，但是用了响应式设计后
，他就能根据你自身载体的大小来变化了
Ⅶ html响应式设计手机端 怎样写适配dpi
只需要这样来做：
/* 当浏览器的自可视区域小于980px */
@media screen and （max-width： 980px） {
css样式
}
/* 当浏览器的可视区域小于650px */
@media screen and （max-width： 650px） {
css样式
}
注意的是在页面的头部<head></head>之间加上下面这句∶
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
Ⅷ 什么是HTML5响应式网站
响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。如果你需要做一个响应式网站可以去大腕互联看看，他们的响站是五网合一网站建设的，方便管理，快捷创建。
Ⅸ HTML中怎样的布局方式称为响应式布局
借用网络一句话：响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而专言之，就是一个网站能够兼容多个终端——属而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局就是可以，适应多种设备的网页，比如电脑端和移动端 可以共用同一套CSS。不需要为单独的设备而开发相应程序