怎樣做一個響應式網頁設計

1、怎麼製作一個H5響應式網站

網路建設公司很多，沒有具體的衡量標準的。但是可以從幾方面去選擇：
1、有做了很多精明案例的
2、案例都是可以驗證方法的
3、只做網路建設的，沒有做其他的
4、做的比較久的。

2、做響應式web 頁面怎麼設計

響應式Web設計的方法
介紹完響應式Web的背景和概念之後，是時候該介紹具體的實現方法了，其實響應式Web設計的方法很簡單，就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。
首先我們一起來看看Media Queries，這里我只會對其做一個簡單的列舉介紹。
通過媒體查詢的設置，我們可以根據屏幕寬度、屏幕方向等各個屬性來載入不同場景下不同的CSS文件來渲染頁面的視覺風格。具體的使用方法有以下兩種：
1、通過link標簽：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

示例代碼代表當當前屏幕寬度小於479px的時候，載入testcssbywidth1.css文件來渲染頁面。
2、CSS中直接設置：
@media screen and (max-width:479px) {
/* 具體的CSS屬性設置 */
}
對於Media Queries的一些常用屬性，只對常用的幾個做一個簡單列舉說明，其他的屬性請各位自行查閱相關資料：
width：描述終端設備顯示區域的寬度，接受max/min的前綴；
height：描述終端設備顯示區域的高度，接受max/min的前綴；
device-width：描述終端設備屏幕的寬度，接受max/min的前綴；
device-height：描述終端設備屏幕的高度，接受max/min的前綴；
orientation：描述終端設備處於橫屏還是豎屏的狀態，取值分別為：landscape/portrait。
當我們調整瀏覽器大小的時候，上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作，但是這卻不能滿足移動終端的瀏覽器，因為移動瀏覽器默認頁面是為寬屏幕設計的，所以會把他縮小來適應小屏幕，但是終端設備卻無法識別正確的寬度，所以光靠媒體查詢是解決不了移動終端設備的響應式Web設計的

3、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小設備窗口下瀏覽，頁面內容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。

4、響應式設計是什麼 網頁設計師怎麼做這類設計

頁面有能力去自動響應用戶的設備環境，響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本.
響應式Web設計是在開發和設計網站過程中產生的一種方式，它的目的是讓內容布局能隨用戶使用顯示器的不同而變化。再明確點說，這種設計概念，就是讓原本1292像素寬，4欄的內容，能夠很好地顯示在1025像素寬的用戶屏幕上，同時還能自動簡化成2欄。當然，讓它很好的適應智能手機和其他種類電腦的屏幕也就成了水到渠成的事了。這種特殊的設計形式就被成為「響應式Web設計」

5、用DreamWeaver做一個響應式網站

您好，這個可是難了，您看看下面的建議，能否對您有幫助：
1、首先我們看下什麼是響應式網頁設計。它為用戶從他們的電腦切換到iPad、iPhone、黑莓、HTC、平板電腦等等，該網站能自動切換適應的解析度，圖像大小和腳本。換句話說，該網站能自動響應用戶的喜好。通俗點說法就是有求必應的網頁！它不僅僅是一種趨勢，而是一個新的設計解決方案！它有助於解決不同的解析度和設備（台式電腦，筆記本電腦，平板，手機）相關的設計問題。
2、其實這個是一個設計問題，既然是設計的問題，這里就會涉及到很多層面的角色，包括交互設計師，視覺設計師，前端工程師，後台開發工程師。交互設計師，要滿足各自不通解析度和設備的頁面布局展現方式。而視覺設計師，則要考慮到頁面性能和移動端帶寬問題，權衡下頁面的酷炫效果和視覺色彩的運用。而前端和後台開發工程師，則要完成滿足視覺需求和交互功能，更要考慮到頁面載入性能和消耗帶寬問題，更重要的是移動端安全性能方面。
3、我們做響應式網頁，首先必須要滿足桌面各個瀏覽器版本下正常顯示頁面。其次才考慮以webkit為內核的手機終端瀏覽器效果。由於IOS和Android瀏覽器都是webkit內核的，這里的響應我們就不考慮ie9以下版本的瀏覽器了。這個例子我們是以GDC博客為原型。它默認一個固定寬度為980px的網頁，當瀏覽器窗口比980px小的時候，這個布局就變為100%比寬度的液態布局，而不是固定寬度。當瀏覽器窗口再縮小於650px的時候，我們就隱藏側邊欄。當窗口小於480的時候，橫向導航條隱藏，換成點擊下拉效果的導航條。
4、響應式網頁設計是一種新的網頁設計思路，我們滿足不同設備下的瀏覽模式，達到俱佳的體驗效果。您可以看看網上的東西，會對您有所幫助的。

6、如何用一簡單的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

詳細可以私信我

7、怎樣做出H5響應式網頁設計

15響應式網頁設計是需要js的支撐了。首先你要熟練使用js,才能學會作出響應式的網頁。如果不會的話，建議你先去使用響應式的網站模板，先去下載幾個響應式網頁模板，根據這個模板查看他的源碼。慢慢的自己就可以設計出這個響應式網頁模板。像這類模板下載的網站有很多。比如開創著素材、單張素材。

8、如何製作響應式網頁設計

現在網上很多響應式的模板，例如：pageadmin cms、discua cms都不錯的額、操作簡單、使用方便。。

9、HTML5怎麼製作響應式網頁

1.調整視口

代碼實例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>布局之路-移動端開發實例</title>
    <meta name="viewport" content="width=device-width,user-scalable = no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。

2.確定設計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。

代碼實例：

    <style type="text/css">
        html {
            font-size: 42px;
        }
    </style>

3.浮動布局

各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。

代碼實例：

.main {
  float: left;
  width: 70%;
}
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。

4.通過媒介查詢，為不同設備載入相應樣式

有條件應用樣式：

 <style>
    @media all and(min-width:500px){ ... }
    @media (orientation){ ... }
</style>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於500px的設備設置樣式。

第二行媒體查詢代碼指的是：為縱屏狀態（可見區域大於或等於寬度）下的移動端設備設置樣式。

有條件的載入樣式表：

<head>
    <link rel="stylesheet" href="wide.css" media="screen and(min-width:1024)" />
    <link rel="stylesheet" href="mobile.css" media="screen and(max-width:320)" />
</head>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於1024px的設備，載入wide.css文件。

第二行媒體查詢代碼指的是：為寬度小於等於320px的設備，載入mobile.css文件。

5.使用百分比和rem替換px

除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

代碼效果對比：

/*使用固定像素*/
.box {
    float: left;
    width: 658px;
    font-size: 72px;
    text-align: center;
    line-height: 195px;
}
/*使用百分比和rem*/
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

代碼解析：

水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。

例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。

垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。

10、網頁設計中響應式具體怎麼實現？

響應式網頁設計現在無疑是一件大事情。如果你還不了解響應式設計，可以看看我最近發表的響應式站點列表（譯者註：可以好好看看示例中的網站在不同解析度下的展現方式）。對新手來說，響應式設計可能有一點復雜，但是事實上比你想像的簡單。為了幫助你迅速的了解響應式設計，我起草了一篇快速教程。你可以在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規則，來實現不同的布局。媒介查詢可以寫在同一個或者單獨的樣式表中。