響應式布局與自適應布局的區別

2022-07-26 17:00:27 字數 1179 閱讀 8032

rem

·rem單位:css3 新增的乙個相對單位;相對於根元素html的font-size的值進行動態計算得到的,如font-size:14px,1rem = 14px。

例:根據當前螢幕寬度和設計稿寬度計算html-fontsize的值

設計稿寬度:640px,fontsize:14px,螢幕寬度是375px,則font-size = 375/640*14 即:375/600 = fontsize/14

如果html的fontsize的值改變了,之前設定的所有rem單位的值自動會跟著放大或者縮小;目前移動端響應式布局,推薦使用 rem。

注意:rem需要配合**查詢才可實現響應式布局

·em單位:相對于父元素字型大小,預設情況下,1em = 16px

一般適用於響應式,但不推薦使用,計算比較繁瑣。

vw/vh

vw單位:viewpoint width 視窗寬度的百分比(1vw 代表視窗的寬度為 1%)

vh單位:viewpoint height 視窗高度的百分比(1vh 代表視窗的高度為 1%)

一般適用於百分比布局。

響應式布局和自適應布局區別

1.自適應布局通過檢測視口解析度,來判斷當前訪問的裝置是:pc端、平板、手機,從而請求服務層,返回不同的頁面;

響應式布局通過檢測視口解析度,針對不同客戶端,在客戶端做**處理,來展現不同的布局和內容。

2.自適應布局需要開發多套介面;

響應式布局只需要開發一套介面就可以了。

3.自適應布局對頁面做的螢幕適配是在一定範圍:比如pc端一般要大於1024畫素,手機端要小於768畫素;

響應式布局是一套頁面全部適應。

4.自適應布局如果螢幕太小會發生內容過於擁擠;

響應式布局正是為了解決這個問題而衍生出的概念,它可以自動識別螢幕寬度並做出相應調整的網頁設計。

總之,響應式布局還是要比自適應布局要好一點,但是自適應布局更加貼切實際,因為你只需要考慮幾種狀態就可以了而不是像響應式布局需要考慮非常多狀態。所以的說無論哪種設計都有它們各自的特點,我們要根據專案的需求來選擇適合的布局方式。

自適應布局與響應式布局

什麼是響應式布局 響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個 能夠相容多個終端,而不是為了每乙個終端做乙個特定的版本。什麼是自適應式布局 自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端裝置上的新...

自適應布局,響應式布局以及rem,em區別

一。自適應和響應式 先說共同點,兩者都是因為越來越多的 移動裝置 mobile,tablet device 加入到網際網路中來而出現的為移動裝置提供更好的體驗的技術。用技術來使網頁適應從小到大 現在到超大 的不同解析度的螢幕.都是為了解決同一張頁面在不同裝置解析度上合理展示的技術。不同點 響應式布局...

自適應布局和響應式布局

我根據個人理解描述一下 一套程式在多種終端裝置展示,頁面布局有2種 自適應布局和響應式布局。這二者有啥區別呢?自適應布局,就是頁面在多種終端裝置,不同解析度下,能夠正常展示,不會出現錯位,嚴重變形等,但頁面布局不變。而響應式布局,則在不同終端 不同解析度下,頁面布局 元素呈現的先後順序可能會有所變化...