要点1 meta viewport

让浏览器不要缩放,在html加入以下代码

1
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

要点2 媒体查询

使用css media query，为不同宽度的设备定制不同的css样式

要点3 动态 rem方案

rem是一个单位，代表根元素的 font-size 大小。
rem === html的fontsize。

动态rem方案顾名思义要用到rem。

为什么用动态rem方案不用百分比布局？
因为百分比布局没有办法让高度和宽度相配合，宽度为百分比的话，高度也写百分比是不起作用的。

动态rem方案的核心思想是等比例缩放，解决高度和宽度配合的问题

通过javascript让 （1rem） = （html的fontsize） = （页面的宽度 width）

下面是简单版本的js代码

1
2
var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth  + 'px;}</style>')

上面的代码使 1rem === 页面的宽度 width
这样就可以在像下面这样写css，让div宽高配合。

1
2
3
4
5
div {
    height:0.5rem;
    width:0.5rem
    margin:0.25rem auto;
}

不同的设备运行代码得到的rem是不同的
因为现在的rem和设备屏幕大小有关，div在所有设备都可以保持1比1的比例