rem 布局方案

1.根据屏幕大小比例灵活改变web根元素的fontSize值,再加上使用rem单位。实现了web页面在设备显示上的自适应。


   // 该段脚本实现pc端web页面自适应
   $(document).ready(function(){
       //引入jquery后,待文档全部加载完全后,运行的脚本。
    var win_width = $(window).width(); //浏览器时下窗口可视区域宽度
    var rem = (win_width*23/2000);  //该比例要和设计稿比例同一
    $('html').css('fontSize',rem+'px'); //网页根元素的fontSize是实现自适应的根本元素
    console.log(rem);
    $(window).resize(function() { 
        //当浏览器窗口大小发生变化时,重复执行上面的逻辑。代码如下
        var win_width = $(window).width(); //浏览器时下窗口可视区域宽度
        var rem = (win_width*23) /2000;
        $('html').css('fontSize',rem+'px');
        console.log(rem);
    });

  1. 使用rem单元,按照设计稿比例,给网页各模块元素定宽高。包括字体大小,各种间距。
  2. rem布局方案,适用于pc端和移动端适配功能。
posted @ 2019-10-14 16:24  QiuYuLing  阅读(275)  评论(0编辑  收藏  举报