使用rem进行自适应页面布局

设计师给到我们前端的设计稿一般是按照iphone6屏幕(iphone6 两倍屏
设备
分辨率(物理尺寸)
屏幕宽高
PPI
状态栏高度
导航栏高度
标签栏高度

使用rem进行自适应页面布局iPhone6

750×1334 px 375×667px 326PPI 40px 88px 98px
)实际大小给出的标注,我们如何在尽可能多的屏幕上 1:1 的还原设计稿呢?

如今使用比较多的方式就是rem,(rem是尺寸的单位,相对根节点的字体大小的一个单位)。

比如设计稿中一个标注宽 30px(iphone6),我们实际写样式时应该为15px(两倍屏会将我们的15px放大为实际的30px,换句话说:把30个像素填充到了15px的宽度里)。

这样我们对照这iphone6上的设计稿写出的样式在iphone6手机上的表现与设计稿是保持一致的,那么我们怎样让样式在其他手机屏幕上也能保持这个比例去适应呢?

我们只需要去改变在相应手机屏幕上的根结点的font-size即可,这样页面中的其他不布局仍然会保持与设计稿中的比例显示。

在实际中,为了方便换算单位,习惯把在iphone6中的根结点font-size大小设置为100px,

可参考我们服务号中设置根结点大小的方式,如下:

const winW = (document.documentElement.clientWidth || document.body.clientWidth) / 3.75;
document.documentElement.style.fontSize = `${winW}px`;
// 当页面大小发生改变,重新修正rem为新窗口尺寸的3.75分之一
window.onresize = function resize() {
let wid = document.documentElement.clientWidth || document.body.clientWidth;
if (wid > 1024) {
wid = 1024;
} else if (wid < 320) {
wid = 320;
}
wid /= 3.75;
document.documentElement.style.fontSize = `${wid}px`;
上一篇:redis 安装与使用


下一篇:关于新世界的大门(新博客地址:BBBob.cf)