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

最新推荐文章于 2023-09-08 22:41:14 发布
最新推荐文章于 2023-09-08 22:41:14 发布
阅读量376 收藏 1
点赞数
原文链接：http://www.cnblogs.com/dayin1/p/10964627.html
版权

<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

weixin_30852451
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现字体大小屏幕自适应(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 370
JavaScript实现字体大小屏幕自适应(附完整源码)
js实现动态改变字体大小代码
12-10
在很多大网站上为了提高用户方便阅读文字，都提供有字体大小选择功能，以适应不同年龄段人群的阅读需求，其实这种功能实现起来也很简单，修改起来也方便，字体大号由你来定，默认字体大小可以CSS页面中定义，一般网页的标准字体是9pt，也就是12px； 实例代码一： <!DOCTYPE html> <html> <head> <title>修改字体大小.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is
Js动态设置rem来实现移动端字体的自适应代码
10-21
主要介绍了Js动态设置rem来实现移动端字体的自适应代码，代码简单易懂非常不错，具有参考借鉴价值，需要的朋友可以参考下
移动端自适应问题——响应式、rem/em、利用Js动态实现移动端自适应
github_39088222的博客
03-28 562
一. 在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 278
  手机端布局，rem布局动态获取根字体大小。 以下代码： //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(window).width(); function htmlFontZize(){ $windowWidth = $(window).width(); if...
Js动态设置rem来实现移动端字体的自适应
agxriys715453740的博客
10-09 113
//设置根元素字体 var win = window, doc = document; function setFontSize() { 　　var winWidth = $(window).width(); 　　//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小 　　var size = (winWidth / 750) * 100; 　　doc.do...
echarts大屏字体自适应的方法步骤
12-10
为了保证在窗口大小改变时字体大小也能实时自适应，我们需要添加窗口大小改变事件的监听器，重新调用`fontSize`函数更新字体大小。 ```javascript window.addEventListener('resize', () => { fontSize(res); ...
详解vue-cli中使用rem,vue自适应
11-27
通过统一设置根元素的字体大小，我们可以用`rem`来控制整个页面的比例，从而实现不同屏幕尺寸下的自适应布局。 ### 2. `rem.js`内容解析 在提供的`rem.js`脚本中，可以看到以下关键步骤： - 获取文档的`document....
移动端配合rem单位动态调整文字图片自适应
03-13
移动端配合rem单位动态调整文字图片自适应，字体图片尺寸用rem或者em写，根据屏幕宽度自适应，直接应用就可以使用
remjs移动端页面满屏H5自适应方案
08-11
移动端页面满屏H5自适应方案（采用rem作为单位，设计稿为750 * 1334 或者设计稿为640 * 1334）
jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果
11-23
jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果
通过JS实现文字大小根据容器宽度自动调整[vue][js]
Red_Sugar的博客
06-18 1796
通过JS实现文字大小根据容器宽度自动调整
javascript控制rem字体大小
weixin_30836759的博客
02-05 72
摘要：在写响应式H5页面的时候，我常常会用rem字体，为了兼容多个分辨率的设备，需要写多个@media标签，太麻烦并且不够精致，尤其是移动端的页面往往达不到我想要的效果，后来就用js替代了css的@media，下面是代码。（以下方案以750px的设计图） 方案一、缺点：浏览器里使用没问题，安卓和ios设备hybrid app里嵌入的时候，会受到系统字体设置的影响，原理就是当系统设置超大字体的时候，...
原生JS根据屏幕宽度动态改变字体大小
m0_46012686的博客
10-26 442
functionsetRem(){ //设计稿宽度和设备宽度 varuiW=640, winW=document.documentElement.clientWidth, //定义比例 rate=winW/uiW; //获得最外层盒子 varoW=document.getElementById("wrap"); if(winW>uiW){ ...
手机端js配置rem
wyd的博客
07-23 220
(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 390
一、元素大小有两种写法 1、写结果：设计师给的移动端页面sketch设计稿一般是750px宽度，在sublime编辑器里，设置cssrem或rem-unit插件为56px的字体大小。做页面时，设计稿是多少px，就写多少px，sublime会把px自动转换成rem，省略口算或心算。 2、写公式 A、如果设计师给尺寸为375px的sketch设计图，某DIV宽120px，就可以写120rem...
使用js控制文字大小自动适应div不换行，div中文字字号自动调整大小以适应固定宽度
最新发布
weixin_45644355的博客
09-08 640
* 隐藏溢出的内容 *//* 初始字体大小 *//* 禁止文字换行 */
javascript 文字大小自动适应文本框 （文字大小自动调整）
weixin_30834783的博客
07-21 983
javascript 文字大小自动适应文本框 （文字大小自动调整） TOC 思考 思考一：面积法 思考二：微调法 代码 在进行类似微博墙之类的展示页面中，经常会遇到这样的需求：在固定大小的区域放入字数不定的文字，但是要求字体可以自动改变大小来自动填充这些区域。如下所示： 遇到这种情况怎么办呢？ 思考 思考一：面积法 看到需求我的第一...
html 字号自适应,CSS中的自适应字体大小
05-27
3. 使用JavaScript：使用JavaScript来获取浏览器窗口大小，并根据窗口大小动态设置字体大小。例如： ``` function setFontSize() { var screenWidth = window.innerWidth; var fontSize = screenWidth / 20; /* ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值