- 页面的布局
- 元素的适配
页面布局可以使用css flex属性或者百分比;下面重点解决的是元素的适配问题:
// 假设设计图的尺寸为750px 某元素尺寸为98px
var _VW = 750;
var originSize = 98;
// 那么我们只需要知道当前渲染屏幕的尺寸,即可对元素进行适配
var VW = ?;
var adaptationSize = (? / 750) * 98;
// 那么现在的问题就是怎么样得到viewport的尺寸?
// 第一种方法:yes vw
VW = 100vw;
// 第二种方法:通过css media query使得VW = 10rem
@media (min-width: 320px) {
html {
font-size: 32px }}
@media (min-width: 360px) {
html {
font-size: 36px }}
...
VW = 10rem
弹性布局 + 屏幕相对尺寸适配是一种先进的解决方式,参考演示[index.vw.html];但是有一个问题:兼容性
效果很好,但是对页面进行缩放让人感觉怪异;实现方式
缺点:需罗列手机尺寸 本例就是对这种方式的演示[index.html]
知识点:根节点的字体大小就是1rem
/* 1rem == 32px */
html { font-size: 32px; }