pc端+移动端页面自适应的写法

最新推荐文章于 2023-04-14 15:04:05 发布

BiangBaing

最新推荐文章于 2023-04-14 15:04:05 发布

阅读量655

点赞数 1

文章标签： css html html5

原文链接：https://blog.csdn.net/BubbleABC/article/details/120533745

版权

转载：钟Bubble
https://blog.csdn.net/BubbleABC/article/details/120533745

结尾有彩蛋
index.html页面内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />

    <meta name="format-detection" content="telephone=no" />
    <meta name="applicable-device" content="mobile" />
    <title>课程</title>
    <!--CSS-->
    <link rel="stylesheet" href="./css/course.css" />
  </head>

  <body class="all_content">
    <div class="video">
      <video
        id="video"
        src="donghua.mp4"
        controls="true"
        preload="auto"
        webkit-playsinline="true"
        playsinline="true"
        x-webkit-airplay="allow"
        x5-video-player-type="h5"
        style="object-fit: fill"
        controlslist="nodownload noremoteplayback"
        disablePictureInPicture="true"
        playsinline
        webkit-playsinline
      ></video>
    </div>
    <div class="text_content">
      <div class="title">详情介绍</div>
      <div class="line"></div>
      <div class="course_title">如何应对职业倦怠</div>
      <div class="fu_title">不想上班？你需要改变一下状态！</div>
      <div class="lecturer">
        <text>讲师：张煜宵</text>
        <text>已完结/共1节</text>
      </div>
    </div>
    <div class="image">
      <img src="./images/123.jpg" alt="" />
    </div>
  </body>
</html>

————————————————
版权声明：本文为CSDN博主「钟Bubble」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/BubbleABC/article/details/120533745

index.css页面内容

@media only screen and (min-width: 750px) {
  /* html {
    font-size: 62.5% (10/16 * 100%);
  } */

  .all_content {
    width: 100%;
    margin: 0;
  }
  .video {
    /* height: 210.94px; */
    height: 421.88px;
    background-color: black;
  }
  #video {
    width: 100%;
    height: 100%;
  }
  .text_content {
    margin-top: 22.13px;
    /* background-color: brown; */
    font-size: 40px;
    color: #333333;
    font-weight: 500;
    padding-left: 36px;
  }
  .title {
    margin-bottom: 20px;
  }
  .line {
    width: 678px;
    height: 9px;
    opacity: 0.24;
    /* background: #d8d8d8; */
    background: #d8d8d8;
    border-radius: 5.5px;
    margin-right: 36px;
  }
  .course_title {
    margin-top: 13px;
    font-size: 46px;
    color: #333333;
    font-weight: 500;
  }
  .fu_title {
    font-family: SourceHanSansSC-Regular;
    font-size: 28px;
    color: #9c9c9c;
    letter-spacing: -0.35px;
    line-height: 48px;
    font-weight: 400;
    margin: 12.68px 0 16.32px 0;
  }
  .lecturer {
    display: flex;
    justify-content: space-between;
    margin-right: 42px;
    font-family: SourceHanSansSC-Regular;
    font-size: 26px;
    color: #9c9c9c;
    letter-spacing: -0.32px;
    font-weight: 400;
  }
  .image {
    width: 100%;
  }
  .image img{
    width: 100%;
  }
}

@media only screen and (max-width: 750px) {

  /* html {
      font-size: 62.5% (10/16 * 100%);
    } */
    .all_content {
      width: 100%;
      margin: 0;
    }
    .video {
      /* height: 28.125vw; */
      height: 56.251vw;
      background-color: black;
    }
    #video {
      width: 100%;
      height: 100%;
    }
    .text_content {
      margin-top: 2.951vw;
      /* background-color: brown; */
      font-size: 5.333vw;
      color: #333333;
      font-weight: 500;
      padding-left: 4.800vw;
    }
    .title {
      margin-bottom: 2.667vw;
    }
    .line {
      width: 90.400vw;
      height: 1.200vw;
      opacity: 0.24;
      /* background: #d8d8d8; */
      background: #d8d8d8;
      border-radius: 0.733vw;
      margin-right: 4.800vw;
    }
    .course_title {
      margin-top: 1.733vw;
      font-size: 6.133vw;
      color: #333333;
      font-weight: 500;
    }
    .fu_title {
      font-family: SourceHanSansSC-Regular;
      font-size: 3.733vw;
      color: #9c9c9c;
      letter-spacing: -0.047vw;
      line-height: 6.400vw;
      font-weight: 400;
      margin: 1.691vw 0 2.176vw 0;
    }
    .lecturer {
      display: flex;
      justify-content: space-between;
      margin-right: 5.600vw;
      font-family: SourceHanSansSC-Regular;
      font-size: 3.467vw;
      color: #9c9c9c;
      letter-spacing: -0.043vw;
      font-weight: 400;
    }
    .image {
      width: 100%;
    }
    .image img{
      width: 100%;
    }
}
————————————————
版权声明：本文为CSDN博主「钟Bubble」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/BubbleABC/article/details/120533745

