移動端適配方法

時間 2019-11-18

標籤移動適配方法欄目無線简体版

原文原文鏈接

最近在製做移動端頁面，關注移動端適配方面的解決辦法。css

首先移動端適配須要作的是使：佈局視口的尺寸和設備像素的尺寸相等html

經常使用的方法是想CSS像素縮小（設備像素比的倒數）的倍數css3

如今將方法總結一下：佈局

A.第一種方法字體

1.將佈局視口設爲和設備像素尺寸同樣的大小spa

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-sizescala

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

3.將設計圖中的尺寸換算成rem設計

元素的rem尺寸 = 元素的psd稿測量的像素尺寸 / 動態設置的html標籤的font-size值code

B.第二種方法htm

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/

做者博客：