① 響應式布局 怎麼用css寫響應式
做響應式網站離不開CSS響應式布局查詢代碼寫法，而在此之前，我們需要了解什麼是媒體查詢以及如何才CSS中引入媒體查詢。
什麼是媒體查詢？
媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用於檢測的媒體特性有width、height和color（等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定製顯示效果。
如何在CSS中引入媒體查詢？
媒體查詢寫在CSS樣式代碼的最後，CSS是層疊樣式表，在同一特殊性下，靠後的的樣式會重疊前面的樣式。
如何用CSS做響應式布局呢？
1、在HTML頭部添加以下代碼，用來顯示兼容移動設備的顯示效果。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
參數詳解：
width=device-width ：寬度等於當前設備的寬度
initial-scale=1 ：初始的縮放比例（默認為1）
minimum-scale=1 ：允許用戶縮放到的最小比例（默認為1）
maximum-scale=1 ：允許用戶縮放到的最大比例（默認為1）
user-scalable=no ：用戶是否可以手動縮放（默認為no）
2、引入包含Media的CSS文件
一般情況HTMLCSS代碼都是分開寫的，Media也不例外。
<link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/>
<link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>
3、寫Media中的代碼
以某個網頁的響應式布局為例
結構:@media設備類型and (設備特性)｛樣式代碼｝
/*媒體查詢*/
/*當頁面大於1200px時，大屏幕，主要是PC端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之間的屏幕里，中等屏幕，解析度低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
#adver .center {
width: 50%;
margin: -10px 0 0 -25%;
}
main .center h2 {
font-size: 40px;
}
}
/*768和991像素之間的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
#adver .center {
width: 60%;
margin: -10px 0 0 -30%;
}
#adver .search, #adver .button {
font-size: 20px;
}
main .center h2 {
font-size: 35px;
}
}
/*在480和767像素之間的屏幕里，超小屏幕，主要是手機*/
@media (min-width: 480px) and (max-width: 767px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .sm-hidden,.sidebar,.md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 70%;
height: 53px;
margin: -10px 0 0 -35%;
}
#adver .search, #adver .button {
height: 45px;
font-size: 18px;
}
.sm-visible {
display: block;
}
main .center h2 {
font-size: 30px;
}
main .center p {
font-size: 15px;
}
main figure {
width: 49.2%;
}
}
/*在小於480像素的屏幕，微小屏幕，更低解析度的手機*/
@media (max-width: 479px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 80%;
height: 48px;
margin: -10px 0 0 -40%;
}
#adver .search, #adver .button {
height: 40px;
font-size: 16px;
}
.sm-visible {
display: block;
}
footer .bottom, footer .version {
font-size: 13px;
}
main .center h2 {
font-size: 26px;
}
main .center p {
font-size: 14px;
}
main figure {
width: 99%;
}
}
響應式布局的原理就是在不同的窗口大小下顯示不同的結構和樣式。只要掌握好CSS的樣式，響應式布局就沒問題。
② 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小設備窗口下瀏覽，頁面內容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。
③ 用JavaScript代碼模擬購物車。
購物車挺復雜的，不是一句兩句能說清的，現在前端都用react，vue這類響應式框架做購物車，事半功倍。
④ css的圖片響應式代碼
<div style="width:100%; height:300px; background:url(1.jpg) center center no-repeat #8bbbff;"></div>
div寬度100%
載入的居中圖片以背景形式，<div>也可以改為<a>
重點在背景後面的兩個center 第一個是左右居中，第二個是上下居中
如果圖片本身不夠大，可以再加顏色值來襯托，及時顯示器再大兩側也能有顏色墊底。
上述是居中的方法，如果再想做成輪播，我這里有現成代碼，如有需求可以索要。
⑤ 響應式網站和移動M站在代碼上分別怎麼寫
響應式網站主要是一html結構，通過css的媒體查詢來適應設備。m站則是pc和手機兩套結構
⑥ 響應式網站需要什麼代碼
HTML5遵循web3規范大腕互聯響站建站一鍵製作響應式網站 ,希望對你有幫助
⑦ 如何實現html響應式網頁代碼如何實現（求給關鍵代碼）
你去下載個bootstrap，然後按照他的使用手冊一步一步的來，也許你就能找到點感覺了。在他的框架下按照手冊來，你自己寫的東西也都是響應的。
⑧ 響應式布局代碼怎麼寫
實現強勢布局最簡單的方法是使用一些響應式布局的移動端框架如bootdtrap。自己寫的，畫須要建築css3中的媒體查詢來實現
⑨ 如何實現復雜響應式站點的Material Design
Material Design提出了平面像素的Z軸概念，通過紙片在物理世界中形態的抽象和提煉，定義了各種信息層級和常用狀態的表達方式，並詳細講解了各個細節的處理方法，就像一本考試大綱，囊括了產品中常用的UI細節，甚至一些UX細節。這里並不贅述，想看詳細的Design Guide請 點擊這里 （要搬梯子），翻譯版的 點擊這里 。
如果說UX和UI的展現，是連接產品與用戶的紐帶，那麼產品的UX以及UI應從產品的核心邏輯延展並且推演而來。如果說產品的核心邏輯或者技術的實現難易會成為設計展現的限制，那麼UX和UI應是在各種限制下所權衡出的最優解。而Material Design則像是架橋說明或者權衡出的通用解，對於眾多產品做以參考。
既然是通用大綱，那麼拋開產品僅談設計，難免會停留於「通用」層面，而利用Material Design進行實戰的案例，網上也多是app的一些設計嘗試。恰好在近期的工作學習中，接手一個響應式web站點的改版設計， 筆者參考Material Design總結以下三點分享如何實現復雜響應式站點的Material Design。
一、清晰輕量的產品邏輯
奧卡姆剃須刀法則同樣在產品架構設計中適用，越簡單的架構越有利於產品的生長。清晰輕量的產品邏輯，會減少用戶的負擔感，從而提高交互上的效率和愉悅感。
分析Material Design，會發現Google歸納了兩類復雜內容信息的層級關系，分別是Card和Tile（List 以及其他相似定義屬於同類的內容信息層級），其他定義多用於UI結構及細節。其中，Google定義Card是一種多功能信息的聚合入口，信息層級應較高，體現在Z軸應高於其他信息，視覺上有陰影表現並加以圓角處理。而tile（或同類信息列表）則是（同類或相關）信息的模塊展現，信息層級應較低，體現在Z軸應略低於其他信息，視覺上應無陰影表現不加圓角處理。其結果是從視覺層面讓產品對象更高效、更簡單，同時也更具物理世界的「真實感」。
最近接手的項目是Gekec.com的全站改版。Gekec（革客）是Geek和Maker交集，喜歡革新，喜歡技術范兒、新潮的科技消費品，喜歡自己動手創造產品，Gekec.com也就是這類人的聚集地，整個產品囊括電商、資訊（或h5宣傳）、拆機、以及社區討論等各種功能，改版前邏輯復雜，功能繁多。改版開始之初，筆者了解到革客群體時，便認為理性加濃重Geek味道的Google風格或許是最適合Gekec.com的視覺體系，然而復雜的產品邏輯不能給用戶帶來高效的交互體驗和愉悅的使用感受，視覺上也並不能很好的通過Material Design推演並且變化，所以梳理出清晰、輕量且方便視覺統一的產品邏輯成為第一任務。
Gekec.com的產品全功能在此並不贅述，Proct Feature全部為達成宜家式的體驗式設計，經過梳理可以歸納成三層，首層為體驗層（多入口的首頁封面）、第二層為貨架層（包括商城模塊、拆機模塊、體驗模塊）、第三層為詳細、操作層；
如上圖，輕量的產品結構即可方便設計的推演。例如其中第一層可以通過H5靈活排版做產品全方位體驗，第二層與第三層的關系即可利用Material Card和Tile表現。Card表達了全部信息的聚合和入口，tile則表現同類信息的羅列。從card跳轉到最終頁應有一種卡片展開的體驗。
二、適宜UI推演的響應辦法
在產品邏輯清晰簡潔的基礎上，一套適宜Material Design變化的全尺寸響應辦法就成為復雜響應式網頁設計的核心內容，響應辦法能夠直接決定功能模塊的響應邏輯以及UI的變化。實際操作中，響應辦法的確定主要就是確定柵格和佔比。
1）柵格
網頁柵格系統是從平面柵格系統中發展而來。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規范。柵格系統的具體含義以及使用方法在此不再贅述，感興趣的朋友可以參考淘寶UED的一些文章：
網頁柵格系統研究（1）：960的秘密
網頁柵格系統研究（2）：蛋糕的切法
網頁柵格系統研究（3）：粒度問題
網頁柵格系統研究（4）：技術實現
在Gekec.com的項目中，經歷產品功能模塊的梳理，筆者使用了12柵格系統，目的是能夠滿足2、3、4、6的頁面等分。註：具體柵格系統的建立應因產品和設計所決定，柵格系統並不是萬能的，而確定的柵格系統可以為整個響應式設計做規范性參考。
2）佔比
A.佔比
如上文說，12柵格約束網頁的內容區，而網頁的內容往往並不佔據屏幕的全部寬度，而是在兩側留有間隙，營造空間感。由於屏幕的限制，這種空間感在移動端設備顯得更加重要，如圖， 然而強加固定的margin pixel會使得12柵格佔比不定，難以控制設計效果。
所以佔比應是12柵格寬度對應屏幕的比值，即：
12柵格寬度X佔比=屏幕寬（臨界點）
優秀而巧妙的佔比確定可以讓網頁設計呈現在各個主流屏幕上均是100%像素。
這里簡單解釋一下，若一個200px寬的元素在1200px寬的屏幕上，其佔比為16.67%，同樣的邏輯，到1024px的屏幕上這個佔比16.67%的元素即占據了170.67px，這樣的情況下，某一個物理像素無法佔據100%，在完美主義的設計師眼裡，是無法接受的事情。而巧妙的佔比，可以讓元素在各個主流屏幕占據100%像素，完美展現設計意圖。
B.臨界點
臨界點（breakpoint）是指響應式網頁發生布局變化的關鍵點，如「當屏幕寬度小於480px時載入...樣式，當寬度在480px- 600px之間時載入…樣式」。響應式網頁理論上有無數種尺寸，我們不可能也沒有必要為每個尺寸都去做設計，需要做的是選定幾個臨界點做設計，在兩個臨界 點之間是延續上一個臨界點的布局。
臨界點確認總體目的就是為了保證頁面在手機（屏幕很小）、平板（屏幕中等）、PC（屏幕大）上載入相應的樣式，然而經驗較少的設計師往往會苦惱一個問題，那就是高像素的手機屏幕和低像素的平板屏幕應如何處理。例如設計師會擔心1080p的手機載入大屏幕頁面，或者720p的平板載入小屏幕頁面。
但需要注意的是，響應式網頁不同於APP的屏幕適配。網頁是沉浸於瀏覽器的產品，瀏覽器所啟動的屏幕像素才可以被認為是臨界點的參考點，為此，筆者做了一些測試，如下表，可以看出不少1080p手機在瀏覽器中僅啟動360px，而神奇的ipad無論是不是retina屏幕，無論是不是mini，均顯示1024x768px 。
從上表可以看出，許多擔心其實並不需要。綜上，在Gekec.com的項目中，筆者為達到多數主流屏幕100%像素的追求，即需達到 內容區在主流屏幕臨界點的佔比可以被12等分 ，進而獲得12柵格，即：
12的公倍數X佔比=主流屏幕尺寸
項目中經歷了一些測試和取捨，最終確定 佔比為93.75%，臨界點為1280px、1024px、768px和320px。
具體為：
1280px<=screen，佔比93.75%，12柵格在典型屏（1280px） 寬1200px ；
1024px<=screen<1280px，佔比93.75%，12柵格在典型屏（1024px） 寬960px ；
768px<=screen<1024px，佔比93.75%，12柵格在典型屏（768px） 寬700px ；
320px<=screen<768px，佔比93.75%，12柵格在典型屏（320px） 寬300px ；
如上圖的佔比劃分，頁面元素可以完成靈活、規范的響應。可以以此作為整個產品的響應辦法，在此基礎之上，可以對Material Design進行全面的推演。
三、精雕細琢的頁面細節
如果說產品邏輯是整個網站的骨架，那麼精雕細琢的頁面細節則可以比喻為網站的氣質靈魂。有輕量級的產品構架和明確靈活的響應式辦法後，即可通過Material Design的官方說明進行全面設計。在Material Design的說明中，已經詳細解釋了各個狀態的約束和細節，在此並不贅述，筆者僅挑選一些典型的細節。
1）css動畫
Material Design中開篇第一章節便講述了動畫給用戶的直觀感受，說明感知一個物體有形的部分可以幫助用戶理解如何去控制它。一些細節位置的動畫能給用戶體驗上的驚喜。然而在web端實現動畫效果並不像app里那樣的容易，大量JS也會影響頁面載入速度甚至影響頁面其他代碼。所以筆者選擇利用CSS對頁面一些細節加以動畫效果。
A.點擊按鈕
Material Design給出了一種ripple button，抽象了人用手觸碰卡片的漣漪效果，給用戶一種全新的使用體驗，歡迎來Gekec.com點擊嘗試。
B.輸入框
簡單的Des cription和一條橫線，抽象了實體文字卡片的填寫過程，可以幫助用戶對輸入區域有實體化的理解，歡迎來Gekec.com點擊嘗試。
2）文字樣式
Material Design中強調「同時使用過多的字體尺寸和樣式，可以輕易的毀掉布局」，並約束了常用的基本樣式就是基於12sp、14sp、16sp、20sp的字體排版。
熟悉Android的朋友可能對sp的概念並不陌生，sp：Scale-independent pixels，它是安卓的字體單位，以160PPI屏幕為標准，當字體大小為 100%時， 1sp=1px；然而響應式的網頁並不是安卓，網頁更需要物理像素的尺寸約束，所以筆者在所劃分的臨界點計算了一下所測試屏幕的瀏覽器PPI，如下：
iphone5: 320x568px/4英寸/PPI=162.95
榮耀6：360x640px/5英寸/PPI=146.86
ipad：1024x768/7.9英寸/PPI=131.96
ipad mini：1024x768/7.9英寸/PPI=162.03
從上面的數據可以看出，大多瀏覽器啟動像素所產生的PPI大約在160左右，所以 某段文字在PC端約束的物理像素尺寸，直接同樣尺寸應用於移動端時，應該也可以產生不錯的體驗效果 ，所以設計時可以直接將Material Design的字體sp尺寸轉化為px來使用。Gekec.com的項目中，筆者只約束一套字體樣式，在方便前端開發的同時，完成了不錯的響應式效果。
3）顏色
Material Design Guide中給出了若干明亮鮮艷的顏色，並且指定了顏色的主要展現和層級變化，可供設計師選擇。
在實際操作中，通過商品內容的分類，筆者直接選擇Material Design中的顏色，作為每類商品的主要顏色，而在一些重要的操作入口，顏色應與主要顏色有明顯區別。筆者應用色環在Material Design Color基礎上，配合內容建立整個網站的顏色體系：
A.主體顏色以及層次根據內容確定，直接參考Material Design Color
B.應用色環分析整體補色間色
將所有主體顏色步在色環上，可以分析出補色位置應為上方紅框位置，應用於有明顯區別的重要入口，如「加入購物車」、「砸￥1元參與」，「結算」等等；而間色位置應為下方紅框位置，應用於不明顯的細節變化，如文字hover，文字鏈接等；
4）間距
Material Design Guide中已經嚴格約束了各個元素狀態下的間距，但為了滿足全站響應式布局在主流屏幕展現，筆者仍然使用了8px原理對一些間距進行了調整；在很多設計師研究8px原理並進行設計的同時， 筆者仍然需要強調，響應式web的設計應基於瀏覽器的像素尺寸 ，並不是基於ios和android的屏幕尺寸。具體可以參考上面已經分享的表格進行實驗。
這里分享一些8px的文章，感興趣的同學可以看一看：
一切為了程序猿！詳析手機端的8PX原理
一張圖解釋手機適配8px原理(原創)
總結：
Material Design已經給出了詳細的設計細節和原則，但不一定適合每一款產品，設計師需要弄清自身的產品是web還是app，邏輯是什麼樣，才可以進行細化的設計工作；深入了解產品邏輯的基礎上，確定的一套響應辦法和頁面細節，能夠保障設計的展現並帶來不錯設計效果。Material Design作為即蘋果、微軟之後最新推出的設計語言，充滿了濃郁的Google風情，能夠給用戶提供新鮮的視覺體驗，希望有越來越多的設計師會嘗試用Material Design進行設計。
⑩ MVC模式編寫購物車代碼
需求寫的不錯啊。可以實現了，首先看下需要什麼表，根據實體建表，然後對這些表進行增刪改查就ok了。
購物車要注意處理事務。