js屏幕适配

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量248 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangxiaowan313/article/details/125806206
版权

JavaScript HTML 字体大小 响应式设计 窗口尺寸
关键词由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <title>js算html的font-size</title>

    <style>

    </style>

</head>

<body>

请放大缩小可视区

<div id="log"></div>

<script>

    ;(() => {

        const domLog = document.getElementById('log');

        const defaultFontSize = 24;

        const defaultWidth = 750;

        let str = '';

        let w = 0;

        let h = 0;

        let resW = '';

        /*

        750->24

        375->12 24除以750*当前宽

        defaultFontSize/maxWidth*w

        */

        window.onload = window.onresize = () => {

            w = document.documentElement.clientWidth;

            h = document.documentElement.clientHeight;

            resW = defaultFontSize / defaultWidth * w;

            document.documentElement.style.fontSize = resW+'px';

            str += w + '*' + h + '->' + resW + '<br />';

            domLog.innerHTML = str;

        };

    })();

</script>

</body>

</html>

yangxiaowan313
关注
cocos-js,屏幕适配
WADE
06-12 1523
一、基础概念五种适配模式： EXACT_FIT：会靠拉伸来填满屏幕，背景图会变形来充满屏幕，因为1024:768=1.3， 480:320=1.5，宽高比不同，图片也就无法等比缩放来填满屏幕，只能变形了。 NO_BORDER：看不到黑边，实际就是宽高等比缩放，但缩放比例取宽比和高比中大的那一个 SHOW_ALL：全部显示，可以理解为保证内容都显示在屏幕之内，实际也是宽高等比缩放，但缩放比例取宽比
屏幕适配（二）
musk6的博客
02-27 488
屏幕适配（一） 点击打开链接 ================================= android如何查找最佳匹配资源？ Android会根据当前的设备配置选择要在运行时使用的备用资源。 系统如何处理设配配置？以屏幕分辨率和屏幕密度为例 设置屏幕分辨率为 运行打印 02-27 15:30:05.542 1920-1920/? I/MainActivi
js实现适配不同的屏幕大小
12-11
话不多说，请看代码： // 通过js适配不同的屏幕大小 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // 根据设备的比例调整初始font-size大小
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
weixin_30823001的博客
08-25 99
1. 设置屏幕适配策略（Resolution Policy） 如果你还没有用过Resolution Policy，只需要在游戏载入过程完成之后（cc.game.onStart函数回调中），调用下面的代码： cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL); setDesignResol...
JavaScript强化教程——cocosjs屏幕适配方案
weixin_34308389的博客
06-29 133
本文为H5EDU机构官方HTML5培训教程，主要介绍：JavaScript强化教程——cocosjs屏幕适配方案首 先说点题外话，对于任何大型项目来说，coding的规范重要，在cocos2dx-jsbinding这个框架中，javascript是一个绝对核心 的脚本语言，99%的游戏逻辑都由js完成。脚本的编写量绝对大于大多数的web项目，掌握javascrip...
通过js的方法实现屏幕的适配
akjyuanfang123的博客
09-29 488
<script> function resize() { let doc = document.documentElement let width = doc.clientWidth let ratio = width / 375 let fontSize = 10 * ratio if (fontSize > 20) fontSize = 20 doc....
JS控制适配屏幕
weixin_30768175的博客
12-13 206
适配原理：将px换成rem,动态改变根元素html的font-size. //得到手机屏幕的宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //得到html的Dom元素 let htmlDom = document.getElementsByTagName('ht...
ReactNative屏幕适配工具
08-10
React Native屏幕适配工具是为了解决在跨平台的移动应用开发中，由于不同设备屏幕尺寸和分辨率差异导致的布局显示问题。React Native作为一个流行的JavaScript框架，允许开发者使用JavaScript和React来构建原生的iOS...
EgretScreenFit:使用Egret引擎开发Html5游戏屏幕适配解决方案
05-03
Egret开发游戏屏幕适配解决方案，适配不同分辨率，两种适配模式。 适配库是基于Egret的屏幕适配策StageScaleMode.NO_BORDER开发，采用NO_BORDER是因为他没有黑边，而且游戏内容是等比例拉伸。可以把NO_BORDER理解为...
通用移动端屏幕适配文件flexible.js
04-08
移动端通用适配方案，解决了1px边框的问题和无线缩放的问题。
关于手机端屏幕适配问题的注意事项及阿里高清方案运用实例--H5页面屏幕适配方案1
08-08
总的来说，阿里高清屏幕适配方案结合了流式布局、响应式设计和rem单位的优点，为移动端屏幕适配提供了一种有效的方法。在实际开发中，开发者可以根据项目需求和目标用户的设备特性，选择最合适的适配策略。
利用js做rem设置
weixin_33908217的博客
05-16 145
//得到手机屏幕的宽度let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;//得到html的Dom元素let htmlDom = document.getElementsByTagName('html')[0];//设置根元素字体大小htmlDom.style.fontSize= htm...
关于js的屏幕分辨率适配
eric1984的专栏
10-17 1903
5、显示效果：默认js不做任何自适应的时候（位置和大小都是固定像素值），os放大控件大小时，os的控件都放大了，chrome全屏时自己做了自适应，保证不会超出屏幕。html的渲染区域变大了，html里面的字体放大了，相对位置变大了，但是屏幕分辨率不变，所以导致部分内容会超出屏幕范围，需要左右拖拽来显示。3、操作系统的控件大小伸缩：操作系统会在默认屏幕分辨率的基础上，做大小的伸缩，操作系统提供的控件会做伸缩的自适应：分辨率变大时，字体和控件会等比例放大。2、显示器分辨率 硬件的分辨率，不一定和大小正相关。
最简单的大屏适配解决方案---autofit.js
m0_71231013的博客
07-10 6697
在工作开发当中，我们避免不了要去做大屏。那么做大屏其实最难的点和最核心的问题就是适配，下面为大家介绍最好用的大屏解决方案——autofit.js。以上使用的是默认参数，可根据实际情况调整，参数分别为* - renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器* - designWidth（可选）：设计稿的宽度，默认是 1920* - designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080。
简易菜单界面
linggty的博客
09-18 699
<!DOCTYPE html><head> <link href="https://fonts.googleapis.com/css?family=Londrina+Shadow" rel="stylesheet"> <style> body { font-family: helvetica, sans-serif; margin: 0 auto; max-width: 600px;
【屏幕大小适配】屏幕宽度改变后实时更新JS代码-基于Vue实现
m0_64494670的博客
06-03 672
屏幕宽度变化时实时修改javascript代码，基于Vue实现
《咸鱼分享》DNS反向解析
热门推荐
来自一条咸鱼的洽谈
10-06 1万+
DNS反向解析安装dns服务包修改DNS主配置文件修改DNS区域配置文件修改DNS数据配置文件修改本机dns地址，进行测试 安装dns服务包 yum -y install bind bind-* 修改DNS主配置文件 vi /etc/named.conf 把里面的两个本机数据，改成any。 修改DNS区域配置文件 在最下面添加下面内容： vi /etc/named.rfc1912.zones zone "159.168.192.in-addr.arpa" IN { type master;
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 914
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
cocos2dx 屏幕适配 js
05-30
cocos2d-x 是一个游戏引擎，支持多平台开发，包括 iOS、Android、Windows、Linux 等。cocos2d-x 支持 JavaScript 编写游戏，屏幕适配也是其重要的功能之一。在 cocos2d-x 中，可以通过设置设计分辨率和适配方式来实现屏幕适配。 设计分辨率是游戏中所有元素最初的大小，通过设计分辨率，可以方便地进行屏幕适配。在 cocos2d-x 中，可以通过 cc.view.setDesignResolutionSize() 方法设置设计分辨率。 适配方式主要有两种：Fixed Height 和 Fixed Width。Fixed Height 方式下，屏幕高度不变，宽度会根据设计分辨率等比例缩放；Fixed Width 方式下，屏幕宽度不变，高度会根据设计分辨率等比例缩放。可以通过 cc.view.setDesignResolutionSize() 的第三个参数来设置适配方式。 在 JavaScript 中，可以通过 cc.view.getFrameSize() 获取当前屏幕大小，并根据需要进行布局调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值