适配那些事

最新推荐文章于 2024-11-16 00:27:13 发布

xhtlyz

最新推荐文章于 2024-11-16 00:27:13 发布

阅读量91

点赞数

文章标签： html javascript html5

本文链接：https://blog.csdn.net/xhtlyz/article/details/121952923

版权

pc端适配

<script>
    // 完成rem适配（动态根据页面宽度设置rem的基准值-->html标签font-size）
(function () {
  // 1. 页面初始化 获取当前页面的宽度  约定页面宽度除以80  计算rem的基准值  设置html标签
  var setFont = function () {
    var html = document.querySelector('html')  // document.documentElement  获取文档元素html标签
    // 3. 适配区间  1024-1920 之间
    var width = html.clientWidth
    if (width < 1024) {
      width = 1024
    }
    if (width > 1920) {
      width = 1920
    }
    var fontSize = width / 80 + 'px'
    html.style.fontSize = fontSize
  }
  setFont()
  // 2. 在页面尺寸改变的时候 同上
  window.onresize = function () {
    setFont()
  }
})();
</script>

移动端适配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
		    font-size: 16px;
		}
		 
		@media screen and (min-width: 375px) {
		    html {
		        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
		        font-size: calc(100% + 2 * (100vw - 375px) / 39);
		        font-size: calc(16px + 2 * (100vw - 375px) / 39);
		    }
		}
		@media screen and (min-width: 414px) {
		    html {
		        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
		        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
		        font-size: calc(18px + 4 * (100vw - 414px) / 586);
		    }
		}
		@media screen and (min-width: 600px) {
		    html {
		        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
		        font-size: calc(125% + 4 * (100vw - 600px) / 400);
		        font-size: calc(20px + 4 * (100vw - 600px) / 400);
		    }
		}
		@media screen and (min-width: 1000px) {
		    html {
		        /* 1000px往后是每100像素0.5px增加 */
		        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
		        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
		    }
        }
    .big {                                 
        width: 100% ;
        height: 300px /* 500/100 */;
        /* min-width: 13.333rem; */
        background-color: forestgreen;
        display: flex;
    } 
    .l{
        /* float: left; */
        width: 4.167rem;
        height: 8.333rem;
        background-color: bisque;
        font-size: 0.583rem;

    }
    .r{
        position: relative;
        margin-left: 30px;
        /* float: right; */
        width: 4.167rem;
        height: 8.333rem;
        background-color: bisque;
    }
    span {
        position: absolute;
        top: 0.48rem;
        right: 0.8rem;
    }
    .bottom {
        width: 100px;
        background-color: brown;
        /* display: flex; */
    }
    .q1 {
        float: left;
        width: 2.667rem;
        height: 2.667rem;
        background-color: blue;
    }
    .q2 {
        float: right;
        width: 2.667rem;
        height: 2.667rem;
        margin-left: 0.8rem;

        background-color: blueviolet;
    }
    </style>
</head>
<body>
    <div class="big">
        <div>ddddd</div>
        <div class="l">
            <!-- <h1>wwwwwww</h1> -->
        </div>
        <div class="r">
            <span>2</span>
        </div>
    </div>
</body>
</html>