h5手机端页面自适应屏幕大小 rem

时间：2025-01-19 07:08:48
1.在首页添加一段js，页面字体单位使用rem.
<script>
    (function (doc, win) {
        var docEl = ,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = ;
                    if (!clientWidth) return;
                     = 20 * (clientWidth / 320) + 'px';

                };

        if (!) return;
        (resizeEvt, recalc, false);
        ('DOMContentLoaded', recalc, false);
    })(document, window);

</script>
2.媒体查询，媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路，关于媒体查询的详细用法请参阅css手册。
 

3.使用css3的属性：

 

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

<script>

    (function (doc, win) {
        var docEl = ,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = ;
                    if (!clientWidth) return;
                    if(clientWidth>=640){
                         = '100px';
                    }else{
                         = 100 * (clientWidth / 640) + 'px';
                    }
                };

        if (!) return;
        (resizeEvt, recalc, false);
        ('DOMContentLoaded', recalc, false);
    })(document, window);
    <%--如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)--%>
</script>
4、使用百分比

百分比指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是100%；

所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

注意：没有找到一种完全适应各种屏幕的方法，只能根据页面特点选择不同的方法，多种方法灵活运用，才是王道。

 

相关文章