rem實現(xiàn)響應式布局的思路詳解
正文
你是不是經(jīng)常被問一個問題:Vue的響應式原理是什么?哈哈哈... 先不講原理,想想Vue的響應式是指什么?Vue的響應式是指data中的數(shù)據(jù)變化,然后視圖(dom)會跟著變化。那么響應式布局可以理解為就是xx變化,然后布局跟著變化。那這個xx指的是什么呢?為什么布局要跟著變化呢? 下面一一來解答。
為什么要使用響應式布局?
因為我們?yōu)g覽網(wǎng)頁的設備屏幕大小不一樣,例如有屏幕大的有屏幕小的手機。
16px的字體在iPhone6/7/8上展示效果:
16px的字體在iPad上展示效果:
寫移動端H5網(wǎng)頁的時候,一般設計稿是以375px也就是iPhone6/7/8的屏幕寬度去設計的,當有用戶使用iPad打開的時候效果就會很不好,這顯然不是我們想看到的。
如何實現(xiàn)響應式布局呢?
也就是說我們?nèi)绾卧趇Pad上看到和iPhone6/7/8也差不多的效果呢?沒錯你肯定想得到,那就是在iPad上的字體太小了,字體要設置得大一點才行。也就是說要實現(xiàn)字體的大小和隨著不同屏幕大小的變化。那如何實現(xiàn)在不同屏幕大小下,讓字體大小也不一樣呢?
那就是利用媒體查詢根據(jù)不同的屏幕設置各種屏幕寬度下的根元素font-size,然后布局使用rem代替px為長度單位,從而實現(xiàn)響應式布局。
那什么是媒體查詢?
developer.mozilla.org/zh-CN/docs/…詳細的就不展開了,例如下面這段代碼就是指在最大屏幕寬度為374px的設備下,將根元素(html)的字體設置為86px
@media only screen and (max-width: 374px) { html { font-size: 86px } }
那么什么是rem?
rem 是一個相對根元素(html)的長度單位px 是一個絕對長度單位em 同樣也是一個相對長度單位,只不過相對的是父元素如上面所設置的將html的font-szie設置為86px, 那么1rem就等于86px。
怎么計算出各個尺寸屏幕下的html元素font-size要設置為多少呢?
這個就得找一下各個屏幕尺寸下的代表機型,然后以其中一個為標準,計算出其他的。一般是以iPhone6/7/8為標準,為什么?因為現(xiàn)在設計稿大多是以iPhone6/7/8的屏幕寬度375px來設置的。
比較小的屏幕:iPhone5屏幕寬度:320px、標準的屏幕:iPhone6/7/8屏幕寬度:375px比較大的屏幕:iPhone6/7/8 Plus屏幕寬度:414px其他更多的比如iPad的屏幕:768px
如果將標準的屏幕寬度設置為100px @media only screen and (min-width: 375px) and (max-width: 413px) { html { font-size: 100px } } 那么小屏幕的 100 / x = 375 / 320 x = 85.333... @media only screen and (max-width: 374px) { html { font-size: 85px } } 那么大屏幕的 100 / x = 375 / 414 x = 110.4 @media only screen and (min-width: 414px) and (max-width: 767px) { html { font-size: 110px } } 更大屏幕的 100 / x = 375 / 768 x = 204.8 @media only screen and (min-width: 768px) { html { font-size: 204px } } 那么將.box的font-size就可以用rem為單位了,在標準的375px屏幕下,1rem就是100px,那么16px,就是 0.16rem。 .box { font-size: 0.16rem; } ... <div class="box"> 什么是響應式布局? </div>
在iPhone5上展示效果:
在iPhone6/7/8上展示效果:
在iPhone6/7/8 Plus上展示效果:
在iPad上展示效果:
怎么樣,是不是在各種尺寸屏幕下看到的效果是差不多的。這就是所謂隨著屏幕變化,布局跟著變化的響應式布局實現(xiàn)的思路,同時是基于rem來實現(xiàn)的,rem不僅僅只用于font-size來設置字體大小,如果你只是設置字體變大,盒子的寬度這些還是用px那就會出問題。凡是可以設置數(shù)值的屬性都可以用rem為單位,例如width、 height...。基于rem的響應式布局是整個頁面所有的長度單位都使用rem,這只是實現(xiàn)響應式布局的一種方式。
完結感想
響應式布局的優(yōu)勢就是一套代碼,為不同寬度的設備提供渲染效果不一樣的網(wǎng)頁,而只需要維護一套代碼。不需要針對不同的設備來寫多套代碼,同時解決了屏幕小內(nèi)容會擁擠、屏幕大一點的話內(nèi)容又看不清楚的問布局題。
以上就是rem實現(xiàn)響應式布局的思路詳解的詳細內(nèi)容,更多關于rem響應式布局思路的資料請關注腳本之家其它相關文章!
相關文章
vue實現(xiàn)動態(tài)路由的方法及路由原理解析
這篇文章主要介紹了路由原理及vue實現(xiàn)動態(tài)路由,Vue Router 提供了豐富的 API,可以輕松地實現(xiàn)路由功能,并支持路由參數(shù)、查詢參數(shù)、命名路由、嵌套路由等功能,可以滿足不同應用程序的需求,需要的朋友可以參考下2023-06-06詳解vue結合el-table實現(xiàn)表格小計總計需求(summary-method)
這篇文章主要介紹了vue結合el-table實現(xiàn)表格小計總計需求(summary-method),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01vue-router啟用history模式下的開發(fā)及非根目錄部署方法
這篇文章主要介紹了vue-router啟用history模式下的開發(fā)及非根目錄部署方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12