响应字体大小(移动端)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应字体大小(移动端)相关的知识,希望对你有一定的参考价值。

大前提:
1、initial-scale 为 1;
2、在项目css中(注意不要被公共的base、common之类的影响了,资源加载顺序也是蛮重要的),先把html的fontSize设置为 100px(或者加上媒体查询代码), 避免加载未完成时候样式错乱;

html{fontSize:100px}

需要全屏的话加上CSS

html{height:100%;position:relative;} body{margin:0 auto;height:100%;}

 

方法一

(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 / 320) + px;
        };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(DOMContentLoaded, recalc, false);
})(document, window);

方法二

new function (){
            var _self =  this ;
            _self.width = 640; // 设置默认最大宽度
            _self.fontSize = 100; // 默认字体大小
            _self.widthProportion =  function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
            _self.changePage =  function (){
            document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
            }
            _self.changePage();
            window.addEventListener(resize, function (){_self.changePage();}, false );
        };

方法三

!(function(win, doc){
    function setFontSize() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        var winWidth =  window.innerWidth;
 
        doc.documentElement.style.fontSize = (winWidth / 640) * 100 + px ;
    }
 
    var evt = onorientationchange in win ? orientationchange : resize;
    
    var timer = null;
 
    win.addEventListener(evt, function () {
        clearTimeout(timer);
 
        timer = setTimeout(setFontSize, 300);
    }, false);
    
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
 
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 初始化
    setFontSize();
 
}(window, document))

 

 方法四(媒体查询)

换算rem工具(https://offroadcode.com/prototypes/rem-calculator/

@charset "UTF-8";
/* 320px布局 */
html {
  font-size: 100px; }

body {
  font-size: 0.14rem; }

/* iphone 6 */
@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  html {
    font-size: 117.1875px; } }

/* iphone6 plus */
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  html {
    font-size: 129.375px; } }

p {
  border: 1px solid #eee;
  padding: 0.1rem; }

.f12 {
  font-size: 0.12rem; }

.f14 {
  font-size: 0.14rem; }

.f16 {
  font-size: 0.16rem; }

.f24 {
  font-size: 0.24rem; }

.f30 {
  font-size: 0.30rem; }

.f36 {
  font-size: 0.36rem; }

 

以上是关于响应字体大小(移动端)的主要内容,如果未能解决你的问题,请参考以下文章

h5移动端字体大小怎么随着页面大小变化而变化

移动端通过js来用rem控制字体大小的用法

移动设备的 HTML 响应式字体大小

Js动态设置rem来实现移动端字体的自适应代码

响应 - 字体大小不加载

css 在移动设备上面使用响应式字体大小