css中自适应的问题
2016-05-28 15:01
411 查看
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。
<!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。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css 背景
- 小书匠到博客园的 CSS 留存
- 用CSS画个三角形
- CSS样式总结
- css备忘录（关于relative、absolute）
- CSS图片与文字水平对齐
- CSS选择器优先级
- CSS的一些小的注意点整理
- 《CSS权威指南》学习记录——特殊性和层叠
- 0.5px边框，css及sass
- CSS FILTERS：CSS过滤器能够做什么？
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- 纯css实现菜单激活状态切换
- CSS之Transform
- 《CSS权威指南》学习记录——选择器
- 控制CSS样式
- css的小技巧
- css实现三角形原理
- 转载 css放大效果实现
- Web前端学习第十二天·fighting_使用CSS布局和定位（二）