移动端响应式布局

移动端响应式布局

1px 的坑

1px 的坑:CSS 中的 1px 并不是固定的大小,它是一个跟设备大小有关系的单位。PC 端的 5px 单位看到的视觉效果并不等同于移动端看到的 5px 的效果。

1 CSS 像素与屏幕物理像素的换算公式:

1 CSS 像素 = 物理像素 / 分辨率

rem

rem 是一种相对于根字体大小的相对单位。根字体就是 <html> 元素的字体,改变了 <html> 字体的大小,那么整个页面上基于 rem 的大小都会改变。一般初始值是 16px

这种方案需要监听屏幕窗口大小的变化,然后动态地改变 <html>font-size,这个 font-size 一变化,整个页面的其他元素的大小也会跟着变化,从而达到适配的效果。

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

win.addEventListener('resize', refreshRem);

有了这个函数,再使用 CSS 预编译插件 px2rem 将 CSS 中定义的 px 转为 rem 单位即可。

vh + vw

vw 是相对于视窗宽度的单位,vh 是相对于视窗高度的单位,有了这两个单位,就不需要我们动态监听了。

使用插件 postcss-px-to-viewport 将 px 转为 viewport 单位。

媒体查询

缺点:不同手机的宽度不同,缩放比无法完全确定。