css自适应高度宽度，宽高自适应的作用
本篇文章给大家谈谈css自适应高度宽度，以及宽高自适应的作用对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
怎样让DIV自适应高度
在我们完成项目的时候，都会遇到，让DIV自适应高度这个效果的实现，那么今天我们就给大家做出俩种情况下怎么实现DIV自适应高度的效果。
第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度；
第二种：没有最小高度，DIV完全自适应高度。
以下为大家介绍这两种情况与解决方法
一定最小高度，内容加多时自适应高度，而内容少时DIV有一定最小高度- TOP
有一DIV盒子,默认高度为200px,当DIV里内容多余并超出限定高度时,DIV自适应高度,要求使用纯CSS+DIV,不需要JS,兼容火狐浏览器
1、回答与解释：
_height:200px;/* css注解：仅IE6设别此属性，假定最低高度是200px，设置高度200px，内容超出后IE6会自动撑高设定高度*/
min-height:200px;/* css注释： css最小高度为200px支持所有浏览器，IE6浏览器除外*/
这个设置，ie6,7,8,9,10,火狐等都能兼容
2、具体设置代码：
div{
_height:200px;
min-height:200px
/* css注释：两个放置不分前后顺序，兼容所有浏览器*/
}3、CSS最小高度与自适应高度并存案例
我们设置2个DIV盒子，最小高度均为200px，当内容较少时DIV盒子的最小高度为200px,当内容比较多超出高度能装下时，DIV盒子自适应高度，为了便于观察与参考分析，我们统一设置宽度为100px,一个黑色1px CSS边框。
CSS代码如下：
div{_height:200px; min-height:200px; border:1px solid#000; width:100px}
/* css注释：设置最小高度，border边框，宽度*/
HTML代码片段：
<div>200高度能装下这点内容，设置最小高度200px</div>
<div>设置最小高度200px<br/>
而内容多，超出200px高度限制，DIV自适应高度<br/>
<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位<br/>
案例占位
</div>CSS默认自适应高度
当我们不对DIV设置固定高度或不设置CSS高度样式，其DIV盒子默认是自适应高度。
相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
最新的JS面试题解析
原生js的常用方法整理
最新的JS面试题解析
HTML5的视频能不能拉伸宽度,实现自适应宽度
曾几何时，项目中有碰到视频比例拉伸的需求，但是发现这个看似再普通不过的一个需求，找遍全网至今都没有找到解决方法。因为强制给video标签设置width和height的话只会将video的显示区域拉伸，但是里面的视频还是保持原始比例，怎么调都没用：
因为当我横向拉伸时：
当我纵向拉伸时：
2016-09-21 11:15:40更新：
感谢@RileyRen提醒，原来还有object-fit这一属性，把它设置为fill就满足需求了，泪奔~，这篇文章就当看个笑话吧，哎，不过可以看看我家喵星人的处女秀。
<style>video{
object-fit:fill;
width:800px;
height:320px;}</style><h1>测试视频比例拉伸：</h1><video src="" controls autoplay loop></video>
但是，这一属性兼容性不太好，IE全军覆没，安卓要4.4.3以上才支持：
所以我这个方法还是有一点点价值的，哈哈。
解决方法一
有人会说，既然网页上拉伸不了比例，那么直接把视频用转码工具拉伸比例然后重新转码不就是了？
没错，这就是我说的第一种解决方法，但是这对于少量视频没啥问题，如果有很多个视频，全部转码又重新上传也不太现实。刚开始我也确实是这么做的，但是后来发现还有其它方法。
解决方法二
就是标题说的，借用transform来实现视频比例拉伸。分2种情况，宽高比变大和宽高比变小。
3.1.完整DEMO演示
先来看个完整的DEMO，视频主角是我家的喵星人，阿喵说：哎呀，要露脸了，好害羞~~~
3.2.宽高比变大
保持宽度不变，调整rotateX即可实现高度变小，也就是宽高比变大了。看下图：
举个例子，假如原始视频分辨率是640*320（16:9），我想把它调成16:7，也就是640*280，那么：
cosθ=新高度/旧高度= 280/ 360
用js计算角度（单位是deg）：
var rotate=(Math.acos(280/360)*180/Math.PI).toFixed(2);//新高度/旧高度
3.3.宽高比变小
宽高比减小时，以高度为基准，调整rotateY即可实现宽度变小，也就是宽高比变小了。
举个例子，假如原始视频分辨率是640*320（16:9），我想把它调成4:3，也就是480*320，那么：
cosθ=新宽度/旧宽度= 480/ 640
用js计算角度（单位是deg）：
var rotate=(Math.acos(480/640)*180/Math.PI).toFixed(2);//新宽度/旧宽度
综上，有了这2个方法就可以实现任意比例的视频拉伸了，不过变形过程中需要注意位置可能发现的变化。
附
附上前面演示选择的DEMO：
<!DOCTYPE html><html lang="zh"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转比例模拟</title>
<style type="text/css">.content{
position: absolute;
width: 400px;
height: 300px;
-webkit-perspective: 400px;
perspective: 400px;
left: 100px;
top: 100px;}.wrapper{
position: absolute;
width: 320px;
height: 240px;
transform: rotateY(-30deg) rotateX(0deg);
border: solid 2px#000;}.wrapper.rotate{
transform: rotateY(-30deg) rotateX(50deg);}.wrapper:after{
content:'';
display: block;
position: absolute;
网站怎么做到自适应网页
关于网站如何做到自适应网页，可根据如下操作：
首先，在网页代码的头部，加入一行viewport元标签。<metaname=”viewport”content=”width=device-width, initial-scale=1″/>viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。
“自适应网页设计”的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
其次，除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！