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

html-css011

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

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

网页视口尺寸

window.screen.height //屏幕高度，667

window.innerHeight //网页视口高度，553

document.body.clientHeight //body高度，网页内容的高度根据网页内容决定

vh网页视口高度的1/100

vw网页视口宽度1/100

vmax取两者（vh/vw）最大值

vmin取两者（vh/vw）最小值

rem是什么？

px，绝对长度单位，最常用

em，相对长度单位，相对于父元素，不常用

rem，相对长度单位，相对于根元素，常用于响应式布局

响应式布局的常用方案

media-query,根据不同屏幕宽度设置根元素font-size

rem,基于根元素的相对单位

rem的弊端：“阶梯性”