首頁 > web前端 > css教學 > 主體

css如何實現響應式文字大小變化實例詳解

伊谢尔伦
發布: 2017-07-20 09:51:28
原創
3859 人瀏覽過

簡單來說,響應式是為了讓網頁在各種顯示設備上都有不錯的瀏覽體驗,

無論是@media 將元素換行,後台獲取userAgent 返回不同頁面,利用viewport 限定視圖,還是利用根元素html 屬性來計算大小等,

他們都能實現各自程式設計特色的響應式佈局,非要說誰是最優,恐怕還是得依需求而定。

接下來我們先大致羅列一下,這幾種佈局方法的如何施展的。

眾所周知的 Bootstrap,它的柵欄佈局即為媒體查詢的代表,完全透過屏寬來判斷元素是否換行和是否顯示。


<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>
 <p class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></p>
登入後複製

非常方便操作和容易理解地將顯示設備按寬度分成了四個區間,各區間內按柵欄佔比給予寬度。

然而,隨著行動網路的迅猛突進,以及WebApp 的使用,也由於手機的解析度和尺寸被廠商們不斷更新,

768px 以下的設計要求也相應拔高,人們開始對響應式的要求也有了一些改變。

例如iPhone4 上的文字大小還適合iPhone6 嗎,Retina 螢幕的1px 問題,devicePixelRate 和螢幕縮放問題等等...

所以為了解決這些問題產生了非常豐富的解決方案,我們一個一個來。

首先,隨著螢幕越大,字體大小也越來越大,好像是個不錯的想法耶。


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;
}
登入後複製

實作告訴我們,在 iPhone6 plus 上這種字大的體驗確實不賴。

不過好像不是字越大越好看,例如在 iPad 上,字大絕對不是一個好的視覺體驗。

所以又有了另一種搞法,根元素的字體大小由寬度和 devicePixelRate 來計算求得,也比上面的方法更注重了 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(&#39;[name="viewport"]&#39;), 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>
登入後複製

這裡並沒有直接在設定font-size 的時候就乘以0.12 的原因可能是,這樣會比較容易算寬度吧,比如3.75rem 便是一個屏寬咯。

當然不用百分比而用 rem 來定寬,也是有些好處的。

例如兩欄式百分比佈局的間隙也只能百分比咯(calc 另當別論)造成左右和上下間隙不相等,

元素縱橫比直接用數值就能完成,因為現在的rem 就像百分比那樣非常自動了,

後來發現,它還有PC 端縮放瀏覽器比例保持頁面不變的功效。

除此之外,還有淘寶的搞法,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(&#39;meta[name="viewport"]&#39;),h=e.querySelector(&#39;meta[name="flexible"]&#39;),i=0,j=0,k=b.flexible||(b.flexible={});
if(g){
console.warn("将根据已有的meta标签来设置缩放比例");
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("p");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 方面是類似的,10rem 便是一個屏寬,但在文字方面不太一樣,

淘寶網觸版不想讓字體越來越大,而始終為12px 或24px,

而結果來看,字小圖大加留白好像反而有些精細的感覺,也解決了上面方法PC 端字超大的問題。

另外,如果使用這類方法,那麼 @media 分割屏寬節點就得靠 rem 了喲,例如淘寶用的 10rem。

最後,再講一個比較奇葩但又很有效的響應式方法。


<meta name="viewport" content="width=750,user-scalable=no" />
 
<style>
html, body {
  width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
</style>
登入後複製

有沒有感覺到一股我不管我不聽的倔強氣息,這種方法意味著,不管設備怎樣,我只當設備是750px 視圖大小的裝置.

375px 就是半個螢幕,這對做應用場景H5 的小夥伴可謂是福音,做雪碧圖用px 定位什麼的才是最爽的,

但它也有著它的壞處,也就是裝置的寬高比是不定的,像是iPhone4 和iPhone5 一樣寬但高度短一截,所以最好再加上一個上下居中的解決方案。

以上是css如何實現響應式文字大小變化實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板