国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

自適應(yīng)/響應(yīng)式的功課.....

Fourierr / 819人閱讀

摘要：請開始清算市面上的電子產(chǎn)品得有百八十種的屏可以供君挑選這其實對在前端一線工作的程序員而言挺災(zāi)難的自適應(yīng)響應(yīng)式概念解決不同終端的適配問題我們一般有兩套方案一是自適應(yīng)布局二設(shè)置響應(yīng)式布局所謂的自適應(yīng)就是屏幕變大或是變小它的內(nèi)容也要做到同步縮放到

請開始清算市面上的電子產(chǎn)品,得有百八十種的屏可以供君挑選....這其實對在前端一線工作的程序員而言挺災(zāi)難
的....

自適應(yīng)/響應(yīng)式概念

解決不同終端的適配問題,我們一般有兩套方案,一是自適應(yīng)布局,二設(shè)置響應(yīng)式布局.

所謂的自適應(yīng)就是屏幕變大或是變小,它的內(nèi)容也要做到同步縮放,到某個寬度了會過于擁擠,內(nèi)容展示不清,那就喊停加個min-width;
而響應(yīng)式就是不同分辨率都可以私人定制一套樣式布局,大碼女孩穿xl,而紙片girl穿xs~

總而言之,就是自適應(yīng)的樣式布局從一而終,可以在不同分辨率的終端上顯示同一樣式的網(wǎng)頁,靈活設(shè)置寬度,而響應(yīng)式的樣式布局都會有或多或少的調(diào)整....

自適應(yīng)的網(wǎng)站: https://status.heroku.com/
響應(yīng)式的網(wǎng)站: https://www.microsoft.com/zh-cn/

(貼兩個網(wǎng)站,自助縮放,自行體會...)

開發(fā)工作場景

分辨率跨度太大,想要做到完美適配非常難的...正常情況下公司一般都會做兩套版本,一個應(yīng)用在pc端,一個運用于移動端...

但做兩套設(shè)計一定會導致開發(fā)和維護成本較高,所以為了節(jié)約點開發(fā)時間,還是會有些追求快速開發(fā)的公司希望可以只做一套設(shè)計適配各個終端,這時候就得依賴響應(yīng)式的布局了....

響應(yīng)式布局的經(jīng)典體驗就是bootstrap. 他自動識別屏幕的分辨率,做出相應(yīng)的調(diào)整,布局和內(nèi)容或多或少會有點不一樣....比如本來橫向?qū)Ш綏l變成漢堡菜單,本來一行三圖,變成一行一圖,本來的pc上展示的模塊隱藏了...

完成一個響應(yīng)式的頁面要:

需要允許網(wǎng)頁寬度自動調(diào)整,第一個動作就是在head里頭加一行viewpoort標簽

不可設(shè)置固定寬度,可以width的值可以設(shè)置百分比,或是auto或是rem.

字體單位最好使用em或者rem

流式布局各個區(qū)塊都是浮動的,寬度不足,自動掉下,避免出現(xiàn)橫向?qū)Ш綏l....注意絕對定位要少用!

利用 media,不同寬度引入不同的css文件

css@media規(guī)則,統(tǒng)一css文件可以根據(jù)不同分辨率,選擇應(yīng)用不同的css規(guī)則

圖片要自動縮放,即設(shè)置 max-width;100%

本篇寫于:學習了https://my.oschina.net/u/1992... 之后...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115760.html

相關(guān)文章

  • （轉(zhuǎn)） 響應(yīng)式和自適應(yīng)區(qū)別

    摘要：于是出現(xiàn)了一種新的布局方式寬度自適應(yīng)布局。下面再從直觀一點的來看，響應(yīng)式和自適應(yīng)的區(qū)別首先兩種方式解決問題的是不一樣的。響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng)，而且涵蓋的內(nèi)容更多。圖片的自適應(yīng)除了布局和文本，自適應(yīng)網(wǎng)頁設(shè)計還必須實現(xiàn)圖片的自動縮放。 自適應(yīng)的體驗http://m.ctrip.com/html5/ 響應(yīng)式的體驗 http://segmentfault.com/ 整理了幾篇自適...

    rockswang 評論0 收藏0

  • （轉(zhuǎn)） 響應(yīng)式和自適應(yīng)區(qū)別

    摘要：于是出現(xiàn)了一種新的布局方式寬度自適應(yīng)布局。下面再從直觀一點的來看，響應(yīng)式和自適應(yīng)的區(qū)別首先兩種方式解決問題的是不一樣的。響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng)，而且涵蓋的內(nèi)容更多。圖片的自適應(yīng)除了布局和文本，自適應(yīng)網(wǎng)頁設(shè)計還必須實現(xiàn)圖片的自動縮放。 自適應(yīng)的體驗http://m.ctrip.com/html5/ 響應(yīng)式的體驗 http://segmentfault.com/ 整理了幾篇自適...

    dockerclub 評論0 收藏0

  • （轉(zhuǎn)） 響應(yīng)式和自適應(yīng)區(qū)別

    摘要：于是出現(xiàn)了一種新的布局方式寬度自適應(yīng)布局。下面再從直觀一點的來看，響應(yīng)式和自適應(yīng)的區(qū)別首先兩種方式解決問題的是不一樣的。響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng)，而且涵蓋的內(nèi)容更多。圖片的自適應(yīng)除了布局和文本，自適應(yīng)網(wǎng)頁設(shè)計還必須實現(xiàn)圖片的自動縮放。 自適應(yīng)的體驗http://m.ctrip.com/html5/ 響應(yīng)式的體驗 http://segmentfault.com/ 整理了幾篇自適...

    Ilikewhite 評論0 收藏0

發(fā)表評論

0條評論

Fourierr

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<