1.調(diào)整視口
創(chuàng)新互聯(lián)擁有十多年的建站服務(wù)經(jīng)驗(yàn)，在此期間，我們發(fā)現(xiàn)較多的客戶在挑選建站服務(wù)商前都非常的猶豫。主要問題集中：在無法預(yù)知自己的網(wǎng)站呈現(xiàn)的效果是什么樣的？也無法判斷選擇的服務(wù)商設(shè)計出來的網(wǎng)頁效果自己是否會滿意？創(chuàng)新互聯(lián)業(yè)務(wù)涵蓋了互聯(lián)網(wǎng)平臺網(wǎng)站建設(shè)、移動平臺網(wǎng)站制作、網(wǎng)絡(luò)推廣、按需開發(fā)網(wǎng)站等服務(wù)。創(chuàng)新互聯(lián)網(wǎng)站開發(fā)公司本著不拘一格的網(wǎng)站視覺設(shè)計和網(wǎng)站開發(fā)技術(shù)相結(jié)合，為企業(yè)做網(wǎng)站提供成熟的網(wǎng)站設(shè)計方案。
代碼實(shí)例：
!DOCTYPE?html
head
meta?charset="UTF-8"?/
title布局之路-移動端開發(fā)實(shí)例/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。
代碼實(shí)例：
style?type="text/css"
html?{
font-size:?42px;
}
/style
3.浮動布局
各個區(qū)塊都是浮動的，不是固定不變的。為了能自適應(yīng)各個窗口。
代碼實(shí)例：
.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è)計"還必須實(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ū)寬度進(jìn)行計算的。
例如，父級寬度為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。
1）像span這樣的行內(nèi)標(biāo)記，定義它的margin-top和margin-bottom是無效的，除非你把它設(shè)置為塊狀元素才可以。Display:block
2）對于塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 DIV 等等，
3）無論什么元素，一旦設(shè)置為是浮動顯示，就擁有了完整的盒模型結(jié)構(gòu)，我們就可以使用外邊距，內(nèi)邊距，邊框，高和寬來控制的大小以及與其他對象之間的位置關(guān)系。
4）浮動是從網(wǎng)頁布局的角度來定義元素的顯示，而行內(nèi)和塊狀屬性主要是從元素自身的性質(zhì)來定其顯示的。
5）當(dāng)元素沒有定義邊框時，可以把內(nèi)邊距作為外邊距使用。有時候外邊距會有重疊現(xiàn)象的。
6）當(dāng)為元素定義背景圖像時，內(nèi)邊距區(qū)域內(nèi)可以顯示背景圖像，而對外邊距區(qū)域來說，背景圖像是達(dá)不到的，他永遠(yuǎn)都是透明狀態(tài)
7）用div+css設(shè)計網(wǎng)頁結(jié)構(gòu)時，設(shè)計師滿腦子都是網(wǎng)頁內(nèi)容，而非內(nèi)容所呈現(xiàn)的效果。
8）塊狀元素：不管塊狀元素寬度是多少，他總會自動占據(jù)一行，因?yàn)樵谒┪哺郊恿艘粋€換行符，而行內(nèi)元素沒有這個特點(diǎn)。塊狀元素有完整的盒模型結(jié)構(gòu)，可以定義寬度和高度，而行內(nèi)元素沒有這個特性，無法通過高度來改變文本行的行高。
塊元素的代表標(biāo)記 div
行內(nèi)元素的代表標(biāo)記 span ，行內(nèi)標(biāo)記不具備組織結(jié)構(gòu)框架
9）網(wǎng)頁布局分為：自然布局，浮動布局， 定位布局
10）當(dāng)一個元素被定義為浮動顯示時，即定義為塊狀元素。并且該元素就會收縮自身體積為最小狀態(tài)。所以，應(yīng)該有個好的習(xí)慣即把浮動元素設(shè)置高和寬。如果沒有設(shè)置，則元素會按照它所包含的內(nèi)容大小來確定它的大小。
11）當(dāng)元素浮動后，周邊的對象會自動環(huán)繞浮動元素周圍，形成一種環(huán)繞關(guān)系。
12）塊狀元素之間的外邊距會有重疊現(xiàn)象，但是浮動元素之間的外邊距不會發(fā)聲重疊現(xiàn)象。
13）浮動元素移動，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。
14）一般定位元素（絕對或是相對元素）都會覆蓋在文檔流對象之上。但是，select元素的窗口控件還不完全支持z-index
15）在css定位布局中，一般遵循“外部相對定位，內(nèi)部絕對定位”
16）在body中設(shè)置min-width:760px,可以避免布局重疊現(xiàn)象。
IE5以上的瀏覽器以及其他的瀏覽器已經(jīng)統(tǒng)一了盒模型尺寸的計算方式。即： 【實(shí)際高度】=【預(yù)設(shè)高度】+【padding-top】+【padding-bottom】 margin是不計算在內(nèi)的。另外你忽略了文字默認(rèn)的行高。 你得把A的display定義成block，然后加上尺寸。 一般來說。font還有一個默認(rèn)的行高，也即line-height ， 如果不定義高度，默認(rèn)的a的高度應(yīng)該是font的行高，而不是font-size的值。綜合盒模型高的計算公式，你現(xiàn)在的高度應(yīng)該是 【實(shí)際高度】=【line-height】+【5px】+【5px】 【建議】 1.定義一下行高。 2.或者定義a為block，并加尺寸。（推薦）
重慶分公司
重慶分公司
