老师请解答
来源：2-2 首页-头部样式（1）
weixin_慕码人1392209
2020-10-03 21:45:03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="=width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"/>
<title>首页</title>
<script>
(function(){
'use strict';
setRemUnit();
window.addEventListener('resize', setRemUnit);
function setRemUnit() {
var docEl = document.documentElement;
var ratio = 18.75;
var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
docEl.style.fontSize = viewWidth / ratio + 'px';
}
})()
</script>
<link rel="stylesheet" href="../lib/reset.css">
<link rel="stylesheet" href="./header/header.min.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<div class="search-bar">
<div class="bar-location">
<div class="location-icon"></div>
<div class="location-text">郑州市</div>
</div>
</div>
<div class="search-btn">
<p class="place-holder">鸡翅</p>
</div>
<img class="header-img" src="https://app.nihaoshijie.com.cn/upload/bannertemp.e8a6fa63.jpg">
</div>
<!-- 头部结束 -->
</body>
</html>
$base-font-size: 37.5px !default;
.scss文件：
@function pxTorem($px){
@return $px/$base-font-size * 1rem;
}
.header{
position: relative;
}
.header .header-img{
width: 100%;
height: pxTorem(178px);
}最后为什么图片高度只有原来的一半
写回答
1回答
-
樱桃小胖子
2020-10-08
同学你好，图片的宽高比是750：340 ，如果宽度变小，而高度不变，这个比例肯定和原比例不一样。这里图片宽度是变化的，高度如果依旧是340px肯定会变形。比例也不是随意设置的，要看宽度如何变化。自己再认真思考一下哦，这里只不过是拿iPhone6去进行计算的，最终并没有直接设置固定宽度178px，而是转换为了rem。
rem是一个相对单位，在不同设备下，跟字体肯定会跟随变化的。也就是它在iPhone6下，4.746667rem计算出的值是178px。在其他设备下，会因为跟字体的不同，计算出的高度也不同。也就是根据设备宽度的变化，高度也一直跟随变化的。
希望可以帮到你，祝学习愉快！
0
相似问题