移动端字体大小适配

最新推荐文章于 2024-06-01 21:54:01 发布

Iamgoodgilr

最新推荐文章于 2024-06-01 21:54:01 发布

阅读量5.8k

点赞数 3

文章标签：移动端字体大小适配

本文链接：https://blog.csdn.net/Iamgoodgilr/article/details/52838166

版权

接下来是个人的理解，网上的资料太杂太乱，得细心看才能找到精华。

css3字体有了“rem”单位，来解决屏幕适配问题。

它与px的区别：px设置了字体大小就不可变，rem是可以根据根元素html的字体的大小而变化的。

接下来就是用法：

原理：随着html的font-size的变化，rem变化。

思路：只要我算出来不同屏幕字体比例大小就可以了。

vw是 Viewport宽度， 1vw 等于viewport宽度的1%；vh是 Viewport高度， 1vh 等于viewport高的的1%；

假设设计图是根据iphone6来设计的，iphone6的宽度为375px，100vw（等于viewport宽度的100%）是屏幕的宽度，

100vw/3.75=100px；所以在这里1rem=100px；

一些浏览器不支持font-size: calc(100vw/3.75); 所以js加一句$("html").css("font-size",(window.innerWidth)/3.75 + 'px');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
	</head>
	<style>
		html {
			font-size: calc(100vw/3.75);
		}
		
		div {
			font-size: 0.14rem;
		}
		
		p,
		h1,
		strong {
			padding: 0px;
			margin: 0px;
		}
	</style>
	<body>
		<div>
			<p>南京的价位的会计文件看看南京的价位的会计文件看看</p>
			<h1>经常见的好成绩房东</h1>
			<strong>哈萨感觉到过十多个</strong>
		</div>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("html").css("font-size", (window.innerWidth) / 3.75 + 'px');
			});
		</script>
	</body>
</html>

Iamgoodgilr

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
移动端字体大小适配

接下来是个人的理解，网上的资料太杂太乱，得细心看才能找到精华。css3字体有了“rem”单位，来解决屏幕适配问题。它与px的区别：px设置了字体大小就不可变，rem是可以根据根元素html的字体的大小而变化的。接下来就是用法：原理：随着html的font-size的变化，rem变化。思路：只要我算出来不同屏幕字体比例大小就可以了。vw是 Viewport宽度， 1vw
复制链接

扫一扫