css设置高度自适应(css 宽度自适应)
css 宽度自适应
一. 双浮动法
原理： float不会完全脱离文档流,会占用原空间
二. 绝对定位法
原理： 左右绝对定位,脱离文档流 。 中间不设置宽度,只设置左右边距，自动撑满块级元素一行的剩余空间。
三. 弹性盒子
原理：flex:1 实际上是三个属性的简写 , flex:1; 等同于 flex:1 1 auto;。
简单的说，分别代表：剩余空间 容器缩小时压缩比例 最小宽度。
四. 网格布局 grid
五. 表格布局
六. css计算 、 JS计算
原理：只要把div放在同一行，使用calc计算宽度即可 。
css如何设置高度自适应
一般的解决方案。采用定长定宽的布局。规划好页面的各部分元素大小。精确到px。然后整体居中，两侧留白。这样分辨率不一样，只会影响留白部分的大小。居中部分在各分辨率下显示效果一致。
另一种解决方案比较少用。就是采用流式布局。页面的各部分都是按照百分比去设置的。这样分辨率不一样的情况下。效果都是一致的。但是比较难以掌控。编码难度大，测试困难。因此较少采用。
另外，针对不同移动设备下，不同分辨率通常采用服务端判断设备类型，然后加载相应css去实现不同设备访问自适应
css设置div高度自适应
第一种：<div style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度</div> 第二种：<div style="border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度</div> 2种方法，你看着用
css 高度自适应
修改Swiper.css中的css即可，即：
.swiper-container {
/* Specify Swiper's Size: */
width: 100%;
height: 5rem;
}
.swiper-slide {
/* Specify Slides's Size: */
width: 100%;
height: 100%;
}
css宽高按比例自适应
如何让PC端不同屏幕大小分辨率自适应
前提：因为项目需求是在已有的项目里面增加自适应，不影响其他页面的已有的布局，以下方法仅供参考。
1、安装postcss-px2rem 、px2rem-loader、lib-flexible
2、在根目录src中新建util目录下新建rem.js等比适配文件
找到node_modules里的lib-flexible包,拷贝一份放在utils里面取名为flexible.js，修改lib-flexible的源码,(更改refreshRem函数)修改为下面的代码就可以了，当然if判断是根据自己需求的调整。
目的：因为lib-flexible的源码是针对移动端的设计方案，我们要实现PC的自适应所以屏幕尺寸也要更换。
3、在 main.js中引入我们刚修改过的flexible.js文件(因为我们更改了源码 ，所有我们需要引入我们改过的文件)
4、在vue.config.js中配置插件
注意：
1、改完配置记得重新编译项目
2、如果个别地方不想转化px。可以简单的使用大写的PX或 Px。
css设置div宽度自适应
左边div左浮动，宽度300；右边div用margin-left挤到右边，宽度设为100%效果图：
css高度自适应怎么实现
将p标签的display属性设置为flex属性，flex属性表示盒模型的宽度自适应。
css图片宽度固定,高度自适应
1.首先是我们常用的bootstrap框架 https://www.runoob.com/bootstrap/bootstrap-tutorial.html
2.可以让div设置个固定宽度 1200px 左右两边自适应 里面就可以填写你的内容了
如果是要宽度沾满屏幕的话 用width：100% min-width:1200px
css怎么设置网页宽高自适应
说真的啊，现在做响应式设计，都不用你说这种限制分辨率的了。建议使用bootstrap框架来进行专业的响应式设计或在手机端采用百分比的设计更好适合响应需求。这里青锋建站先解决你的这个问题：
解决这个问题需要根据不同的分辨率来设置不同的宽度，先给<body >body标签添加一个my-width类。然后针对这个类来设计样式，在不同的分辨率下来规定这个宽度。具体代码如下：
@media only screen and (min-width:1700px)//表示屏幕像素宽度大于1700PX时宽度为1600PX
{
.my-width {width:1600px;}
}
@media only screen and (max-width:1600px) and (min-width:1200px)//宽度在1200-1600之间是设置宽度为1180px
{
.my-width {width:1180px;}
}
@media only screen and (max-width:1200px) and (min-width:800px)//宽度在800-1200之间是设置宽度为800px
{
.my-width {width:800px;}
}
这里给你一个思路，可以再把宽度进行细分，但是内部的块元素也需要在不同分辨率下添加自定义宽度，建议使用专业的响应式设计框架或在PC端使用像素，在手机端平板使用百分比。如果觉得青锋建站说得好，给个赞，顺便关注一下。