❶ 響應式布局 怎麼用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的樣式，響應式布局就沒問題。
❷ 在pc端不考慮移動端，前端做響應式布局的時候，需要自適應字體大小嗎
前端開發中PC端和移動端網站的區別，主要是：
1、PC端在開發過程中考慮的是瀏覽器兼容性，移動端開發中考慮的是手機兼容性問題，做移動端開發，更多考慮的是手機解析度的自適應和不同手機操作系統的略微差異化；
2、在部分事件的處理上，移動端自然是偏向於觸屏的，另外包括移動端彈出的手機鍵盤該如何處理，這樣的問題在PC上肯定不會遇到，但在移動端，如果你沒有經驗，處理起來是相當麻煩的；
3、布局上，移動端開發是要做到頁面布局自適應的，而PC端頁面布局的比例會相對固定；
4、在動畫效果處理上，PC端要考慮IE的兼容性，通常用JS做動畫的通用性會好一些，但相比CSS3卻犧牲了較大的性能，而在手機端，如果要做一些動畫、特效等，第一選擇肯定是CSS3，既簡單，效率又高。
❸ WEB前端怎麼布局
在談WEB前端怎麼布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2.流式布局：布局特點是屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局：布局特點是每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
那麼我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，最好的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。
❹ web前端響應式布局怎麼解決'
1、不要優先為桌面版設計
2、導航欄菜單的麻煩
3、不應隱藏內容
4、單獨的移動端網站地址
5、糟糕的用戶體驗
6、不要忽視跨情景的公約
7、不要忽視頁面的載入時間
8、不要為觸摸屏設備開發
9、不找經驗淺的人做前端開發
❺ 想做前端的響應式布局應該從什麼知識入門
如果是前端剛入門的話，建議先看《CSS權威指南》、《響應式Web設計(HTML5和CSS3實戰)》這兩本書。
可以看完上面兩本書後再看 boostrap。 boostrap 含很多跟響應式無關的東西， 它的柵格是響應式的，可以去看這部分的代碼。
另外響應式布局的目的是使不同解析度、寬高比的設備都能有比較好的布局與體驗。實現這個目的在不同的需求下有不同的方法，除了響應式布局外還有使用 rem、viewport 等，可以了解下
❻ Web前端面試題：響應式布局有哪些優點和缺點
響應式網頁設計
優點：
跨平台和終端且不需要分配子域。
兼容當前及未來設備。
節約成本。一個域名，一套網頁。
缺點：
兼容性 不兼容低版本瀏覽器。
移動帶寬增多。
載入事件長、無用代碼太多。
內存大。
❼ 關於現在流行的 web 響應式 布局 我想問下各位，這按理說應該是完全在前端搞定是吧。
響應式布局是主流通過判定屏幕大小決定是否載入這段CSS代碼！
所以跟後台沒啥關系！ 只要你的CSS寫好了就行！
❽ 前端響應式是怎麼回事
看看simplebs這個就明白了
❾ 現在前端對響應式布局要求高嗎
如果你是在互聯網公司（比如阿里，網易這種類型的公司），那基本逃不了這個問題。原因就是，開發的大部分系統，都是公司或者部門的管理系統，並且受限於使用群體，我們可以強制的規定使用的瀏覽器，以至於連兼容都可以不做。響應式本身也不是什麼復雜，或者難度很高的概念或者技術，好好看一看吧，關鍵還是如何將設計稿上的元素進行合理的布局，一般也僅僅是HTML和CSS層面的東西，屬於很基礎的部分。