时间：2023-09-02 23:30:01 | 来源：网站运营
时间：2023-09-02 23:30:01 来源：网站运营
CSS响应式布局：
在线咨询
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">/* 随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式 *//* 移动端优先使用min-width *//* iphone6 7 8 plus */@media screen and (min-width: 414px) { body { background-color: blue; }}/* ipad */@media screen and (min-width: 768px) { body { background-color: green; }}/* PC端优先使用max-width *//* pc width > 1024px */ body { background-color: yellow; }/* ipad pro */@media screen and (max-width: 1024px) { body { background-color: #FF00FF; }}百分比布局function refreshRem() { var docEl = doc.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;}win.addEventListener('resize', refreshRem);利用媒体查询，以rem为单位设置不同尺寸设备下的字体大小/* ipad pro */@media screen and (max-width: 1024px) { body { background-color: #FF00FF; font-size: 1.4rem; }}视口单位img { display: inline-block; // 元素相对于周围内容以内联形式呈现，但可以设置宽度和高度 max-width: 100%; height: auto; // 保证图片进行等比缩放而不至于失真}max-width 保证图片最大宽度为其容器的100%。如果图片宽度超过了其容器，图片会缩放，占满最大可用空间。.banner{ background-image: url(/static/large.jpg);}@media screen and (max-width: 767px){ background-image: url(/static/small.jpg);}作者：前端蔡徐坤
链接：https://juejin.im/post/6870809105095720973
来源：掘金
关键词：布局,响应
