移动端的三种适配方法
提示:移动端的三种适配方法
文章目录
一、移动端为什么要适配??
一: 为了让页面在不同屏幕尺寸下兼容运行,字体/元素的大小等能够动态
变化
二、适配的原理
1.适配的原理
原理如下 :动态修改html的fontsize的大小,页面元素在设置尺寸时候,以rem为单位,在不同尺寸下就可以实现页面元素宽度等具有动态变化的效果
2.适配方案
方案如下一 :利用网易的适配方案使用vw作为单位,不用写js,只需要
根据设计稿宽度算出来html字体的大小,并且以vw作为单位
vw:视图窗口的宽度,1vw = 视图窗口宽度的1%,如果视图窗口
1800px 1vw=18px
vh:视图窗口的高度,1vh = 视图窗口高度的1%
/*
设计稿是750的 手机的尺寸375px 441px 480px等100vw
750 就是相当于100vw
750px=100vw
1px = 100/750 = 0.1333vw
100px = 13.33vw
标注div宽度为100px 转化成1rem
*/
方案如下二 : 通过js动态的获取屏幕的宽度,然后自计算底层字体的大小,并修改字体.原理与第一种方案相同 (代码如下)
首先:window.innerWidth // 当前窗口大小等同于100vw,
其次:计算出1px相当于多大 window.innerWidth / 750
最后:将计算出来的字体大小给根字体
function FontSize() {
var designWidth = 750 //设计稿的尺寸
document.documentElement.style.fontSize = (window.innerWidth / 750) * 100 + 'px'
}
setFontSize()
window.onresize = setFontSize
适配方案三:通过CSS的用法(媒体查询),
@meaia 设备 and (min-width:屏幕宽度){
html{
font-size: 字体大小
}
}
例如:(下面css媒体查询代码)
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}