图片模糊。

<!DOCTYPE html>

<html class="no-js">

<head>

(function () {

'use strict';

// dpr->scale = 1 / dpr

var docEl = document.documentElement,

viewportEl = document.querySelector('meta[name="viewport"]'),

dpr = window.devicePixelRatio || 1,

maxWidth = 540,

minWidth = 320;

dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);

docEl.setAttribute('data-dpr', dpr);

docEl.setAttribute('max-width', maxWidth);

docEl.setAttribute('min-width', minWidth);

var scale = 1 / dpr,

content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';

if (viewportEl) {

viewportEl.setAttribute('content', content);

} else {

viewportEl = document.createElement('meta');

viewportEl.setAttribute('name', 'viewport');

viewportEl.setAttribute('content', content);

document.head.appendChild(viewportEl);

}

setRemUnit();

window.addEventListener('resize', setRemUnit);

function setRemUnit() {

var ratio = 30;

var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

if (maxWidth && (viewWidth / dpr > maxWidth)) {

viewWidth = maxWidth * dpr;

} else if (minWidth && (viewWidth / dpr < minWidth)) {

viewWidth = minWidth * dpr;

}

docEl.style.fontSize = viewWidth / ratio + 'px';

}

})();</script>

<style>

.header{

position: relative;

}

.header .header-img{

width: 100%;

height:4.45rem ;

}

</style>

</head>

<body>

<!--[if lt IE 7]>

<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>

<![endif]-->

</div>

</div>

</div>

</body>

</html>

早知今日何必当初 2020-08-22

源自：实战：美团外卖-首页实现 2-2 首页-头部样式（1）

收起

2回答

好帮手慕言回答被采纳获得+3积分 2020-08-24 18:23:37

同学你好，适配可以理解为在不同的设备下，根元素字体大小会相对应的改变，rem会参照根元素字体进行计算，不同设备下，根元素字体改变，元素的宽高也改变，从而实现了适配。

显示到页面上的大小：例如同学插件的font-size设置的是16px，那么给元素宽度设置为32px，会被转换成2rem（32/16=2），如果html的font-size为25px，那么元素显示到页面上的宽度为50px（25*2）

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕久久 2020-08-22 14:24:36

同学你好，由于给图片设置的高度与宽度不成比例，所以图片变形了。

图片的原始尺寸是750*340的，即在750px的设计稿下，它是340px的宽的。在同学的这个页面下，html的fontsize大小是25px，如下：

而当前视口宽和设计稿是一样的，也是750px：

所以在同学的这个页面下，图片的rem值，应该是“图片的高度/html的fontsize”，即340/25=13.6rem，如下：

由于同学设置了视口缩放，而且ratio设置成了30，所以各个元素尺寸的rem值，与视频中老师的值是不一样的，同学要重新计算。

由于没有具体的设计稿，同学算起来会有些费劲，因此建议同学使用视频中老师的适配方案，这样你的元素尺寸才会与老师的一样，学习起来会更顺利些。

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

收起回答

提问者早知今日何必当初 #1

老师是不是我可以李杰文rem适配是页面宽/编辑软件设置的rem=js插件的rem

2020-08-24 15:19:33
提问者早知今日何必当初 #2

rem适配的含义就是根据初始页面的设置缩放，我的初始页面过大，跟着缩放的也就过大这两个理解对吗

2020-08-24 15:21:28