移动端web app要使用rem实现自适应布局:font-size的响应式

站长手记作者： 2024-08-28 15:55:01

rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。

关于webAPP的开发最主要解决的就是“自适应自适应布局”。常规的适配有很多做法，例如：流式布局、限死宽度等，但是这些方案都不是最佳的解决方法，而最满足设计需要的是：

元素可以根据屏幕大小而等比列变化，达到最佳的视觉效果。所以我们采用rem来实现自适应，由于rem是通过html根元素进行适配的，设置html的font-size字体大小就可以控制rem的大小,下面讲解如何来实现：

head设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

1.通过css3媒体查询设置font-size

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

2.通过js设置font-size

<script>
!function (window) { //来源：http://www.ydui.org/flexible
    var dw = 750,
    	d = window.document,
        docEl = d.documentElement,
        re = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var recalc = (function refreshRem () {
        var clientWidth = docEl.getBoundingClientRect().width;
        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / dw), 11.2), 8.55) * 5 + 'px';
        /*说明： 8.55：小于320px不再缩小，11.2：大于420px不再放大, 17.067 ：大于640px不再放大*/
        return refreshRem;
    })();
    docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);/* 添加倍屏标识，安卓为1 */
    if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
        d.documentElement.classList.add('ios'); /* 添加IOS标识 */
        if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) /* IOS8以上给html添加hairline样式，以便特殊处理 */
            d.documentElement.classList.add('hairline');
    }
    if (!d.addEventListener) return;
    window.addEventListener(re, recalc, false);
    d.addEventListener('DOMContentLoaded', recalc, false);
}(window);
</script>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_70203.html

相关资讯：移动端 web app 响应式