移动端适配方案
移动端可以用px+flex
动态改变html的font-size 配合 rem
一、移动端可以用px+flex
使用方法是,将最外层容器设置display: flex;内层元素正常写就可以。需要注意的是如果flex不能完全达到要求适配,就使用媒体查询。
二、动态改变html的font-size 配合 rem
方法一:一般来说设计师给的移动端ui设计图为:750的宽度,是2倍图;750;通过换算,如果是750那么dpr为2
自定根元素<html>字体大小为14px。
例如:设计图按钮56px,换算方式:1rem = 14px。所以56px:56/ dpr/ 14 = 2rem。 在css里写2rem。
方法二:方案:rem计算
基准:320px的屏幕基准像素为12px
通过方法计算:
const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";
得到:通过媒体查询来设置根元素字体大小
@media screen and (min-width: 375px){
html {
font-size: 14.0625px;
}
}
@media screen and (min-width: 360px){
html {
font-size: 13.5px;
}
}
@media screen and (min-width: 320px){
html {
font-size: 12px;
}
}
html {
font-size: 16px;
}
方法三:
rem 基准值计算
设计图一般是750的设计图,是iphone6的2倍,那么使用这个尺寸来计算基准值。
基准值:750 / 10或者750 / 2 / 10(750设计图)基准值<html>:font-size:75px或37.5px。
例如:设计图中100px的按钮,100 / 75 或 100 / 2 / 37.5
document.addEventListener('DOMContentLoaded', function(e) {
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
}, false);
其他设备尺寸:
iphone3gs: 320px / 10 = 32px
iphone4/5: 320px / 10 = 32px
iphone6: 375px / 10 =37.5px