⑴ bootstrap 3.3.5響應式布局怎麼實現
源代碼：
[html] view plain
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>涵涵博客響應式布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script src="jquery-3.0.0.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</head>
<body>
<!--------------
CopyRight(C)2016-7-1 11:00:10
Author:邱於涵
----------->
<nav class="nav navbar-default" >
<!--header-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!--
fonts ,css,js都應該在同一個文件夾!
-->
<span class="glyphicon glyphicon-align-justify" ></span>
</button>
<a class="navbar-brand" href="#">涵涵博客HanBlog</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--導航內容-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">說說</a></li>
<li><a href="#">博客</a></li>
<!--內聯表單-->
<li>
<form class="navbar-form form-group">
<input class="form-control" type="text" placeholder="Search">
<input class=" btn btn-default" type="submit" value="搜索">
</form>
</li>
</ul>
<!---右側-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">社區</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其它 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">相冊</a></li>
<li><a href="#">博客分類</a></li>
<li><a href="#">網站地圖</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">留言板</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<span class="glyphicon glyphicon-search"></span>
</body>
</html>
⑵ 響應式網頁的主流技術有哪些
響應式網頁的主流技術有哪些？當不同類型的終端載入web頁面或調整瀏覽器大小時，頁面會根據媒體類型或瀏覽器寬度載入不同的CSS樣式，重新設置頁面並顯示不同的內容和布局效果。流程布局是響應性web頁面的主要技術，以百分比表示。當解析度或瀏覽器寬度發生變化時，可以平滑地縮放頁面元素，避免用戶的視覺跳躍感。也可以避免傳統固定布局中的水平滾動條。流式布局也有一些缺點，屏幕大小會在小屏幕和大屏幕之間變化，同樣的布局設計不能提供良好的視覺體驗。
例如，一些文本在電腦上顯示的行寬會滿足用戶的視覺效果，但在移動端會顯得太窄，影響用戶的瀏覽。元素的大小(百分比)基於其父元素的寬度。當有許多層次的元素嵌套時，計算機就更麻煩了。移動布局還需要結合媒體查詢方法，對不同解析度設備的網頁風格響應策略進行優化，達到更好的效果。彈性布局主要以EM和REM為元素單位，而REM以HTML根元素的大小為參考進行計算，解決了百分比計算的缺陷，使網頁設計更加方便高效。只有REM不實現響應布局;它還需要結合javaScript或媒體查詢技術。
響應式網頁的主流技術有哪些？同時，REM作為字體大小的單位，結合媒體查詢技術，可以輕松控制不同設備上字元的字體大小。彈性圖像技術可以實現圖像隨屏幕尺寸的變化而平滑過渡，適應變焦，實現響應的變化。同時，提出了大解析度和小解析度的圖像設計方案。結合媒體查詢技術，大解析度設備使用大解析度圖像，小解析度設備使用小解析度圖像，即大屏幕載入大圖像，小屏幕載入小圖像。響應式web的主流技術有利於提高web頁面的載入速度，節省存儲空間。引導框架是一個用於前端開發的開放源碼工具包。它是響應式Web設計中最流行和常用的框架。它基於HTML5、CSS3、jQuery和javascrip技術，為開發者提供了多種響應組件。它將一組CSS樣式和效果代碼封裝在不同的文件中，以便於使用。
以上就是有哪些響應式網頁的主流技術?的主要內容，如果你想了解ui設計的基本知識，並且將他們運用到您的作品中，那麼本文一定會給你有效的幫助。如果你想學習更多關於ui設計的知識或資訊等，可以點擊本站其他文章進行學習。
⑶ 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小設備窗口下瀏覽，頁面內容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。
⑷ 響應式網站有什麼優缺點
響應式網站有什麼優點？
1．面對不同解析度設備靈活性強：網站排版可以根據屏幕解析度進行隨意變化。
2．能夠快捷解決多設備顯示適應問題：不同解析度的電腦顯示屏瀏覽同一個網站，通過響應式布局，輕松解決排版問題。
響應式網站有什麼缺點？
1．兼容各種設備工作量大，效率低下：看過源代碼你就知道，想要適應各種解析度，就需要寫多種代碼，因此直接增加了工作量。
2．代碼累贅，會出現隱藏無用的元素，載入時間加長：一個網頁的載入速度與代碼的多少是有關系的，網頁代碼少也就算了，但是如果一套代碼很多，重復寫多種解析度之後，那就更多了，因此會對載入速度有影響。
3．其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果：怎麼說呢，犧牲網站打開速度，獲得適應更多解析度。
4．一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況：為了適應不同的解析度，網站的排版也相對應的做了改變，特別是圖片的尺寸也會對應變化。