衡水哪有做网站的,wordpress手机端插件下载,南宁网站设计制作公司,网络卡哪个公司的好由于图片的加载是在dom加载完成之后进行的#xff0c;于是#xff0c;在手机端浏览网页时#xff0c;经常会看到页面刚打开时很多内容叠在一起#xff0c;当图片加载完成后#xff0c;页面会由于图片加载完成出现明显的抖动针对这个问题#xff0c;有以下几种解决方案媒体…由于图片的加载是在dom加载完成之后进行的于是在手机端浏览网页时经常会看到页面刚打开时很多内容叠在一起当图片加载完成后页面会由于图片加载完成出现明显的抖动针对这个问题有以下几种解决方案媒体查询pxremvmpadding媒体查询pxmedia screen and(max - width: 320 px) {img {height: 50px;}}移动端设备种类繁多媒体查询固然精准但相应的是工作量的增加remrem这个低调的单位随着webapp的兴起俨然成为了手机端屏幕适配的最佳方案img {height: 0.5rem;}但由于rem的小数像素问题可能会导致1px偏差的产生就看你是不是处女座了vm相对于视口的宽度或高度中较小的那个其中最小的那个被均分为100单位的vm算是比较完美的一个解决方案了不过ios8以下及android4.4以下不支持paddingpadding是可以百分比取值的详见padding-properties(https://www.w3.org/TR/CSS2/box.html#padding-properties)The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.即取值为百分比时计算出来的padding边距是相对于其父元素的宽度计算的(margin类同)如下图那么解决图片占位的问题就很简单了。页面布局如下文字这里使用伪元素替代p充当子元素由于padding-top使图片距离cover顶部100%用相对定位到顶端。.cover {position: relative;font-size: 0;display: inline-block;width: 100%}.cover img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.cover:after {content: \20;padding-top: 100%;display: block;}页面最终效果如下上述例子只适用于图片宽高1:1的情况对于其他比例的图片需要修改padding-top值例如宽高2:1的图片padding-top改为50%即可
