自适应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 rem = wW * 100 / designSize;
});
计算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 rem = wW * 100 / designSize;
})
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;
}
