说说“自适应pc端网页制作”那些事

Question

如题所述

Answer 1

写在前面的话：本文介绍的是通过rem + js动态设置根元素的字体大小来实现网页自适应。

问题一： 很多小伙伴为了px和rem转化的方便，所以经常把根元素的字体大小设为10px,即1rem = 10px;px转化成rem只需要除以10即可。没错，这在移动端中是不会有任何毛病的，但在pc端上就会出现一些异常，浏览器往往并不会根据1rem = 10px去计算你页面上的大小，而是以1rem = 12px 或者是1rem = 16px去计算，这是因为在pc端的浏览器中默认的最小字体大小是12px  or  16px（IE、google为12px，火狐为16px）

解决方法： 把根元素html的font-size设为100px；然后在body里设置font-size：10%

问题二： 有很多网页是在一屏内显示的，做自适应页面的话就需要实现在不同屏幕大小的情况下都要居中显示，这样才看起来合理

解决方法： 可以在每一屏内设置一个“内容包含框”，该“内容包含框”需要在一屏中上下左右居中，然后屏上显示的内容弄就根据"内容包含块"进行定位，这样不管浏览器可视区域多大，内容都会居中显示

问题三： 当浏览器窗口变化时,内容的大小以及相对位置也要相应变化

解决方法： 这个依靠JS修改HTML的FONT-SIZE值实现.如下:

$(window).resize(function ()// 绑定到窗口的这个事件中

{

    var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值

    var wH = window.innerHeight;// 当前窗口的高度

    var wW = window.innerWidth;// 当前窗口的宽度

    var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值

    $('html').css('font-size', rem + "px");

});

计算原理注释： 窗口宽1920时,FONT-SIZE是100PX,那么winWidth时,相当于窗口变化为1920时的 (winWidth / 1920).根据比例公式,winWidth时的FONT-SIZE就是 (winWidth/1920)*100