页面布局
1、padding-bottom实现等比例缩放
原理:
1、父元素设置定位为相对定位(position: relative)
2、子元素设置定位为绝对定位(position: absolute)
3、父元素padding-bottom值为百分比时以父元素为参考,正方形时同父元素一样的百分比。
4、子元素的绝对定位会脱离文档流,设置其width、height为100%则会同父元素保持一样的比例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale-1" /> <title>padding-bottom实现宽高等比缩放</title> <style> .imgItem { position: relative;width: 50%;padding-bottom: 50%;margin: 20px auto; } .imgItem div { position: absolute;z-index: 3; width: 100%;height: 100%; } img { width: 100%;height: 100%;object-fit: cover; } </style> </head> <body> <div class="imgItem"> <div><img src="http://img.cgypt.com/goods/2020072413573837640807.jpg" /></div> </div> <div class="imgItem"> <div><img src="http://img.cgypt.com/ad/2020052110265727783873.jpg" /></div> </div> </body> </html>
上述例子的简化版可如下,不必嵌套那么多元素。最重要是块级元素的高是由内容决定的。
<style> div { position: relative; width: 30%; padding-bottom: 30%; } img { position: absolute; width: 100%; height: 100%; object-fit: cover; } </style> <div> <img src="http://img.cgypt.com/goods/2020072413573837640807.jpg" /> </div>
2、浏览器背景色
浏览器背景颜色是和html设置的背景颜色是一样的,移动端页面设置背景颜色后,在PC打开web页整屏背景颜色都变了的话注意修改web页的html背景色为白色,而web页底色用body设置即可(左图为最大宽度560px的显示,右图html的背景色:#FFF000)。
3、position:fixed元素和表单元素
页面设置position:fixed,又有表单表单页面,键盘弹出页面被顶处理方式:
1、设置position:fixed的父元素transition:translate(0,0);
2、设置position:fixed元素的width为calc(100%),因为该属性值的width会基于父元素。
(麻烦下次截个图,现在看着描述不知所云)