移动端自适应布局与字体大小

builder2991

已于 2023-06-26 16:57:03 修改

阅读量3.2k

点赞数 1

分类专栏：移动端文章标签：移动端自适应布局自适应字体大小

于 2020-04-10 10:33:03 首次发布

本文链接：https://blog.csdn.net/low666/article/details/105427519

版权

移动端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

移动端自适应布局与字体大小

vw, vh实现

vw：根据可视区的宽度来计算的，100vw相当于宽度为100%，10vw则相当于10%。

vh：根据可视区的高度来计算的，和vw换算方式一样。

font-size:10vw。如果浏览器可视区宽度为320px的话，那么字体大小为32px，以此类推。

<!DOCTYPE html> 
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">  
<title>css实现移动端字体适配</title>  
<style>  
body {
	margin:0; 
	}  

.child { 
	width:100vw; 
	height:40vw; 
	line-height:40vw; 
	font-size:5vw; 
	text-align:center;
	background-color: coral; 
	color:#fff; 
	}  
</style>  
</head>  
  
<body>  
    <div class="child">Happy Ending</div>   
</body>  
</html>

在这里插入图片描述

缺点：
高度跟宽度都跟随设备大小变化，不能像响应式布局那样去控制最大宽度，最大高度，跟字体大小。

js实现设置html标签的font-size大小

<!DOCTYPE>  
<html>  
<head>  
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">  
<title>js实现移动端字体适配</title>  
<style>  
body {
	margin:0;
 }  
.par{ 
	width:100%; 
	max-width:1400px;
	min-width:180px;
	margin:0 auto;
 }  

.child {
	width:100%; 
	height:2rem; 
	line-height:2rem; 
	font-size:0.3rem;  
	text-align:center; 
	background-color:coral; 
	color:#fff; 
	}  
</style>  
</head>  
  
<body>  
<div class="par">  
    <div class="child">Happy Ending</div>  
</div>  
<script>
var fontSizeAuto = function (){
	var viewportWidth = document.documentElement.clientWidth;
	if(viewportWidth > 960){ viewportWidth = 1400; }
	if(viewportWidth < 960 && viewportWidth > 640){ viewportWidth = 960; }
	if(viewportWidth < 640 && viewportWidth > 320){ viewportWidth = 640; }
	if(viewportWidth < 320 && viewportWidth > 180){ viewportWidth = 320; }
	if(viewportWidth < 180 ){ viewportWidth = 180; }
	document.documentElement.style.fontSize = viewportWidth/6.4 +'px';
}
fontSizeAuto();
window.onresize = fontSizeAuto;
</script>
</body>  
</html>

在这里插入图片描述

builder2991

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
移动端自适应布局与字体大小

移动端自适应布局与字体大小vw, vh实现vw：根据可视区的宽度来计算的，100vw相当于宽度为100%，10vw则相当于10%。vh：根据可视区的高度来计算的，和vw换算方式一样。font-size:10vw。如果浏览器可视区宽度为320px的话，那么字体大小为32px，以此类推。<!DOCTYPE html> <html> <head> ...
复制链接

扫一扫