IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

移动端与PC端适配

0

1

媒体查询

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important;
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important;
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important;
    }
}

@media only screen and (min-width: 768px){
    html {
        font-size: 48px !important;
    }
}

@media only screen and (min-width: 1024px){
    html {
        font-size: 64px !important;
    }
}
@media only screen and (min-width: 1440px){
    html {
        font-size: 90px !important;
    }
}

底部边框要设置为透明色能看得到主体的内容，而且不影响子元素布局，如何设置。

0

1

通用

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <footer class="footer-box">

        <a href="task7.html" class="one-more-game">
            <p>再来一局</p>
        </a>
        <a></a>
        <a href="task7.html" class="share-it">
            <p>上传分享</p>
        </a>

    </footer>

插入图片怎么填满父元素宽度且自适应?

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 .dropdown_ioc {
      background-image: url("2.png");
      background-color: rgb(41, 189, 224);
      display: none;
      position: absolute;
      bottom: -56px;
      width: 100%;
      height: 100%;
      background-size: cover;
      
  }

页面适配中单位的使用

0

1

通用

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

:root {
    font-size: 20px;
}

一个块元素内放块元素设置margin，margin为什么会跑到框外？

1

盒模型

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.two {
    width: 100%;
    height: 312px;
    font-size: 0;
    background: #29BDE0;
}
.victory {
    margin: 12px auto 0;
    width: 176px;
    height: 103px;
    background: url(../image/victory1.png) 66.5px 13px/43px 42px no-repeat; 
}
.victory2 {
    padding-top: 66px;
    width: 176px;
    height: 103px;
    font-size: 23px;
    color: #FFFFFF;
    text-align: center;
    background: url(../image/victory2.png) 0 0/176px 103px;
    box-sizing: border-box;
}

自适应布局中，字体大小应该怎么处理？

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  @media only screen and (max-width: 600px){
    .text-line {
      height: auto;
    }
  }

如何使雪碧图随着页面拉动而成比例变大

0

1

雪碧图

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
            <div class="item">
                <div class="name">水民</div>
                <div class="number">1号</div>
                <ul>
                    <li class="first"></li>
                    <li class="second"></li>
                    <li class="third"></li>
                    <li class="fourth"></li>
                </ul>
            </div>


css：
.first {
    width: 5vw;
    height: 5vw;
    background: url(../img/css_sprites.png) no-repeat 8% 50%/930%;
}