久久国产精品视频-麻豆av电影-天天看天天操-婷婷精品视频-精品成人一区二区-韩国精品久久久-女尊高h男高潮呻吟-av在线播放一区-av在线资源观看-亚洲欧美日韩国产一区二区-91色九色-欧美国产一二三区-av番号在线-国产人成午夜免电影费观看-狠狠操 av

4月份著手開發(fā)公司我家農(nóng)場(chǎng)項(xiàng)目，首先開始的就是PC網(wǎng)站的切圖，由于公司期望給所有終端用戶最為一致的用戶體驗(yàn)，取決于這種設(shè)計(jì)目的，整套PC項(xiàng)目必須做到響應(yīng)式開發(fā)。我們網(wǎng)頁(yè)開發(fā)者在進(jìn)行網(wǎng)頁(yè)開發(fā)的時(shí)候會(huì)有以下兩種選擇：針對(duì)每種設(shè)備開發(fā)一套網(wǎng)站或者開發(fā)一個(gè)網(wǎng)站適配所有設(shè)備。顯然前者并不是一個(gè)明智的選擇，但幸運(yùn)的是，現(xiàn)在我們可以采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)來(lái)實(shí)現(xiàn)所有網(wǎng)站的適配，做一個(gè)網(wǎng)站同時(shí)能兼容各種設(shè)備和屏幕。

什么是響應(yīng)式設(shè)計(jì)？真正的響應(yīng)式設(shè)計(jì)方法不是根據(jù)視口大小改變網(wǎng)頁(yè)布局，恰巧相反，它是從整體上顛覆我們當(dāng)前設(shè)計(jì)網(wǎng)頁(yè)的方法。從前我們針對(duì)電腦進(jìn)行固定寬度設(shè)計(jì)，然后將其縮小并針對(duì)小屏幕進(jìn)行內(nèi)容重排，而現(xiàn)在，我們采用的方式是先針對(duì)小屏幕進(jìn)行設(shè)計(jì)，進(jìn)而逐步增強(qiáng)針對(duì)大屏幕的設(shè)計(jì)與內(nèi)容。響應(yīng)式設(shè)計(jì)的另一個(gè)重點(diǎn)就是視口。視口和設(shè)備的屏幕尺寸不是同一個(gè)概念。視口是指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含工具欄，標(biāo)簽欄等，也就是網(wǎng)頁(yè)實(shí)際顯示的區(qū)域。屏幕尺寸是設(shè)備的物理顯示區(qū)域。

如何做響應(yīng)式開發(fā)？

1：先設(shè)置視口

    2：百分比搭配媒體查詢

在最初使用媒體查詢的時(shí)候，你會(huì)覺(jué)得它功能強(qiáng)大無(wú)比。但隨著項(xiàng)目越做越多你會(huì)發(fā)現(xiàn)媒體查詢只是一個(gè)必要條件。如果只使用媒體查詢來(lái)適應(yīng)不同視口的固定寬度設(shè)計(jì)，只會(huì)從一組 CSS 媒體查詢規(guī)則變到另一組，兩者之間沒(méi)有任何平滑漸變。我們需要的是一個(gè)靈活的設(shè)計(jì)，能在所有視口中都完美的顯示，而不僅僅針對(duì)媒體查詢?cè)O(shè)置的固定視口。合理使用百分比布局創(chuàng)建流動(dòng)的彈性界面，同時(shí)使用媒體查詢來(lái)限制元素的變動(dòng)范圍，基于以上兩者我們才能構(gòu)建出完美的設(shè)計(jì)。

3：em，rem

px是最常用的長(zhǎng)度單位，它是一種相對(duì)長(zhǎng)度單位，代表像素，它取決于顯示設(shè)備的分辨率。em是常用的印刷度量單位，在CSS里面，1個(gè) em 定義為一種給定字體的font-size 值，如果一個(gè)元素的 font-size 是16px，那么對(duì)于該元素，1em 就等于16px。rem 是指相對(duì)于根元素字體大小的單位。如果我們給 body 標(biāo)簽設(shè)置文字大小為100%，給其他的文字都使用相對(duì)單位rem，那這些文字都會(huì)受 body 上的初始聲明的影響，這樣做的好處是如果以后需要改變文字的大小，我們只用修改 body 的文字大小，其他的所有文字都會(huì)依照比例相應(yīng)改變。

4：彈性圖片

要實(shí)現(xiàn)圖片隨流動(dòng)布局相應(yīng)縮放，只需給在CSS中給圖片添加 width 百分比。如果包含塊里面就只有圖片可以設(shè)置為100%。如果包含塊有其他元素，這將會(huì)引入一個(gè)問(wèn)題，縮放則會(huì)影響到它的包含塊以及其他元素。所以我們需要給特定圖片設(shè)置特定的規(guī)則，如果圖片拉伸超過(guò)了圖片的原始尺寸，圖片的顯示就會(huì)有問(wèn)題。我們也需要給圖片設(shè)置max-width一個(gè)闕值。圖片縮放的問(wèn)題：圖片的尺寸必須比其顯示尺寸更大，這樣才能保證渲染效果。基于這個(gè)原因，圖片文件的體積比實(shí)際顯示的圖片更大。如果要做大最好，也可以考慮為不同的屏幕尺寸提供不同的圖片。

5：bootstrap框架

bootstrap框架，為響應(yīng)式開發(fā)量身定做的一個(gè)框架，弊與利共存，取其利避其弊，誰(shuí)用誰(shuí)知道，賊爽。

總結(jié)：5月加油！！！