Ⅰ 四十二、移動端web開發之響應式布局
就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置，從而適配不同設備的目的。
設備的劃分情況：
響應式需要一個父級作為布局容器，來配合子級元素來實現變化效果。
原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小， 再改變裡面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
但是我們也可以根據實際情況自己定義劃分
bootstrap來自Twitter（推特），是目前最受歡迎的前端框架。bootstrap是基於HTML、CSS和JavaScript的，它簡潔靈活，使得web開發更加快捷。
中文網 官網 推薦網站
框架：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件。使用者要按照框架所規定的某種規范進行開發。
在現階段，我們還沒有接觸JS相關課程，所以我們只考慮使用它的樣式庫。
Bootstrap使用四步曲：
bootstrap需要為頁面內容和柵格系統包裹一個 .container 或者 .container-fluid 容器，它提供了兩個作此用處的類。
.container
.container-fluid
柵格嵌套
柵格系統內置的柵格系統將內容再次嵌套。簡單理解就是一個列內再分成 若干份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。
列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。
列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
響應式工具
為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能，並使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。
演示效果
Ⅱ 列舉響應式web設計需要應用哪些技術
響應式Web設計（Responsive Web design）的理念是：頁面的設計與開發應當根據用戶行為以及設備環境（系統平台、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
Ⅲ 如何將web頁面改成響應式
1.檢測網頁響應式 2.編輯網頁源文件3植入響應式代碼4.橫屏響應式設計5.豎屏響應式設計
6.全屏響應式設計7.加工檢測，如果嫌麻煩的話，直接用nicebox做
Ⅳ 響應式web設計怎麼實現
想簡單的話用bootstrap,vue.js這些框架，這些框架自動自適應
想自己寫判斷也可以，判斷屏幕尺寸然後採用不同樣式
<metaname=」viewport」content=」width=device-width,initial-scale=1.0″>
css里判斷屏幕尺寸：
@mediaonlyscreenand(min-width:320px)and(max-width:480px){}
Ⅳ 如何將web頁面改成響應式
第一步：檢測網頁響應式
瀏覽器打開調試模式，打開響應式設計模式，在預覽區域拖動大小范圍，如果頁面元素隨大小變化而自適應，則頁面是響應式頁面，反之，頁面是固定非響應式頁面。如圖：
第二步：編輯網頁源文件
用Dreamweaver打開頁面源文件，查看代碼樣式及文件結構，（Web頁面的視覺效果由CSS樣式表文件控制）。如圖：
第三步：植入響應式代碼
在CSS樣式表中插入以下代碼：
@media screen and (min-width:200px) and (max-device-width:640px){
/*這里寫元素的樣式*/
}
代碼解釋：這句代碼是指定了在200像素~640像素之間的終端，顯示的效果，在其他終端不顯示。
第四步：橫屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
第五步：豎屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
第六步：全屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
7
第七步：加工檢測
響應式設計完成之後，用不同的終端全部檢測一遍，有不合格的地方繼續修改，這是程序員必須知道的也不能忽視的。
Ⅵ 做響應式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設計的
Ⅶ html5怎麼製作一個響應式網頁
HTML5 製作響應式網頁，首先需要考慮是全平台適配還是只是移動端適配。這里以移動端響應式網站為例，講述如何製作響應式網頁。
1、選定基本設計尺寸，一般以1080為基準。確定響應式web設計的應用場景之後，和美工（或設計師）溝通，之前，一般需要美工出幾套主流移動設備屏幕解析度的設計圖，現在，使用流式布局以及rem等可以使用一套設計圖，以最常用的移動設備屏幕解析度為基準。
2、當美工完成設計圖之後，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，Fireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。
Ⅷ 網頁設計中響應式具體怎麼實現
眼下，幾乎每個新客戶都希望他們的網站可以有專門的移動設備版本。最完美的情況吶，就是為iPhone、iPad、黑莓、Kindle……各自打造一款——頁面解析度還必須兼容任何設備。誰知道未來5年內我們還需要為多少新發明的設備設計開發不同版本的頁面？這種瘋狂什麼時候算個頭？
在Web設計和開發領域，很快的，我們將會無法跟上設備與解析度革新的步伐。對於多數網站來說，為每種新設備及解析度創建其獨立的版本根本就是不切實際的；結果就是，我們將會贏得使用某些設備的用戶群，而失去那些使用其他設備的用戶。不過，或許會有另外一種方式，可以幫助我們避免這種情況的發生。
響應式Web設計(Responsive Web design)的理念是，頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
Ⅸ 如何測試響應式web
方法： 舊版本的谷歌瀏覽器，沒有自動響應式測試的功能，可以在谷歌應用市場
安裝一款名為「Mobile/RWD Tester」的插件。新的谷歌瀏覽器自帶響應式測試功能，可以進行響應式網站的測試。 在網路搜索引擎搜索「Firefox Developer Edition」關鍵詞，在搜索結果中，點擊「Firefox Developer Edition — Mozilla」，進入Firefox Developer Edition官方網站。
下載Firefox Developer Edition 即火狐瀏覽器開發者版本，點擊下載的可執行文件進行安裝。
安裝成功之後，點擊開發者工具按鈕，在下拉菜單中點擊「響應式設計視圖」，出現瀏覽器自帶有響應式測試功能。
使用一個響應式網站進行測試，可以根據需要切換不同的屏幕解析度。
BrowserStack 是一個提供網站瀏覽器兼容性測試的在線雲端應用，支持9大操作系統上的100多款瀏覽器。支持本地測試，預裝有完備的開發者工具。BrowserStack在近期發布了API，移動開發者將會進一步提高測試效率。
除此之外，還有「網路移動雲測試中心」提供響應式測試服務，選擇，其中的Web App測試服務，輸入網站即可進行測試。
Ⅹ 什麼是響應式Web設計怎樣進行（4）
但是對於頁面中的文字內容信息來說，則不能簡單的只從"同比縮小"和"調整布局結構"這兩方面去處理。對於手機等移動設備來說，在文字內容方面，已經有了很多最佳實踐方式和指導原則：簡化的導航、更易聚焦的內容、以信息列表代替傳統的多行文案內容等。響應式Web設計的思想，一方面要保證頁面元素及布局具有足夠的彈性，來兼容各類設備平台和屏幕尺寸；另一方面，則是增強可讀性和易用性，幫助用戶在任何設備環境中都能更容易的獲取最重要的內容信息。有一條樣式代碼，我們已經使用了多年：display: none;我們可以在一個針對某類小屏幕設備的樣式表中使用它來隱藏掉頁面中的某些塊級元素，也可以使用前文的方法，通過JS判斷當前硬體屏幕規格，在小屏幕設備的情況下直接為需要隱藏的元素添加工具類class。比如，對於手機類設備，我們可以隱藏掉大塊的文字內容區，而只顯示一個簡單的導航結構，其中的導航元素可以指向詳細內容頁面。注意，不要使用visibility: hidden的方式，因為這只能使元素在視覺上不做呈現；display屬性則可幫助我們設置整塊內容是否需要被輸出。對於移動設備來說，避免這些不必要的資源浪費還是很重要的。我們來看一個簡單的示例：圖中上半部分是大屏幕設備所顯示的完整頁面，下面的則是該頁面在小屏幕設備的呈現方式。頁面HTML代碼如下：<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p> <div id="content"> <h2>Main Content</h2></div><div id="sidebar-left"> <h2>A Left Sidebar</h2></div><div id="sidebar-right"> <h2>A Right Sidebar</h2> </div>下面是默認的主樣式表，其中，我們要隱藏掉鏈接導航部分(sidebar-nav)，因為默認樣式適用的設備屏幕會足夠大，足夠顯示包括兩個側邊欄在內的所有內容。#content{ width: 54%; float: left; margin-right: 3%;}#sidebar-left{ width: 20%; float: left; margin-right: 3%;}#sidebar-right{ width: 20%; float: left;} .sidebar-nav{display: none;}下面是用於小屏幕移動設備的樣式表代碼。現在，我們要隱藏掉兩個側邊欄，並使sidebar-nav顯示出來。藉助JavaScript，當用戶點擊sidebar-nav中的鏈接時，對應的側邊欄可以恢復顯示。當然，觸發恢復顯示的方式有很多種，即可以通過JS改變側邊欄的display屬性值，也可以為其添加額外的布局樣式。#content{ width: 100%;}#sidebar-left{ display: none;}#sidebar-right{ .sidebar-nav{display: inline;}現在，我們的頁面已經可以隨著設備和屏幕規格的變更，響應式的做到元素的同比縮放、布局結構的改變、內容的優化調整。特別是對於手機設備，我們還要在實踐過程中注意一些該類設備共有的設計指導原則。比如，針對手機設備，使用一個特定的樣式，將頁面原有的文字導航元素變為更易操作的圖標形式。下面的一些文章資源可作參考閱讀：Mobile Web Design Trends For 20097 Usability Guidelines for Websites on Mobile Devices觸屏與滑鼠觸屏設備已經成為主流。雖然目前多數觸屏設備還是小屏幕類型的產品，比如手機，但是市場上越來越多的大屏幕設備也開始使用觸屏技術；且不說iPad一類的平板電腦，就連一些筆記本和台式機也加入了這一行列。比如HP Touchsmart tm2t，即使用傳統的鍵鼠設備，同時也加入了觸屏技術。相比於傳統的基於滑鼠指針的互動，觸屏技術顯然帶來了截然不同的交互方式與相應的設計規范；兩者又有各自所適用的領域。所幸，要使我們的設計方案同時滿足這兩類設備的規范，並非一件難事，只是有些地方需要注意。比如，觸屏設備無法反映CSS定義的hover行為及相應的樣式，因為它沒有滑鼠指針的概念，手指點擊就是click行為。所以不要讓任何功能依賴於對hover狀態的觸發。有興趣的話，可以讀讀這篇"Designing for Touchscreen"，這里提到的很多建議即有利於改進針對觸屏設備的設計方式，同時也不會削弱傳統鍵鼠設備上的用戶體驗。比如，放在頁面右側的導航列表可以對觸屏設備的用戶更加友好。因為多數人習慣用右手點擊操作，而左手負責握住設備；這樣，放在右側的導航列表即方便右手的點擊，又可以避免被握著設備的左手不小心觸碰到。而這一點與鍵鼠設備用戶的習慣完全不矛盾。