移动端html适配方案,原生js实现 兼容常规pc、大屏、移动端 适配方案

1、设计稿

1)pc设计稿为19201080的可视化大屏，16：9比例设计

2)大屏设计稿35841152的可视化大屏，28：9比例设计

3)移动端设计稿 宽750的可视化大屏

2、适配不同屏幕

1)pc要兼容不同分辨率下的屏幕，注意这里说的是往下兼容 兼容1k以下的 不能出现滚动条 使用scale

2)大屏比例为28：9，在项目开发中，可以按照1680：540 达到28:9的效果 不能出现滚动条 使用rem

3)移动端兼容，以750为标准实现适配 使用rem

3、实现思路：

1)pc可以根据vw、vh去实现

@function vw($px) {

@return ($px/1920) * 100vw;

}

body {

width:vw(1920)

}

问题：在echats中，当在小屏幕的时候，图表的字体会比ui稿上的大，这时候你又要把字体在js里面再进行一步转换

// 字体转换

function toFontSize(px){

let vw = px / 1920;

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

return htmlWidth * vw

}

2)rem

rem (font size of the root element), 是 css3 的引入的一个大小单位。即相对于根元素的 font-size 值的大小。所谓根元素在网页里一般就是 html。

问题：在echats中，当在小屏幕的时候，图表的字体会比ui稿上的大，这时候你又要把字体在js里面再进行一步转换

3)缩放scale

浏览器body设置为设计稿宽高即1920*1080， 动态根据实际宽高对body的width，height进行缩放，从而实现内容缩放

采用scale方案，字体不受浏览器最小字体限制，可以自由绽放到该分辨率下对应比例

4)根据不同屏幕切换显示 不同页面

pc和大屏的页面布局结构一致，所以更换className去实现切换

移动端与pc、大屏的页面布局都不一致，所以根据js判断当前是否为移动设备进行显示切换

4、简单实现代码

var docWidth,do