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

前言：前面已经说过【css】移动端响应式布局与设置响应式字体大小，但是移动自适应布局跟自适应字体大小该怎么进行设置呢？

一、vw, vh

vw它是根据可视区的宽度来计算的。

vh它是根据可视区的高度来计算的。

<body>
<style>
body { margin:0; }
.testDiv { width:100vw; height:100vh; font-size:10vw; background:#ccc; }
</style>

<div class="testDiv" ></div>
</body>

其中100vw是把.testDiv的宽度设备为充满整个移动设备(浏览器)可视区宽度,100vh是把.testDiv的高度设置为充满整个移动端设备(浏览器)可视区高度。

如果是10vw，就是当前移动设备(浏览器)宽度的十分之一大小；10vh是当前设备(浏览器)高度的十分之一大小

如果是50vw，当前移动端设备(浏览器)可视区宽度的一半，50vh是可视区高度的一半。

font-size:10vw。如果浏览器可视区宽度为640px的话，那么他在640px的时候的字体大小为64px；而在320px的时候字体大小为32px;

测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<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>test</title>  
<style>  
body { margin:0; }  
.content { width:100%; margin:0 auto; }  
.content img { width:100%; }  
.testDiv { width:100vw; height:31.25vw; line-height:31.25vw; font-size:4.375vw; 
font-family:"宋体"; font-weight:bold; text-align:center; background:#ccc; color:#fff; }  
</style>  
</head>  
  
<body>  
<div class="content">  
    <div><img src="test.png"/></div>  
    <div class="testDiv">hello world</div>  
</div>  
</body>  
</html>

运行效果：

扫描二维码关注公众号，回复： 1534141 查看本文章

像这样，就可以做到自适应布局跟自适应字体大小了，不过有个弊端是这时候高度跟宽度都跟随设备大小变化，也跟随浏览器大小变化，不能像响应式布局那样去控制最大宽度，最大高度，跟字体大小。

（这里在布局的时候最好把模拟手机设置的插件的宽度调到跟效果图一样，像上面的布局，效果图是640px，布局的时候就把模拟手机设备的宽度调到了640px）。

该怎么去设置高度、宽度、字体呢？宽度的话直接用百分比都可以，而高度的话，如上图的话高度是200px，用200/640=31.25%，然后用vw代替%号就可以了，字体也是，如上图的字体是28px; 用28/640=4.375%，一样用vw代替%号就行了。

vw, vh兼容性：想较于rem，em会差一些

二、用js去计算并设置html标签的font-size大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<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>test</title>  
<style>  
html { font-size:100px; }  
body { margin:0; }  
.content { width:100%; max-width:640px; min-width:320px; margin:0 auto; }  
.content img { width:100%; }  
.testDiv { width:100%; height:2rem; line-height:2rem; font-size:.28rem;  
font-family:"宋体"; font-weight:bold; text-align:center; background:#ccc; color:#fff; }  
</style>  
</head>  
  
<body>  
<div class="content">  
    <div><img src="test.jpg"/></div>  
    <div class="testDiv">hello world</div>  
</div>  
<script>
var oHtml = document.querySelector('html');

selfAuto();
window.onresize = selfAuto;

function selfAuto(fontSize,oriWidth){		
	var fontSize = 100;		//100是html的原始字体大小
	var htmlWidth = oHtml.offsetWidth;
	if(htmlWidth>640){ htmlWidth = 640;}
	if(htmlWidth<320){ htmlWidth = 320;}	
	
	fontSize = fontSize*(htmlWidth/640);    //640是原始设计图大小
	oHtml.style.fontSize = fontSize +'px';	
}
</script>
</body>  
</html>

布局的话，直接按我之前讲的根据rem来布局就可以了，而我们需要做的只有改变html标签的font-size字体大小了。

也可以对函数进行优化下。

<script>

//100是html的原始字体大小
//640是原始设计果图大小
selfAuto(100,640)();
window.onresize = selfAuto(100,640);

function selfAuto(fontSize,oriWidth){	
	var oHtml = document.querySelector('html');	
	return function(){
		var fixedFontSize = fontSize;
		var htmlWidth= oHtml.offsetWidth;
		if(htmlWidth>oriWidth){ htmlWidth = oriWidth;}
		if(htmlWidth<320){ htmlWidth = 320;}	
		fixedFontSize = fixedFontSize*(htmlWidth/oriWidth);    
		oHtml.style.fontSize = fixedFontSize +'px';			
	}
}
</script>

如有疑问可以看我之前写的【css】移动端响应式布局与设置响应式字体大小，或者留言提问。

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

猜你喜欢