普通網頁怎麼改成響應式布局，各位大佬急求呀？
- wrapbootstrap.com 這是個基於 bootstrap 的模版網站，基本都支持響應式，先仔細看二三十個
- 基本上你能找到規律，然後照著寫響應式樣式即可
- 最後找 PM 和設計師幫忙挑挑毛病，搞定
謝邀。
1. 使用媒體查詢來設置樣式media query。
// 不同的屏幕尺寸對應不同的樣式
@media screen and (max-width:980px){
html {}
body {}
......
}
/** ipad **/
@media only screen and (min-width:768px)and(max-width:1024px){
......
}
/** iphone **/
@media only screen and (width:320px)and (width:768px){
......
}2. 寬度百分比布局
// 寬度不固定，可以使用百分比
#head{width:100%;}
#content{width:50%;}3. 柵格系統（CSS Grids）
柵格系統的組成
如上圖，是一個基本的柵格布局，它包含了：
- container: 包裹整個柵格系統的容器
- rows: 行
- columns: 列
- gutters: 各列的間的空隙
可以使用Bootstrap的柵格布局，也可以參考柵格布局的原理自己寫一套。
4. 字體rem處理
rem是相對於根元素的，所以需要重置根元素字體大小。
// 方式一：js設置html的font-size大小
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + px;// 方式二：使用vw設置，vw也是一個相對單位，100vw等於屏幕寬度
html{
font-size: 10vw;
}
// 方式三：媒體查詢, 設定每種屏幕對應的font-size
@media screen and (min-width:240px) {
html, body, button, input, select, textarea {
font-size:9px;
}
}
@media screen and (min-width:320px) {
html, body, button, input, select, textarea {
font-size:12px;
}
}
設置子元素rem
div {
width: 20rem;
font-size: 1rem;
}還是推薦使用框架，我大概說一下原理
響應布局說白了就是根據不同的界面像素、改變css的樣式，如果感覺框架不適合，也可以自己定義
可以使用CSS3媒體查詢@media
@media 類型 and (條件1) and (條件二)
{
css樣式
}
例：
@media screen and (max-width:980px ) {
body{
background-color: red;
}
}有CSS基礎,查關鍵詞media,彈性布局.
沒css基礎先補補
用框架，bootstrap，給網頁元素添加一些類，利用柵格系統
使用flex＋rem
加個媒體查詢。media然後寫移動端就行了
推薦閱讀：
