如何把普通網站修改為響應式

使用媒體查詢來設置樣式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){
    ......}

寬度百分比布局

// 寬度不固定，可以使用百分比#head{width:100%;}#content{width:50%;}

字體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;
	}}

一個網站只在桌面屏幕上好看是遠遠不夠的，同時也要在平板電腦和智能手機中能夠良好呈現(xiàn)。響應式的網站是指它能夠適應客戶端的屏幕尺寸，自動響應客戶端尺寸變化。在這篇文章中，我將向您展示如何通過3個簡單的步驟輕松地使網站變成響應式（Responsive）