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。不需要為單獨的設備而開發相應程序