幾種響應(yīng)式文字詳解
講真,其實(shí)我也不知道該如何為此篇開(kāi)頭,
因?yàn)轫憫?yīng)式文字需不需要做其實(shí)我也沒(méi)有深入探究過(guò),
但在學(xué)習(xí)其他網(wǎng)站的過(guò)程中,我發(fā)現(xiàn)了一些比較新奇的做法,所以想試著梳理一下,
為何會(huì)出現(xiàn)這種有些奇怪,可能實(shí)則非常奇妙的解決方案。
如果理解有偏差的地方,還望大佬們不吝賜教。
簡(jiǎn)單來(lái)說(shuō),響應(yīng)式是為了讓網(wǎng)頁(yè)在各種顯示設(shè)備上都有不錯(cuò)的瀏覽體驗(yàn),
無(wú)論是 @media 將元素?fù)Q行,后臺(tái)獲取 userAgent 返回不同頁(yè)面,利用 viewport 限定視圖,還是利用根元素 html 屬性來(lái)計(jì)算大小等,
他們都能實(shí)現(xiàn)各自編程特色的響應(yīng)式布局,非要說(shuō)誰(shuí)是最優(yōu),恐怕還是得依需求而定。
接下來(lái)我們先大致羅列一下,這幾種布局方法的如何施展的。
眾所周知的 Bootstrap,它的柵欄布局即為媒體查詢(xún)的代表,完全通過(guò)屏寬來(lái)判斷元素是否換行和是否顯示。
<style><br>.col-xs-2 {width: 50%} @media (min-width: 768px) { .col-sm-3 {width: 33.333333%} } @media (min-width: 992px) { .col-md-4 {width: 25%} } @media (min-width: 1200px) { .col-lg-5 {width: 20%} } </style> <div class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></div>
非常方便操作和容易理解地將顯示設(shè)備按寬度分成了四個(gè)區(qū)間,各區(qū)間內(nèi)按柵欄占比給予寬度。
然而,隨著移動(dòng)互聯(lián)網(wǎng)的迅猛突進(jìn),以及 WebApp 的使用,也由于手機(jī)的分辨率和尺寸被廠商們不斷更新,
768px 以下的設(shè)計(jì)要求也相應(yīng)拔高,人們開(kāi)始對(duì)響應(yīng)式的要求也有了些改變。
比如 iPhone4 上的文字大小還適合 iPhone6 嗎,Retina 屏的 1px 問(wèn)題,devicePixelRate 和屏幕縮放問(wèn)題等等...
所以為了解決這些問(wèn)題產(chǎn)生了非常豐富的解決方案,我們一個(gè)一個(gè)來(lái)。
首先,隨著屏幕越大,字體大小也越來(lái)越大,好像是個(gè)不錯(cuò)的想法耶。
html { font-size: 10px;} @media (min-width: 376px) and (max-width: 414px) { html{font-size: 11px;} } @media (min-width: 415px) and (max-width: 639px) { html{font-size: 13px;} } @media (min-width: 640px) and (max-width: 719px) { html{font-size: 14px;} } @media (min-width: 720px) and (max-width: 749px) { html{font-size: 15px;} } @media (min-width: 750px) and (max-width: 799px) { html{font-size: 16px;} } @media (min-width: 800px) and (max-width: 992px) { html{font-size: 20px;} } body { margin: 0; font-size: 1.6rem; }
實(shí)踐情況告訴我們,在 iPhone6 plus 上這種字大的體驗(yàn)確實(shí)不賴(lài)。
不過(guò)好像并不是字越大就越好看,比如在 iPad 上,字大絕對(duì)不是一個(gè)好的視覺(jué)體驗(yàn)。
所以又有了另一種搞法,根元素的字體大小由寬度和 devicePixelRate 來(lái)計(jì)算求得,也比上面的方法更注重了 dpr 的考慮。
<style> body {font-size: .12rem} </style> <script> !function() { function e() { r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}" } var t = navigator.userAgent, n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window), i = document, a = i.documentElement, o = (n.devicePixelRatio, 375), d = 100, r = (i.head.querySelector('[name="viewport"]'), i.createElement("style")); r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1); a.className += t.match(/ucbrowser/i) ? " app-uc " : "" }(); </script>
這里并沒(méi)有直接在設(shè)置 font-size 的時(shí)候就乘以 0.12 的原因可能是,這樣會(huì)比較容易算寬度吧,比如 3.75rem 便是一個(gè)屏寬咯。
當(dāng)然不用百分比而用 rem 來(lái)定寬,也是有些好處的。
比如兩欄式百分比布局的間隙也只能百分比咯(calc 另當(dāng)別論)造成左右和上下間隙不相等,
元素縱橫比直接用數(shù)值就能完成,因?yàn)楝F(xiàn)在的 rem 就像百分比那樣非常自動(dòng)了,
后來(lái)發(fā)現(xiàn),它還有 PC 端縮放瀏覽器比例保持頁(yè)面不變的功效。
除此之外,還有淘寶的搞法,lib-flexible.js。
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
它和上面的方法在 rem 方面是類(lèi)似的,10rem 便是一個(gè)屏寬,但在文字方面不太一樣,
淘寶網(wǎng)觸屏版 并不想讓字體越來(lái)越大,而始終為 12px 或 24px,
而結(jié)果來(lái)看,字小圖大加留白好像反而有些精細(xì)的感覺(jué),也解決了上面方法 PC 端字超大的問(wèn)題。
另外,如果使用此類(lèi)方法,那么 @media 劃分屏寬節(jié)點(diǎn)就得靠 rem 了喲,比如淘寶用的 10rem。
最后,再講一個(gè)比較奇葩但又很有效的響應(yīng)式方法。
<meta name="viewport" content="width=750,user-scalable=no" /> <style> html, body { width: 750px; margin: 0 auto; overflow: hidden; } </style>
有沒(méi)有感覺(jué)到一股我不管我不聽(tīng)的倔強(qiáng)氣息,這種方法意味著,不管設(shè)備怎樣,我只當(dāng)設(shè)備是 750px 視圖大小的設(shè)備。
375px 就是半個(gè)屏幕,這對(duì)做應(yīng)用場(chǎng)景 H5 的小伙伴可謂是福音,做雪碧圖用 px 定位什么的才是最爽的,
但它也有著它的壞處,也就是設(shè)備的寬高比是不定的,比如 iPhone4 和 iPhone5 一樣寬但高度短一截,所以最好再加上一個(gè)上下居中的解決辦法。
這幾種方法都各有特色,有各自方便的角度,所以依照需求和喜好,多研究下吧,我也期望能有人來(lái) 和我討論,么么噠
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- jQuery Deferred和Promise創(chuàng)建響應(yīng)式應(yīng)用程序詳細(xì)介紹
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- 使用Chart.js圖表庫(kù)制作漂亮的響應(yīng)式表單
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
- jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
- CSS圖片響應(yīng)式 垂直水平居中
- 8款非常棒的響應(yīng)式j(luò)Query 幻燈片插件推薦
相關(guān)文章
layer.open的自適應(yīng)及居中及子頁(yè)面標(biāo)題的修改方法
今天小編就為大家分享一篇layer.open的自適應(yīng)及居中及子頁(yè)面標(biāo)題的修改方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS實(shí)現(xiàn)從頂部下拉顯示的帶動(dòng)畫(huà)QQ客服特效代碼
這篇文章主要介紹了JS實(shí)現(xiàn)從頂部下拉顯示的帶動(dòng)畫(huà)QQ客服特效代碼,可實(shí)現(xiàn)彈性緩沖效果的彈出QQ客服窗口的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10ionic由于使用了header和subheader導(dǎo)致被遮擋的問(wèn)題的兩種解決方法
這篇文章主要介紹了ionic由于使用了header和subheader導(dǎo)致被遮擋的問(wèn)題的兩種解決方法,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09獲取當(dāng)前點(diǎn)擊按鈕的id用this.id實(shí)現(xiàn)
這篇文章主要介紹了獲取當(dāng)前點(diǎn)擊按鈕的id的方法,,需要的朋友可以參考下2014-03-03js設(shè)置文本框中焦點(diǎn)位置在最后的示例代碼(簡(jiǎn)單實(shí)用)
本篇文章主要是對(duì)js設(shè)置文本框中焦點(diǎn)位置在最后的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03JavaScript格式化數(shù)字的函數(shù)代碼
當(dāng)要格式化的數(shù)字為null、空或非數(shù)字時(shí),返回的結(jié)果。默認(rèn)為02010-11-11TypeScript類(lèi)型推論與類(lèi)型斷言實(shí)例詳解
如果沒(méi)有明確的指定類(lèi)型,那么TypeScript會(huì)依照類(lèi)型推論(Type Inference)的規(guī)則推斷出一個(gè)類(lèi)型,下面這篇文章主要給大家介紹了關(guān)于TypeScript類(lèi)型推論與類(lèi)型斷言的相關(guān)資料,需要的朋友可以參考下2022-11-11基于JavaScript實(shí)現(xiàn)百葉窗動(dòng)畫(huà)效果不只單純flas可以實(shí)現(xiàn)
看到這種百葉窗效果的動(dòng)畫(huà),以為是用flash做的,下面通過(guò)本文給大家介紹基于JavaScript實(shí)現(xiàn)百葉窗動(dòng)畫(huà)效果,需要的朋友參考下吧2016-02-02this和執(zhí)行上下文實(shí)現(xiàn)代碼
Javascript中this關(guān)鍵字通常指向當(dāng)前函數(shù)的擁有者。在javascript中通常把這個(gè)擁有者叫做執(zhí)行上下文。2010-07-07