移动端屏幕适配的三种方法

移动端的三种适配方法

提示：移动端的三种适配方法

---

---

一、移动端为什么要适配？？

一: 为了让页面在不同屏幕尺寸下兼容运行，字体/元素的大小等能够动态
变化

二、适配的原理

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;}}