資訊專欄INFORMATION COLUMN
摘要：響應式無論響應式還是自適應，都是針對每一個元素進行寬度的變化和布局的變化。自適應自適應是，程序代碼已經(jīng)為不同的寬度配備了不同的樣式代碼大小和布局。參考資料布局自適應自適應和響應式區(qū)別技術方案選擇
背景
????隨著移動設備和前端技術的發(fā)展，交互頁面也在移動端使用越來越頻繁。但是移動設備屏幕的大小和分辨率并不一致，這導致了并不能按照pc端編寫頁面的方式去編寫移動端頁面。
????隨著實踐地不斷進行和技術的發(fā)展，逐漸形成了下面幾個概念：
自適應（Adaptive）
???? 程序代碼主動地去根據(jù)不同的屏幕大小，去實現(xiàn)不同的樣式代碼，需要實現(xiàn)不同的樣式代碼。
響應式（Responsive）
???? 程序代碼被動地去適應屏幕的寬度變化，經(jīng)常使用百分比或者media查詢。
網(wǎng)上流傳最多的圖就是下面的圖，個人認為還是可以能夠解釋兩者之間的區(qū)別
但其實這兩者之間的區(qū)別很難區(qū)分，有的程序界面更是把兩者結合起來，實現(xiàn)更好的用戶體驗，畢竟用戶至上。下面就從實際應用方面來講一下，具體的實際應用。
響應式無論響應式還是自適應，都是針對每一個html元素進行寬度的變化和布局的變化。實現(xiàn)方式——百分比寬度在我看來，響應式就是讓html元素寬度能夠根據(jù)不同的屏幕寬度，進行對應的寬度變化。
常用的百分比寬度，比如antd的柵格布局，就是將屏幕劃分為24格，每一個格子占據(jù)4.1%的寬度。
實現(xiàn)方式——flex布局????flex是彈性盒，將某一個元素設置為彈性盒，就創(chuàng)建了一個BFC，可以設置內(nèi)部元素的相關屬性?？梢栽O置內(nèi)部元素的shrink/grow/order。這樣就能夠讓內(nèi)部元素隨著屏幕的變化進行不同的寬度變化。
????這里就不講flex的具體知識點了，詳情查看參考資料。
針對元素進行寬度變化，布局仍然遵循流式布局。所有的布局都是統(tǒng)一的。自適應
具體內(nèi)容的元素并沒有變化，比如字體的大小。
自適應是，程序代碼已經(jīng)為不同的寬度配備了不同的樣式代碼（大小和布局）。當用戶界面切換到不同的大小的時候，就展示不同的樣式或者布局。
具體可以分為兩類：
階梯式
平滑式
1、階梯式自適應如圖所示:
階梯式自適應，就是對不同的大小設置不同的樣式，通常使用media查詢。設置不同的斷點，在不同的斷點處設置不同的樣式。當然也可以設置一個范圍內(nèi)的樣式。
@media screen and (device-width: 640px) {
html {
font-size: 100px;
color: blue
}
}
@media all and (min-width:500px) and (max-width:1000px){
body{
color:#f00;
}
}
可以根據(jù)不同的屏幕寬度設置不同的布局與rem（em）結合
rem是根據(jù)文檔元素跟節(jié)點的字體大小設置不同的大小
em是根據(jù)當前對象的字體大小
@media screen and (device-width: 640px) {
html {
font-size: 100px;
color: blue
}
}
div {
// 這里的1rem就是100px
width: 1rem;
}
與rem結合，可以解決不同屏幕尺寸下，字體大小的變化，對于font-size大小的設置，可以參考天貓、京東的rem設置。缺點
這樣做可以在不同的寬度顯示不同的樣式，但是沒法實現(xiàn)持續(xù)性的變化，可能會看到不同頁面大小請看下屏幕中的字體或者其他會突然變化。
2、平滑式自適應如圖所示：
平滑自適應可以看作變化度特別小的階梯式自適應。方法
主要通過設置監(jiān)聽函數(shù)，動態(tài)改變font-size的大小。
window.addEventListener("resize", adjustWidth);
const adjustWidth = () => {
var deviceWidth =
document.documentElement.clientWidth > 1300
? 1300
: document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + "px";
}
結合rem就可以動態(tài)設置html元素的大小。
技術方案選擇整體來說，沒有哪一種方案是最合適的。經(jīng)常需要幾種不同的技術手段互相結合。
經(jīng)常用的方式就是：
通過media查詢，設置font-size的大小，具體的元素可以通過flex或者百分比布局，就基本可以解決大部分問題。
祝大家端午節(jié)快樂。
參考資料1、Flex布局
2、web自適應
3、自適應和響應式區(qū)別
4、技術方案選擇
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/114795.html
摘要：做移動端自適應時可能很多人都對自適應和之間的關系產(chǎn)生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。 做移動端自適應時可能很多人都對自適應和dpr之間的關系產(chǎn)生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應 首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...
摘要：做移動端自適應時可能很多人都對自適應和之間的關系產(chǎn)生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。 做移動端自適應時可能很多人都對自適應和dpr之間的關系產(chǎn)生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應 首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...
閱讀 2624·2021-11-22 12:05
閱讀 3506·2021-10-14 09:42
閱讀 1739·2021-07-28 00:15
閱讀 2041·2019-08-30 11:08
閱讀 1546·2019-08-29 17:31
閱讀 976·2019-08-29 16:42
閱讀 2392·2019-08-26 11:55
閱讀 2165·2019-08-26 11:49
