自适应PC端网页制作使用REM

Posted 2022-06-16 luziluck

https://www.cnblogs.com/mirrortom/p/6808858.html

做一个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;