第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

36kr.com 這個網(wǎng)站在改變屏幕寬度時字體大小跟著改變，是怎樣做到的呢？

36kr.com 這個網(wǎng)站在改變屏幕寬度時字體大小跟著改變，是怎樣做到的呢？

繁花不似錦 2018-10-20 14:11:31
網(wǎng)址：http://36kr.com屏幕寬度為320px時，html的字體大小為15px<html lang="en" class="" style="font-size: 15.6098px;">屏幕寬度為768px時，html的字體大小是37px<html lang="en" class="" style="font-size: 37.4634px;">以前見過在css中添加media query給body的font-size賦值，第一次見到用js控制字體的；03021009更新：非常感謝各位答主的回答；不過有些答主好像方向不太對；我知道用了rem，也知道css media query，也知道用了js控制根元素html的font-size；我現(xiàn)在困惑的點是：他是用什么樣的標準用js計算出來的；
查看完整描述

1 回答

?
30秒到達戰(zhàn)場

TA貢獻1828條經(jīng)驗 獲得超6個贊

就是類似于這樣就可以，

html {     font-size: 62.5%; /* 10÷16=62.5% */ } @media only screen and (min-width: 481px){     html {         font-size: 94%!important; /* 15.04÷16=94% */     } } @media only screen and (min-width: 561px){     html {         font-size: 109%!important; /* 17.44÷16=109% */     } } @media only screen and (min-width: 641px){     html {         font-size: 125%!important; /* 20÷16=125% */     } }

或者用rem布局也可以

說道標準，主要涉及到兩點

  1. 設計稿的尺寸

  2. rem到px的轉(zhuǎn)換規(guī)則

舉個栗子，比如設計稿的尺寸的標準是720，在720的標準下，轉(zhuǎn)換規(guī)則為1rem為100px，這兩點標準定下來，就夠了。比如在設計稿中的某段文字的字體為20px，根據(jù)轉(zhuǎn)換規(guī)則，在css中就是0.2rem，那么在屏幕寬度為360px的時候，我們希望字體為10px，也就是同樣的0.2rem為10px，換算一下就是1rem為50px，這個50px就是我們需要動態(tài)算的,所以下面計算用到的100和720就是這個標準，當clientWidth為360的時候，計算出來的fontSize 為 50，也就是1rem為50px

(function (doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';

        };


    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);


查看完整回答
反對 回復 2018-11-23
  • 1 回答
  • 0 關注
  • 416 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號