1自适应是前端开发中很多时候都需要用到的知识，比如定义一个div长和宽是页面大小的一半，我们可以这样。
<!doctype html>
<html>
<head>
<style type="text/css">
html,body{
height: 100%
}
</style>
<meta charset="utf-8">
<script src="jq16.js">
</script>
</head>
<body>
<div id="div" style="width:50%;height:50%;background-color: green ">xxxxxxxxxxxxxxxx</div>
</body>
</html>
这个方法在各大浏览器中都能得到想到的效果，甚至在IE5，所以这应该是自适应大小比较好的解决方案，至于为什么要把html和body标签都设置成100%是因为，这两个元素默认的高度分别是8px和0px(火狐和chrome下是，不同浏览器可能不一样)，而页面的元素大小是基于父元素body的，所以body的大小必须为页面真正大小的100%，而body又是基于html的，所有html的高度也要是页面真正高度的100%。
2还有一个方法是利用vw,vh这两个属性。这两个属性每个元素的大小是基于屏幕真正的大小，所以我们不需要设置这两个元素的高度了。
<!doctype html>
<html>
<head>
<style type="text/css">
</style>
<meta charset="utf-8">
<script src="jq16.js">
</script>
</head>
<body>
<div id="div" style="width:50vw;height:50vh;background-color: green ">xxxxxxxxxxxxxxxx</div>
</body>
</html>
不过这个属性不兼容IE9以下的浏览器。
这两个属性还有一个比较有用的地方是设置自适应字体的大小
<!doctype html>
<html>
<head>
<style type="text/css">
</style>
<meta charset="utf-8">
<script src="jq16.js">
</script>
</head>
<body>
<div id="div" style="font-size:5vw;background-color: green ">sssssssssssssssssssssssssssss</div>
</body>
</html>
这时候字体的大小会随着屏幕变化，可以基于高度或者宽度。字体自适应大小还有几个相关属性，比如em和rem，rem是相对html根元素的字体大小，默认是16px，16px==1rem，但是chrome下字体最小值是12px，所以这个要注意，0.5rem最后的结果是12px而不是8px。
扫一扫
1005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