总结：（根据设计稿大小将样式分别写在min-width: XXXpx 和 max-width: XXXpx的媒体查询里）
由于我的设计稿是750 所以我用的媒体查询是：
@media only screen and (min-width: 750px) {} （pc端）
@media only screen and (max-width: 750px) {}（移动端）
注意我的pc端用的是px 移动端用的是vw
当然也可以用rem或者其他方法根据自己的习惯
我用的有一个px转换vw样式的一个html：（暂时给他取名 aa.html 吧）
aa.html页面内容

<!DOCTYPE html>
<html>  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>代码计算器</title>
    <style>
        
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>设计稿设置</legend>
            <label>宽：<input type="text" value="375" id="width" /></label><br />
            <label>高：<input type="text" value="667" id="height" /></label><br />
            <button id="setUI">确定</button>
        </fieldset>
        <fieldset>
            <legend>源代码</legend>
            <textarea autofocus name="origin_code" id="origin_code" cols="100" rows="10"></textarea><br />
            <button id="trans">转换</button>
            <label><input type="checkbox" checked id="autoCopy" />自动复制</label>
        </fieldset>
        <fieldset>
            <legend>转换后代码</legend>
            <textarea name="code" id="code" cols="100" rows="10"></textarea><br />
            <button id="copy">复制</button>
            <button id="reset">清空</button>
        </fieldset>
    </form>

    <script>
        function getId(id){
            return document.getElementById(id);
        }
        function getName(name){
            return document.getElementsByName(name)[0];
        }
        var  widthIpt = getId("width");
        var  heightIpt = getId("height");
        var setUIBtn = getId("setUI");

        var origin_code_input = getName("origin_code");
        var transBtn = getId("trans");
        var autoCopyInput = getId("autoCopy");

        var code_input = getName("code");
        var copyBtn = getId("copy");
        var reset = getId("reset");


        var width,height;
        function setUI(){
            width = +widthIpt.value;
            height = +heightIpt.value;
        }
        setUI();

        setUIBtn.onclick = function(e){
            e.preventDefault();
            setUI();
        }

        function copy(text) {
            var textareaEl = document.createElement('textarea');
            textareaEl.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
            // input.setAttribute('value', text);
            textareaEl.value = text;
            document.body.appendChild(textareaEl);
            // input.setSelectionRange(0, 9999);
            textareaEl.select();
            var res = document.execCommand('copy');
            document.body.removeChild(textareaEl);
            console.log("复制成功");
            return res;
        }

        function trans(originCode){
            console.log(originCode);
            var code;
            var reg = /(\d+(\.\d+)?)px/gi;
            code = originCode.replace(reg, function(px,num){
                // 100vw = width px   ->   1px = 100vw/width
                // console.log(px, num);
                return (num * 100 / width).toFixed(3) + "vw";
            });

            return code;
        }

        transBtn.onclick = function(e){
            e.preventDefault();
            var res = trans(origin_code_input.value);
            code_input.value = res;
            if(autoCopy){
                copyAndReset(res);
            }
        }
        origin_code_input.onkeypress = function (e){ 
            if(e.keyCode == 13){
                var res = trans(origin_code_input.value);
                code_input.value = res;
                console.log(autoCopy);
                if(autoCopy){
                    copyAndReset(res);
                }
            }
        }
        
        var autoCopy = autoCopyInput.checked;
        autoCopyInput.onchange = function (e){
            autoCopy = autoCopyInput.checked;
        }

        function copyAndReset(code){
            copy(code);
            origin_code_input.value = "";
        }
        
        copyBtn.onclick = function(e){
            e.preventDefault();
            copyAndReset(code_input.value);
        }

        reset.onclick = function (e){
            e.preventDefault();
            code_input.value = "";
            origin_code_input.value = "";
        }
    </script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「钟Bubble」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/BubbleABC/article/details/120533745

BiangBaing

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
pc端+移动端页面自适应的写法

转载：钟Bubblehttps://blog.csdn.net/BubbleABC/article/details/120533745结尾有彩蛋index.html页面内容<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.
复制链接

扫一扫