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