一、css实现左侧宽度固定右侧宽度自适应
1、定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
position: absolute;/*定位*/
left: 0;
top:0;
}
.right{
background: blue;
height: 200px;
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</body>
</html>2、浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
float: left;/*浮动*/
}
.right{
background: blue;
height: 200px;
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</body>
</html>3、margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
}
.right{
background: blue;
height: 200px;
margin-top: -200px;/*margin*/
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</body>
</html>二、css3弹性盒模型实现自适应
1、上下高度固定中间高度自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
#contain{
display: flex;
flex-direction: column;/*列 垂直方向*/
height: 100%;/*全屏效果 该元素及其父元素及html、body height：100%*/
}
#top{
height: 200px;
background: red;
}
#center {
flex: 1;
background: blue;
}
#bottom{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="contain">
<div id="top">你好</div>
<div id="center">你好</div>
<div id="bottom">你也好</div>
</div>
</body>
</html>2、左侧宽度固定右侧宽度自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#contain {
display: flex; /*父元素设置该属性*/
}
#left {
width: 100px;
height: 200px;
background: #fff8a8;
margin-right: 10px;
}
#right {
flex: 1; /*所占比例/份数*/
height: 200px;
background: #ff9bad;
}
</style>
</head>
<body>
<div id="contain">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
html中map area 热区自适应的原生js实现方案
在做自适应网页的时候，如果在图片中使用了热区map。图片可以通过样式实现：图片大小随页面变化，MAP中每个area的坐标也随页面等比例的变化效果。根据分辨率自适应热区坐标
WKWebView加载的网页自适应大小
有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小
iframe 自适应高度的多种实现方式
实现 iframe 的自适应高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求。
移动端自适应
js动态设置html的字体大小，设计稿宽度750px，设备宽度350px，此时HTML 的font-size:50px，及1rem=50px;设置html的font-size: 13.33vw，设置html的font-size并缩放页面
HTML+Css让网页自动适应电脑手机屏幕
在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度,其中：width=device-width ：表示宽度是设备屏幕的宽度,height=device-height ：表示宽度是设备屏幕的宽度
CSS实现自适应正方形、等宽高比矩形
利用vw、vh、vmin、vmax，vw表示的是viewport的宽度，也就是视口的宽度，vh表示的是视口的高度；利用双层嵌套来写，将外层的div的position设置relative，内层的position设置为absoult
echarts 表格自适应需要注意的问题
最近在做大屏可视化，页面数据展示基本都是用百度的echarts,因为页面要做自适应，所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格，当你引用多个的时候，有些地方需要注意。
web页面实现等比例缩放自适应 - 通过 rem 和 vw 实现
rem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数;vw 是相对长度单位，相对于浏览器窗口的宽度，浏览器窗口宽度被均分为100个单位的vw,rem 和 vw 结合实现WEB页面等比例缩放自适应
vuejs中拖动改变元素宽度实现宽度自适应大小
拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时
让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和 等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式，但是元素高度是固定的
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!