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

最新推荐文章于 2023-11-17 10:25:30 发布
最新推荐文章于 2023-11-17 10:25:30 发布
阅读量4k 收藏 14
点赞数 4
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35355153/article/details/111467109
版权
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去实现

<style scoped lang="scss">
@function vw($px) {
    @return ($px/1920) * 100vw;
}
body {
	width:vw(1920)
}
</<style>

问题：在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、简单实现代码
<!DOCTYPE html>
<html>
    <head><meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no"></head>
    <body>
        <!-- 大屏 + pc 页面 -->
        <div class="pc" id="main">
            <div class="column">
                <div class="bk"></div>
                <div class="bk"></div>
                <div class="bk"></div>
            </div>
            <div class="column">
                <div class="big-bk"></div>
                <div class="big-bk"></div>
            </div>
            <div class="column">
                <div class="bk"></div>
                <div class="bk"></div>
                <div class="bk"></div>
            </div>
        </div>
        <!-- 移动端页面 -->
        <div class="mobile">
            <div class="column">
                <div class="bk"></div>
                <div class="bk"></div>
                <div class="bk"></div>
                <div class="bk"></div>
            </div>
        </div>
    </body>

    <script>
        var bodyStyle = document.createElement('style')  
        var docWidth,docHeight;        
        var designWidth,designHeight;

        // 屏幕缩放实现
        function refreshScale(){
            bodyStyle.innerHTML=`body{width:${designWidth}px; height:${designHeight}px!important;}`
            document.documentElement.firstElementChild.appendChild(bodyStyle)
            document.getElementById('main').style='display:flex'
            document.getElementsByClassName('mobile')[0].style='display:none'
            
            var widthRatio = docWidth / designWidth,
                heightRatio = docHeight / designHeight;
            document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;`;
            // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
            setTimeout(function(){
                var lateWidth= document.documentElement.clientWidth,
                    lateHeight = document.documentElement.clientHeight;
                if( lateWidth === docWidth ) return;

                widthRatio = lateWidth / designWidth
                heightRatio = lateHeight / designHeight
                document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
            },0)
        }

        // 清除scale
        function clearScale(){
            // 清除pc样式
            bodyStyle.innerHTML=``
            document.documentElement.firstElementChild.appendChild(bodyStyle)
            document.body.style="transform:none;transform-origin:none"
        }

        // 初始化
        function init(){    
            // 获取当前屏幕可视区域大小
            docWidth = document.documentElement.clientWidth; 
            docHeight = document.documentElement.clientHeight;        
            // 判断是否是移动设备
            if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)){              
                mobilePage();
            }else{ 
                let mainClass =  document.getElementById('main').classList;    
                if(docWidth == 1680 || docWidth == 3584){ // 模拟大屏
                    designWidth = docWidth;
                    designHeight = docWidth / 28 *9;
                    mainClass.add('large');
                    mainClass.remove('pc');                
                    largePage();
                }else{  // pc
                    designWidth = 1920;
                    designHeight = 1080;
                    mainClass.add('pc');
                    mainClass.remove('large');                   
                    refreshScale()
                }            
            }
        }

        // 大屏设置 rem 函数
        function setRem (designSize) {          
            // 基准大小
            baseSize = 100;
            let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
            let vW = window.innerWidth; // 当前窗口的宽度
            
            let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
            document.documentElement.style.fontSize =  rem + "px";
        }

        // 大屏页面
        function largePage(){
            clearScale();
            document.getElementById('main').style='display:flex'
            document.getElementsByClassName('mobile')[0].style='display:none'
            // 大屏 设置 rem 函数
            let designSize = 1680;
            setRem(designSize);
        }

        // 移动端页面
        function mobilePage(){
            clearScale()
            // 是移动设备 展示移动设备页
            document.getElementById('main').style='display:none'
            document.getElementsByClassName('mobile')[0].style='display:flex'
            // mobile 设置 rem 函数
            let designSize = 750;
            setRem(designSize);
        }
        
        // 初始化
        init();

        // 监听前进/后退以及load事件触发
        window.addEventListener("pageshow", function (e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                init()
            }
        }, false);

        // 监听屏幕缩放
        window.addEventListener("resize",function(){
            init()
        }, false);
    </script>
</html>

<style>
    html {
        width: 100%;
        height: 100%;
    }
    body{      
        margin:0px;
        transform: translate3d(0,0,0)  
    }
    /* pc */
    .pc {
        width: 1860px;
        height: 1020px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding:30px;
    }
    .pc .column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .pc .bk {
        width: 450px;
        height: 350px;
        border: #000 solid 1px;
        margin-top: 30px;
    }

    .bk:first-child{
        margin-top: 0px;
    }
    .pc .big-bk {
        width: 850px;
        height: 550px;
        border: #000 solid 1px;
        margin: 30px 30px 0px 30px;
    }

    .big-bk:first-child {
        margin-top: 0px;
    }

    /* 移动端 */
    .mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mobile .bk {
        width: 6.9rem;
        height: 2rem;
        border: #000 solid 0.01rem;
        margin-top: 0.3rem;
    }

    /* 大屏 */
    .large {
        width: 16.2rem;
        height: 4.6rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding:0.3rem;
    }

    .large .column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .large .bk {
        width: 4.5rem;
        height: 1.5rem;
        border: #000 solid 1px;
        margin-top: 0.3rem;
    }
    .large .big-bk {
        width: 6.5rem;
        height: 2.5rem;
        border: #000 solid 1px;
        margin: 0.3rem 0.3rem 0rem 0.3rem;
    }
</style>

pc兼容 参考：https://blog.csdn.net/sophie_u/article/details/109582687

rm_ing
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安装nuxt_nuxt.js 兼容性配置
weixin_31220401的博客
01-13 846
一、低于IE101.创建中间件export default function(context) { const userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent let re = new RegExp('MSIE ([0-9]{1,}[.0-9]{0,})') ...
移动端+pc端自适应适配解决方案
06-29
适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js项目，就在相应引入该方法即可
js实现适配不同的屏幕大小
10-20
本文主要介绍了通过js适配不同的屏幕大小的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
PC端屏幕分辨率自适应
weixin_58414196的博客
04-11 191
PC端屏幕分辨率自适应。
移动端日期插件，原生js实现
03-22
可在小程序、h5页面中使用 详细介绍请看https://blog.csdn.net/a805492851b/article/details/115072387?spm=1001.2014.3001.5501
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
10-16
主要介绍了原生js实现可兼容PC和移动端的拖动滑块功能,结合实例形式详细分析了javascript事件响应及页面元素属性动态操作实现滑块拖动功能的相关操作技巧,需要的朋友可以参考下
Vuecli3项目兼容ie方案
秋霜梦红尘的博客
05-12 1591
Vuecli3项目兼容ie方案 1.安装以下npm包： npm install --save babel-polyfill npm install es6-promise --save 2，在main.js中引用： import 'babel-polyfill' import Es6Promise from 'es6-promise' Es6Promise.polyfill() 3，在vue.config.js里插入代码，没有就新建（和package.json同级） module.exports = {
Vue项目多浏览器兼容(主要是IE、360)
weixin_44086918的博客
09-22 6171
然而第二种情况就是你要使用某个这个插件的时候，同时你又在某个commonJS写的文件里使用这个插件时，babel会默认你这个文件是ES6的文件，然后就使用import导入了这个插件，从而产生了和第一种情况一样的混用错误。解决方法是在babel.config.js里配置unambiguous设置，让babel和webpack一样严格区分commonJS文件和ES6文件。找到后在vue.config.js中加入：里面的都是一个个插件名，注意写的是插件名。以上基本就可以了，如何还不行就是第三方插件的问题了。
当vue3不再支持IE
萝卜666的博客
07-09 3783
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。 Object.assign()
Vue：PC端全局响应式布局
qq_41241767的博客
06-24 2561
PC端全局响应式布局 根据分辨率720到1080或者根据窗口尺寸 两个方法room和transform：scale(x,y) 1、css3的room 对px有效，对rem无效 由于resize事件可以以较高的速率触发, 因此事件处理程序不应该执行计算开销很大的操作 MDN推荐三种resize方法 window.onload = function(){ document.body.style....
nuxt3 vue 让PC网站在手机上按比例缩小适应屏幕
weixin_55042716的博客
04-10 863
【代码】nuxt3 vue 让PC网站在刚进入网页的时候，在手机上自动按比例缩小适应屏幕。
原生js实现h5游戏，本项目已提供分辨率适配解决方案，pc和移动端需要调部分参数，技术栈vue。
12-16
原生js实现h5游戏，本项目已提供分辨率适配解决方案，pc和移动端需要调部分参数，技术栈vue。exchangeweb.rar
Nuxtjs在IE11中报polyfill-eventsource added missing EventSource to window错误 解决方案
weixin_43311774的博客
12-26 4817
middleware中添加lru-cache导致 middleware中新建page-cache.js中间件，不知道是插件本身问题还是下面代码问题 解决问题：nuxt.config.js中移除serverMiddleware: [{ path: ‘/’, handler: ‘~/middleware/page-cache.js’ }],配置， 然后将下面代码全部注释掉，或者直接删掉page-cac...
前端scale（缩放）
wozouludaifeng的博客
06-14 1623
上面这种根据宽度比例进行缩放的，针对1920 * 1080,3840 * 2160(4k)是没有问题的，但是在超宽屏的情况下还是存在只显示一半的问题。动态计算网页宽高比，决定是按照宽度的比例还是高度的比例进行缩放。这种方案的原理就是根据宽高比例进行缩放。（宽度比率=网页当前宽度/设计稿宽度）很多的大屏适配都是使用的这种方案。
Vue项目兼容IE11
zxl1990_ok的博客
01-22 3999
使用的是vue-typescript-admin-template项目（vue-cli3脚手架搭建）进行改造的，但在IE11下面出现各种语法错误，下面将解决方法记录下来，供大家参考。 下面是错误截图： 语法错误： Promise 错误 polyfill 默认的Vue CLI项目会使用@vue/babel-preset-app，它通过@bable/preset-env和browserslist配置来决定项目需要的polyfill。 默认情况下，它会把useBuiltIns: 'usage'
【Nuxt】Nuxt3 响应式方案：rem、vw
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-17 719
rem 单位是 CSS3 新增的一个相对长度单位，它的出现是为了解决 em 的缺点，em 可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem 则是相对于根元素的字体大小，因此，当根元素字体大小改变时，rem 单位的大小不会改变。然而，它的侧重点与后者略有不同，主要用来将 CSS 中的 px 单位转换为视口单位 (vw, vh, vmin, vmax)，从而实现基于视口大小的响应式布局。，会导致部分组件依赖继承于根元素上的字体大小的样式发生变化，需要你再单独设置为 16px！
The Last Naruto,兼容IE11的vue脚手架
Senar的博客
07-19 547
the-last-naruto是一个基于[email protected]和Vite@3的一个项目模板(支持IE11浏览器)，灵感来源自antfu大佬的vitesse-lite。旨在给项目上还需要支持IE11浏览器的一些同学提供近似Vue3生态的开发体验。
Vue/Nuxt框架开发的PC端网站兼容平板设备的
qq_45272329的博客
09-16 2313
大家做项目的时候有没有遇到过一些不符合常理的开发需求，例如：开发的时候PC端和H5是两套站点，一般H5站点会适配平板设备，但是如果需要改成PC端适配平板呢；前期开发PC端没有考虑到PC端会有需要兼容平板的一天，完犊子了，这可怎么办？PC端的站点的长宽单位都是px，写的固定长度；而且会有固定的版型（就是页面一般会有一个最小宽度，比如1200px，1280px，1380。
vue和h5如何设置网页端和窗口大小同步缩放
lfl18326162160的博客
09-06 641
在HTML文件中加入以下代码。
原生js做移动端适配
09-28
原生js可以使用适配方案来做移动端适配。一种常用的方法是使用媒体查询和rem单位来实现自适应布局。具体步骤如下： 1. 在入口文件的头部，通过script标签引入适配js文件。 2. 在适配js文件中，监听窗口的尺寸变化事件，根据当前窗口宽度来计算出html元素的字体大小，从而实现页面元素的自适应。 3. 根据设计稿的尺寸，将像素值转换为rem单位。可以通过下载相应的插件并进行设置来实现像素值自动转化为rem单位。 4. 在样式中使用rem单位来设置页面元素的尺寸。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值