老师帮我看一下代码跟屏幕适配。

来源：5-2 项目作业

要每天学习的小蓝同学

2021-11-23 12:37:37

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>

<body>
    <div id="details-page" class="details-layout">
        <!-- 头部 -->
        <div class="header-layout">
            <div class="header">
                <i class="iconfont icon-return"></i>
                <div>
                    <i class="iconfont icon-collect"></i>
                    <a href="javascript:;">
                        <i class="iconfont icon-share"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 主体内容 -->
        <div id="details-main" class="main-layout">
            <!-- 图文 -->
            <div class="main-wordspic">
                <p class="wordspic-pic">
                    <img src="./header-pic.png" alt="" class="main-img">
                </p>
                <p class="wordspic-title">上海-北京往返五订单ad啊哈开始的卡号卡计算的安康市开大就奥斯卡接电话卡较好的a日游哈师大哈法咖</p>
                <p class="wordspic-tags">
                    <span>赠接送机</span>
                    <span>赠当地游项目</span>
                </p>
                <p class="wordspic-counts">
                    <span>浏览24004</span>
                    <span>已售138份</span>
                </p>
            </div>
        </div>

        <!-- 底部工具条 -->
        <div id="details-toolbox" class="toolbox-layout">
           
        </div>
    </div>

       
</body>

</html>

相关代码：

html,
body {
    /* 把滚动条禁止，不要出现在html或者body身上 */
    overflow: hidden;  

    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}

相关代码：

@font-face {
    font-family: 'PingFangSCRegular';
    src: url('../fonts/PingFangSCRegular.ttf') format('truetype');
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
hr,
a,
em,
img,
strong,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
input,
button,
tr,
th,
td,
footer,
header,
nav {
    box-sizing: border-box;

    padding: 0;
    margin: 0;

    border: none;
    outline: none;

    font-family: 'PingFangSCRegular';
}

i,
em {
    font-style: normal;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

img {
    vertical-align: top;
}

相关代码：

[data-dpr='2'] body,
[data-dpr='2'] a,
[data-dpr='2'] i{
    font-size: 32px;
}
[data-dpr='3'] body,
[data-dpr='3'] a,
[data-dpr='3'] i{
    font-size: 48px;
}

html,
body {
    background-color: #fff;
}
/* 头部 */
.header-layout{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 1.35rem;
}
.header {
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 .5rem;
    transition: background 0.5s;
    /* background-color: red; */
}
.header-transition {
    background-color:rgba(25,196,138,0.9);
}

.header .icon-collect {
    margin-right: .5rem;
}

.header .iconfont {
    color: #fff;
}

/* main */
/* wordspic */
.main-wordspic {
    width: 100%;
    height: 10.25rem;
}
.wordspic-pic {
    width: 100%;
    height: 6.25rem;
}
.main-img {
    width: 100%;
    height: 100%;
}
.wordspic-title {
    padding: .4rem .5rem .2rem;
    font-size: .35rem;
    color: #333333;
    line-height: .6rem;
}
.wordspic-tags {
    padding: 0 .5rem .4rem;
}
.wordspic-tags span{
    font-size: .35rem;
    color: #5278A0;
    line-height: .4rem;
    padding: 0 .3rem 0;
    border: 1px solid #5278A0;
    border-radius: 1px;
}
.wordspic-tags span:first-child{
    margin-right: .3rem;
}

相关代码：

(function () {
    // 严格模式
    'use strict';

    // 以下这块是通用适配原理
    // dpr-> scale=1/dpr
    var docEl = document.documentElement;
    var viewportEl = document.querySelector('meta[name="viewport"]');
    var dpr = window.devicePixelRatio || 1;
    var maxWidth = 540;
    var 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;
    var 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 = 18.75;
        var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

        // console.log(viewWidth);

        if (maxWidth && (viewWidth / dpr > maxWidth)) {
            viewWidth = maxWidth * dpr;
        } else if (minWidth && (viewWidth / dpr < minWidth)) {
            viewWidth = minWidth * dpr;
        }

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

头都大了。怎么效果这么差

写回答

2回答