其達到的效果都一致的，自適應(yīng)屏幕大小來改變頁面布局適應(yīng)當(dāng)前屏幕。
成都創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目做網(wǎng)站、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元巴中做網(wǎng)站,已為上家服務(wù),為巴中各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108
類似爸爸，老爸，爹地，叫法不一樣而已。
HTML5 制作響應(yīng)式網(wǎng)頁，首先需要考慮是全平臺適配還是只是移動端適配。這里以移動端響應(yīng)式網(wǎng)站為例，講述如何制作響應(yīng)式網(wǎng)頁。
1、選定基本設(shè)計尺寸，一般以1080為基準(zhǔn)。確定響應(yīng)式web設(shè)計的應(yīng)用場景之后，和美工（或設(shè)計師）溝通，之前，一般需要美工出幾套主流移動設(shè)備屏幕分辨率的設(shè)計圖，現(xiàn)在，使用流式布局以及rem等可以使用一套設(shè)計圖，以最常用的移動設(shè)備屏幕分辨率為基準(zhǔn)。
2、當(dāng)美工完成設(shè)計圖之后，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，F(xiàn)ireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發(fā)生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。
具體代碼：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
響應(yīng)式網(wǎng)頁設(shè)計 （英語：Responsive web design，通?？s寫為 RWD ），也稱為自適應(yīng)網(wǎng)頁設(shè)計，這一項網(wǎng)頁設(shè)計的技術(shù)可以使得網(wǎng)站在不同的設(shè)備上都有一個合適的呈現(xiàn)，減少了用戶進行縮放，移動等操作行為的次數(shù)。對前端工程師來說使用響應(yīng)式布局設(shè)計 更易于維護網(wǎng)頁。因為移動流量現(xiàn)在占互聯(lián)網(wǎng)流量的一半以上，響應(yīng)式布局變得更加的重要。
響應(yīng)式布局 技術(shù)的概念是伴隨著CSS3的媒體查詢技術(shù)的出現(xiàn)而產(chǎn)生的，現(xiàn)在已成為優(yōu)秀頁面布局的標(biāo)準(zhǔn)，是當(dāng)今主流的設(shè)計。其中，Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。本人曾做過網(wǎng)頁設(shè)計相關(guān)的工作深知響應(yīng)式設(shè)計對于提升用戶體驗的重要性。不少朋友希望學(xué)習(xí)響應(yīng)式布局技術(shù)卻苦于沒有辦法找到合適的實例，我多年搜集了一套實用的HTML5響應(yīng)式模板。涵蓋各領(lǐng)域，可以直接修改 ，詳情請看
1.調(diào)整視口
代碼實例：
!DOCTYPE?html
head
meta?charset="UTF-8"?/
title布局之路-移動端開發(fā)實例/title
meta?name="viewport"?content="width=device-width,user-scalable?=?no"?/
link?rel="stylesheet"?type="text/css"?href="css/reset.css"?/
/head
body
div?class="wrap"/div
/body
/html
代碼解析：由于使用不同設(shè)備打開網(wǎng)頁時，寬度均有所不同，所以不能講視口設(shè)置為固定值，應(yīng)當(dāng)為width=device-width,即將視口設(shè)置為當(dāng)前設(shè)備的寬度。
2.確定設(shè)計圖的最小字體
瀏覽器（部分）能夠顯示的最小字體未12px，當(dāng)移動端頁面寬度為320px時，要保證最小字體為12px，那么在1080px的設(shè)計圖中，最小字體應(yīng)當(dāng)為42px。
代碼實例：
style?type="text/css"
html?{
font-size:?42px;
}
/style
3.浮動布局
各個區(qū)塊都是浮動的，不是固定不變的。為了能自適應(yīng)各個窗口。
代碼實例：
.main?{
float:?left;
width:?70%;
}
.box?{
float:?left;
width:?60.93%;
font-size:?1.71rem;
text-align:?center;
line-height:?4.64rem;
}
float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。
4.通過媒介查詢，為不同設(shè)備加載相應(yīng)樣式
有條件應(yīng)用樣式：
style
@media?all?and(min-width:500px){?...?}
@media?(orientation){?...?}
/style
代碼解析：
第一行媒體查詢代碼指的是：為寬度大于等于500px的設(shè)備設(shè)置樣式。
第二行媒體查詢代碼指的是：為縱屏狀態(tài)（可見區(qū)域大于或等于寬度）下的移動端設(shè)備設(shè)置樣式。
有條件的加載樣式表：
head
link?rel="stylesheet"?href="wide.css"?media="screen?and(min-width:1024)"?/
link?rel="stylesheet"?href="mobile.css"?media="screen?and(max-width:320)"?/
/head
代碼解析：
第一行媒體查詢代碼指的是：為寬度大于等于1024px的設(shè)備，加載wide.css文件。
第二行媒體查詢代碼指的是：為寬度小于等于320px的設(shè)備，加載mobile.css文件。
5.使用百分比和rem替換px
除了布局和文本，"自適應(yīng)網(wǎng)頁設(shè)計"還必須實現(xiàn)圖片的自動縮放。
代碼效果對比：
/*使用固定像素*/
.box?{
float:?left;
width:?658px;
font-size:?72px;
text-align:?center;
line-height:?195px;
}
/*使用百分比和rem*/
.box?{
float:?left;
width:?60.93%;
font-size:?1.71rem;
text-align:?center;
line-height:?4.64rem;
}
代碼解析：
水平方向的值，將具體像素調(diào)整為百分比。百分比的計算是根據(jù)父級的內(nèi)容區(qū)寬度進行計算的。
例如，父級寬度為1080px， 子級元素為197px，那么子元素轉(zhuǎn)換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據(jù)父級計算，當(dāng)標(biāo)簽結(jié)構(gòu)級別不同時，計算公式中的“分母”也有所不同，在開發(fā)時這個地方很容易出現(xiàn)問題，請務(wù)必注意。
垂直方向的值，將具體像素調(diào)整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標(biāo)簽當(dāng)前的字體大小為42px，將行高轉(zhuǎn)換為rem單位，即195/42= 4. 64rem。
這個網(wǎng)站模版用不了多少錢，如果想多花錢，就先去找人設(shè)計一下然后再讓人制作；
但是現(xiàn)在有很多的人都是通過幫別人制作完成以后，再轉(zhuǎn)手發(fā)到淘寶上去，二次交易，這樣的源碼很便宜；
你可以去看看有沒有喜歡或者合適的，自己動手淘一個，很便宜的；希望可以幫到你；
重慶分公司
重慶分公司
