【学习】自适应PC端网页制作使用REM

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080

使用了几种办法

1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常

2.使用rem的地方

width,height,margin,padding,left top都采用了REM,

HTML的FONT-SIZE设置的为100PX.是为了计算方便.此时BODY的FONT-SIZE要设置为正常值,例如14PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大.

3.当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:

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

  let designSize = 1920; // 设计图尺寸

  let html = document.documentElement;

  let wW = html.clientWidth;// 窗口宽度

  let rem = wW * 100 / designSize; 

  document.documentElement.style.fontSize = rem + 'px';

});

计算font-size的逻辑是:

     当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX时,1REM=100PX,如果要设定一个160PX(1920设计图时)的margin-top,那么REM设置值是1.6rem.

     当窗口调整到非设计图的宽度如winWidth时,HTML的FONT-SIZE值是:(100/1920)*winWidth.也就是说,1920下FONT-SIZE是100px.那么winWidth下,按比例计算.

     或者可以这样:窗口宽1920时,FONT-SIZE是100PX,那么winWidth时,相当于窗口变化为1920时的 (winWidth / 1920).根据比例公式,winWidth时的FONT-SIZE就是

             (winWidth/1920)*100

             winWidth / 1920 = FONT-SIZE(PX) / 100 

            100 / 1920 = FONT-SIZE(PX) / winWidth 这个公式容易理解

如果调整窗口大小,会发现HTML的FONT-SIZE值在变化,同时,使用REM设置的DOM也在变化.因为REM正是参考HTML的FONT-SIZE值来计算的

4.如果是在手机上,平板电脑上,更要使用REM

由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可

$(function(){

  let designSize = 750; // 设计图尺寸

  let html = document.documentElement;

  let wW = html.clientWidth;// 窗口宽度

  let rem = wW * 100 / designSize; 

  document.documentElement.style.fontSize = rem + 'px';

})

5.使用REM能够较好的自适应移动端

手机平板移动设备的宽度不超过1080,如果设备已经超过了这个宽度,则不应再计算html的font-size值了.因为已经是PC屏幕了.

if ( window.innerWidth>1080) 

return;

6.关于字体大小

如果字体大小使用rem,由于rem是计算出来的.所以字体大小变化会比较明显.

假如有同一段文字,设了0.2rem(大约是20px),从pc大屏上移到手机小屏上后,会变得很小. 例如由PC到手机,html的字体由100px  变成了 50px,此时,手机上的这段字会小一半...

人总是希望pc屏幕上看到的文字,在手机上仍然能看得清楚,可以接受一点缩小,但不能是巨变.

目前没找到合适的解决办法,暂时如下:

字体大小font-size不应使用rem,可以使用em.对body元素设置一个基准字体大小.

对于太小的手机屏幕做个媒体查询,现在手机360px以上的显示14px的字体是清晰的,更大一点的也可以设为16px基准

body{

      font-size:14px;

}

// 或者更大一些

@media (min-width: 992px) {
     font-size:16px;
}

// 对于小屏手机

@media (max-width: 320px) {
     font-size:12px;
}