移动端适配方法

最近在制作移动端页面，关注移动端适配方面的解决办法。

首先移动端适配需要做的是使：布局视口的尺寸和设备像素的尺寸相等

常用的方法是想CSS像素缩小（设备像素比的倒数）的倍数

现在将方法总结一下：

A.第一种方法

1.将布局视口设为和设备像素尺寸一样的大小

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2.动态设置html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

3.将设计图中的尺寸换算成rem

元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值

B.第二种方法

1.拿到设计稿后，取设计稿的宽度为总宽度/100作为font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';

2.做页面时用设计稿的尺寸除以100加上rem即可

 

以上两种方法都不要将字体设置为rem

我们可以用css3的媒体查询来改变字体的大小

@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}

@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}
@media screen and (max-width: 321px) {
    header,footer {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    header,footer {
        font-size:17px
    }
}

@media screen and (min-width: 400px) {
    header,footer {
        font-size:19px
    }
}

 

以上内容均总结至《一篇真正教会你开发移动端页面的文章》；

原文地址：http://hcysun.me/2015/10/16/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0%28%E4%B8%80%29/

作者博客：

HcySunYang