使用js rem动态改变字体大小，自适应

最新推荐文章于 2024-07-31 02:32:11 发布
转载 最新推荐文章于 2024-07-31 02:32:11 发布 · 415 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/dayin1/p/10964627.html

本文介绍了一种使用设备像素比(window.devicePixelRatio)进行网页适配的方法，通过调整初始缩放(initial-scale)和字体大小，实现响应式布局，确保在不同分辨率设备上网页显示的一致性和清晰度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>

<head>

<meta charset="utf-8">

<script>

　　console.log(window.devicePixelRatio);

　　var iScale = 1;

　　iScale = iScale/window.devicePixelRatio;

　　document.write('<meta name="viewport" content="width=device-width,user-scable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '"/>');

　　//console.log(document.documentElement.clientWidth);

　　var iWidth = document.documentElement.clientWidth/16;

　　document.getElementsByTagName('html')[0].style.fontSize = iWidth + 'px';

</script>

</head>

</html>

转载于:https://www.cnblogs.com/dayin1/p/10964627.html

JavaScript实现字体大小屏幕自适应(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 581
JavaScript实现字体大小屏幕自适应(附完整源码)
Js动态设置rem来实现移动端字体的自适应代码
10-21
主要介绍了Js动态设置rem来实现移动端字体的自适应代码，代码简单易懂非常不错，具有参考借鉴价值，需要的朋友可以参考下
移动端自适应问题——响应式、rem/em、利用Js动态实现移动端自适应
github_39088222的博客
03-28 630
一. 在HTML的头部加入meta标签 　　在HTML的头部，也就是head标签中增加meta标签，告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放，代码如下： &lt;meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-sca...
手机端布局，rem布局动态获取根字体大小
weixin_33875564的博客
03-20 310
  手机端布局，rem布局动态获取根字体大小。 以下代码： //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(window).width(); function htmlFontZize(){ $windowWidth = $(window).width(); if...
Js动态设置rem来实现移动端字体的自适应
agxriys715453740的博客
10-09 154
//设置根元素字体 var win = window, doc = document; function setFontSize() { 　　var winWidth = $(window).width(); 　　//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小 　　var size = (winWidth / 750) * 100; 　　doc.do...
js实现动态改变字体大小代码
10-26
本文为大家介绍下使用js如何实现动态改变字体大小，感兴趣的额朋友不要错过
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
weixin_67244432的博客
04-29 3024
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
Vue进阶（幺柒零）：前端用户体验提升（四）应用 rem em 实现字体自适应_vue em
2401_85124329的博客
06-11 569
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！计的布局。不过偶尔你会遇到真的需要使用显式的固定值，以防止缩放的元素。采用固定尺寸值的前提应该是，如果被缩放的话，它的结构会被打破。这真的不常出现，所以你想应用px单位之前，问问自己是否使用它们是绝对必要的。正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
rem单位做界面自适应（等比扩大）
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-31 1831
rem是一种CSS长度单位，代表“root em”，即相对于HTML根元素（）的字体大小。这使得我们可以创建基于全局字体大小的比例布局，从而实现跨设备的自适应效果。通过本文的学习，你应该已经掌握了如何使用rem单位来进行等比例放大的布局设计。这些技巧不仅可以帮助你创建更加灵活和响应式的网页，还能让你的网站在各种设备上表现出色。在实际开发中，记得灵活运用这些技巧，并结合具体情况做出最佳选择。欢迎来到我的博客，很高兴能够在这里和您见面！
使用rem实现页面元素自适应
AiHongHong_的博客
05-22 529
想实现页面元素的自适应
remjs移动端页面满屏H5自适应方案
08-11
移动端页面满屏H5自适应方案（采用rem作为单位，设计稿为750 * 1334 或者设计稿为640 * 1334）
jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果
11-23
jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果
jQuery实现自动调整字体大小的方法
10-24
主要介绍了jQuery实现自动调整字体大小的方法,涉及jQuery针对页面属性与样式动态操作的相关技巧,需要的朋友可以参考下
通过JS实现文字大小根据容器宽度自动调整[vue][js]
Red_Sugar的博客
06-18 2070
通过JS实现文字大小根据容器宽度自动调整
javascript控制rem字体大小
weixin_30836759的博客
02-05 103
摘要：在写响应式H5页面的时候，我常常会用rem字体，为了兼容多个分辨率的设备，需要写多个@media标签，太麻烦并且不够精致，尤其是移动端的页面往往达不到我想要的效果，后来就用js替代了css的@media，下面是代码。（以下方案以750px的设计图） 方案一、缺点：浏览器里使用没问题，安卓和ios设备hybrid app里嵌入的时候，会受到系统字体设置的影响，原理就是当系统设置超大字体的时候，...
原生JS根据屏幕宽度动态改变字体大小
m0_46012686的博客
10-26 481
functionsetRem(){ //设计稿宽度和设备宽度 varuiW=640, winW=document.documentElement.clientWidth, //定义比例 rate=winW/uiW; //获得最外层盒子 varoW=document.getElementById("wrap"); if(winW>uiW){ ...
手机端js配置rem
wyd的博客
07-23 266
(function(){ var a=document.querySelector(“meta[name=viewport]”); var b=“orientationchange” in window?“orientationchange”:“resize”; var d=function(){var f=document.body||document.documentElement; var ...
改变字体大小实现自适应之js方案A
weixin_30799995的博客
03-27 429
一、元素大小有两种写法 1、写结果：设计师给的移动端页面sketch设计稿一般是750px宽度，在sublime编辑器里，设置cssrem或rem-unit插件为56px的字体大小。做页面时，设计稿是多少px，就写多少px，sublime会把px自动转换成rem，省略口算或心算。 2、写公式 A、如果设计师给尺寸为375px的sketch设计图，某DIV宽120px，就可以写120rem...
rem响应式布局实现：代码片段让移动设备字体大小自适应
- JavaScript可用于动态检测屏幕尺寸，并根据尺寸变化调整rem单位的基准值，从而实现响应式布局。 - 上述代码片段使用了`DOMContentLoaded`事件监听页面加载完成，以及`pageshow`事件监听浏览器缓存页面的显示，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值