css字体适配rem 根据屏幕大小变换字体大小

灰太狼 2021-10-19 05:50 800阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>css适配</title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
    		<style type="text/css">
    			body{
    				margin: 0 ;padding: 0;font-size: 0.32rem;
    				/*0.32*50px(320屏幕宽度下html是50px)是16px
    				0.32*50px(414屏幕宽度下html是64.68px)是20px
    				0.32*50px(768屏幕宽度下html是120px)是38px*/
    			}
    			div{
    				width: 3.2rem;height: 3.2rem ;background: red;
    			}
    		</style>
    		<script type="text/javascript">
    			document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
    		</script>
    	</head>
    	<body>
    		<div>
    			<span class="demo">测试</span>
    		</div>
    	</body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		var font=$(".demo").css('font-size'); 
    		console.log("字体大小:",font);
    	});
    </script>
    </html>

转载地址：[https://www.cnblogs.com/dannyxie/p/6640903.html][https_www.cnblogs.com_dannyxie_p_6640903.html]

[https_www.cnblogs.com_dannyxie_p_6640903.html]: https://www.cnblogs.com/dannyxie/p/6640903.html

发表评论取消回复

表情：

评论列表（有 0 条评论，800人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS适配不同屏幕下的字体大小

[Demo下载地址][Demo] 我们经常会遇到这样的事情，就是在iPhone6上宽度刚刚好的文字，到了iPhone6P上却变小了，到iPhone5S小屏幕上却变大了，

短命女/ 2023年10月17日 09:29/ 0 赞/ 122 阅读

相关 js 适配手机端屏幕字体大小

通过js控制页面大小，字体大小 function setRootFontSize() { var width = document.documentElem

小灰灰/ 2023年10月02日 12:51/ 0 赞/ 3 阅读

相关 CSS使网页适应不同屏幕大小（最实用的rem基础屏幕的适配方案）

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右）。如您满意请给莫成尘点个Fabulous 牛顿说过：我之所以看得远,是因为我站在

素颜马尾好姑娘i/ 2022年12月27日 09:25/ 0 赞/ 271 阅读

相关 CSS3的REM设置字体大小

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-la

港控/mmm°/ 2022年08月06日 14:15/ 0 赞/ 188 阅读

相关 CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size:

灰太狼/ 2022年07月16日 02:11/ 0 赞/ 207 阅读

相关 rem适配不同大小屏幕

解决在不同屏幕大小的情况下，页面自适应，成比例放大缩小问题。 1、css头部定义媒体查询 /媒体查询,不同屏幕下的根元素字体大小设置，利于rem/

系统管理员/ 2022年07月14日 11:09/ 0 赞/ 349 阅读

相关 iOS XIB约束适配 || 字体根据屏幕宽变化

简单实现XIB上的约束值，按照指定需求自动变化（根据屏幕宽度变化）。基准图（750 \ 1334）上控件距离左边为20 达到效果：5s（640 \ 1136）上运行距离为

小灰灰/ 2022年05月08日 10:36/ 0 赞/ 433 阅读

相关 rem适配手机屏幕

rem适配手机屏幕 em和rem记录在：[https://blog.csdn.net/weixin\_43389331/article/details/97262876]

比眉伴天荒/ 2021年11月23日 02:22/ 0 赞/ 501 阅读

相关 em和rem，rem适配手机屏幕

em和rem em:一种长度单位，参照当前元素的字号，如果没有设置，就参照父容器或者当前浏览器的默认字号。举个例子： <!DOCTYPE html>

分手后的思念是犯贱/ 2021年11月23日 01:38/ 0 赞/ 475 阅读

相关 css字体适配rem 根据屏幕大小变换字体大小

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

灰太狼/ 2021年10月19日 05:50/ 0 赞/ 801 阅读