如何制作适应各种屏幕尺寸的H5响应式网站页面？

一、 先别慌——关于H5响应式的“真相”

说真的，做一个能在、、上都不炸的H5页面比找对象还难！但别怕，先喝口咖啡，给自己打个气：我能行！

很棒。 先把视口给整明白——这玩意儿就像是给网页穿上一件弹性内衣，尺寸随你挑。代码里直接塞进：

出岔子。 要是你手抖打错了一个字符，那页面可能瞬间变成“外星语”。所以每次改动后用手机摇一摇确认一下。

二、 疯狂的REM布局——像算命一样的神奇

REM其实是根字体大小，它会根据html根元素的font-size来算出所有相对单位。想象一下 你把根节点的font-size设成屏宽除以6.4，于是：

var html = document.documentElement;
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + 'px';

走捷径。 这么一搞，所有用rem写的尺寸都会跟屏幕宽度同步伸缩——简直就是网页界的占星术！不过记得加个防抖，否则用户滚动时会卡顿。

三、 媒体查询：别让CSS像老古董一样僵硬

如果你只靠REM，还不够。不同设备有不同的“脾气”， 比如iPhone X的大刘海、 是不是？ 华为Mate系列的曲面屏……这时候就得召唤媒体查询：

@media  {
    .container { padding: 1rem; }
}
@media  and  {
    .container { padding: 2rem; }
}
@media  {
    .container { padding: 3rem; }
}

精辟。 别忘了这段代码必须放在CSS文件再说说否则前面的样式会把它盖掉。