css响应式问题，图片随页面宽度等比例缩小该怎么设置

Posted 2023-05-06

css响应式问题，图片随页面宽度等比例缩小该怎么设置图片是在一个一个的div里的

手机响应式布局，是获取屏幕尺寸，在某个区间用一种css，另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。而的用法是随着屏幕的大小，自动把页面自适应到屏幕的大小。这个是管用的。em是字体的宽度，也就是一个字体宽12px，那么em=12px；字体为15px，em=15px；一般用来动态控制字体外的区块大小去适应字体，而不是用来设置字体的大小的。例如： 如果没效果，建议你用图片贴出来，看看你想要的具体效果是什么。追问

就是图片随窗口缩小而缩小

参考技术A @media(min-width:1200px)
imgwidth:25%;
box-sizing:border-box;
padding:10px;


@media(min-width:800px)


@media(min-width:480px)


@media(max-width:480px)


在里边写上你对应的样式，类似于我第一个写的那样，把你对应的样式写上去，但是我写的跟你效果图不一样，只是为了表明意思所以没细写，因为你已经知道尺寸了所以宽度可以用固定尺寸写，计算好就行 参考技术B 设置DIV的宽度百分比变化，把DIV里嵌套的img的宽度设置成100%就好了

笔记：轮播图大小随不同分辨率电脑等比例放大缩小（vue）

参考技术A 首先需要知道如何获取屏幕的宽高

对于1920*1080的电脑屏幕

1、获取窗口中的文档显示区域宽高
w = window.innerWidth; //1920（包含滚动条）
h = window.innerHeight; //883（不含工具条）

2、获取窗口（包括滚动条与工具条）区域宽高
w = window.outerWidth; //1920（包含滚动条）
h = window.outerHeight; //883（包含工具条）

3、获取网页可见区域宽高
clientw = document.body.clientWidth; //1903（不包含滚动条）
clienth = document.body.clientHeight; //866（不包含工具条）

4、获取网页可见（含边线，但不是边距）区域宽高
clientw = document.body.offsetWidth; //1903（不包含滚动条，含边线）
clienth = document.body.offsetHeight; //866（不包含工具条，含边线）

5、网页正文全文宽高
clientw = document.body.scrollWidth; //1903（不含滚动条）
clienth = document.body.scrollHeight; //1269（不含工具条）
所谓正文全文，实际就是整个网页文档的宽高，既然是整个网页文档宽高肯定就是，网页内容有多宽那个宽就是多少，网页内容有多高那高就是多少了，当然同样包含着边线

6、屏窗
所谓屏窗就是整个屏幕窗口，我们前面说的到都属于视窗，也就是可视区域的窗口

获取屏窗一般使用：

clientw = window.screen.width; //1920
clienth = window.screen.height; //1080

第二种是获取屏幕可用工作去宽高

clientw = window.screen.availWidth; //1920
clienth = window.screen.availHeight; //1040

原文链接： http://www.cnblogs.com/leona-d/p/6347013.html

接下来说说轮播，html部分动态绑定高度，至于样式就宽度100%就好

在mounted时期调用方法，因为mounted才可以操作DOM，监听窗口变化

//这个3.84的比例是按照1920*500的轮播来的，即1920/500