自适应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是计算出来的.因此字体大小变化会比较明显.

例如设计稿750px,字体大小20px,那么就是 "font-size : .2rem" ,这里有个问题是,设计稿是2倍的,在手机上是1倍的.因而rem会小一半,这时,手机上的字体就会很是小了.

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

 

一种解决方法是,字体使用2倍大小,也就是 "font-size: .4rem". 

这个方法会致使在超过设计稿宽度尺寸的屏幕上,字体变得很是大.这种状况通常是在平板或者PC上了,若是只是手机端使用,则不用考虑此种状况.

 

还有个办法是使用回em或者px,而后针对不一样的屏幕作媒体查询,

使用em,前提是设置body字体大小,例如 font-size:14px

这种办法对手机端很差,平板和PC合适.能够作媒体查询适配小屏的em基准

@media (max-width: 320px)

{
    font-size: 12px;
}

@media (min-width: 321px)

{    font-size: 14px;}