css 新闻媒体查寻 aspect

日期:2021-02-28 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

css新闻媒体查寻有1个 宽高比很便捷,aspect-ratio ,能够立即应用宽/高 来开展网页页面兼容   应用样比如下:
 

// 宽高比在((320/50)+(728/90))/2 两个规格正中间值之内 兼容 320*50 设计方案图款式
@media screen and (min-aspect-ratio: ~"249/50") and (max-aspect-ratio: ~"29/4"){
  @base: 320;
  @convert: 375/@base;
  .container{
    width: 100vw;
    height:100%;
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    .info-icon-box{
      .width(46*@convert);
      .height(46*@convert);
      .border-radius(10*@convert);
      .border(1@convert,#e3e3e3);
      overflow: hidden;
      .margin-left(10*@convert);
      .min-width(46*@convert);
      .max-width(46*@convert);
      flex-grow: 0;
      img {
        width: 100%;
        height: 100%;
        .border-radius(10);
        vertical-align: top;
      }
    }
    .info-other{
      flex-grow: 1;
      display:flex;
      flex-flow:column nowrap;
      overflow: hidden;
      height:100%;
      .margin-left(10*@convert);
      .info-wrap.roll-box{
        height:200%;
      }
      .info-box{
        width:100%;
        height:50%;
        flex-grow: 1;
        display:flex;
        flex-flow:row nowrap;
        align-items: center;
        .info{
          width:48vw;
          height: 100%;
          flex-grow: 1;
          display: flex;
          //align-items: center;
          flex-direction:column;
          justify-content: center;
          .info-title{
            font-weight:bold;
            .font-size(16*@convert);
            .line-height(26*@convert);
            color: #484848 ;
            .margin-bottom(4*@convert);
          }
          .info-other-rate {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position:relative;
            z-index:2;
            .star-number{
              .font-size(15*@convert);
              color:#4a4a4a;
              .padding-right(5*@convert);
            }
            .star-evaluate {
              position: relative;
              .width(100*@convert);
              .height(16*@convert);
              background: url("../../assets/images/star_gray.png") no-repeat 0 0;
              background-size: cover;
              overflow: hidden;
              .star {
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                .height(16*@convert);
                background: url("../../assets/images/star.png") no-repeat 0 0;
                background-size: cover;
                overflow: hidden;
              }
              .star⑴ {
                .width(8*@convert);
              }
              .star⑵ {
                .width(21*@convert);
              }
              .star⑶ {
                .width(29*@convert);
              }
              .star⑷ {
                .width(42*@convert);
              }
              .star⑸ {
                .width(50*@convert);
              }
              .star⑹ {
                .width(63*@convert);
              }
              .star⑺ {
                .width(71*@convert);
              }
              .star⑻ {
                .width(84*@convert);
              }
              .star⑼ {
                .width(92*@convert);
              }
              .star⑴0 {
                .width(100*@convert);
              }
            }
          }
          .info-desc-box{
            display: none;
          }
        }
        .info-install{
          .min-width(66*@convert);
          width:fit-content;
          .height(40*@convert);
          .line-height(40*@convert);
          box-sizing: border-box;
          .padding-all(0,4*@convert,0,4*@convert);
          .font-size(14*@convert);
          color:#fff;
          text-align: center;
          .margin-right(20*@convert);
          background:url("../../assets/images/btn_download_short_shadow.png") no-repeat 0 0;
          background-size:100% 100%;
        }
      }
      .info-desc-box {
        width:100%;
        height:50%;
        .padding-all(4*@convert, 26*@convert, 4*@convert, 0);
        box-sizing: border-box;
        overflow: hidden;
        .info-desc{
          .font-size(14*@convert);
          .line-height(20*@convert);
          color: #484848 ;
          .info-other-rate{
            display: none;
          }
        }
      }
    }
  }
}
// 宽高比超过((320/50)+(728/90))/2 两个规格正中间值 兼容 728*90 设计方案图款式
@media screen and (min-aspect-ratio: ~"29/4"){
  @base: 728;
  @convert: 375/@base;
  .container{
    width: 100vw;
    height:100%;
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    .info-icon-box{
      .width(88*@convert);
      .height(88*@convert);
      .border-radius(10*@convert);
      .border(1@convert,#e3e3e3);
      overflow: hidden;
      .margin-left(10*@convert);
      .min-width(88*@convert);
      .max-width(88*@convert);
      flex-grow: 0;
      img {
        width: 100%;
        height: 100%;
        .border-radius(10);
        vertical-align: top;
      }
    }
    .info-other{
      flex-grow: 1;
      display:flex;
      flex-flow:column nowrap;
      overflow: hidden;
      height:100%;
      .margin-left(10*@convert);
      .info-wrap{
        height:100%;
        .info-box{
          width:100%;
          height:100%;
          flex-grow: 1;
          display:flex;
          flex-flow:row nowrap;
          align-items: center;
          .info{
            width:48vw;
            height: 100%;
            flex-grow: 1;
            display: flex;
            flex-direction:column;
            justify-content: center;
            .margin-right(20*@convert);
            .info-title-rate{
              display: flex;
              flex-flow: row nowrap;
            }
            .info-title{
              font-weight:bold;
              .font-size(24*@convert);
              .line-height(37*@convert);
              color: #484848 ;
              .margin-bottom(4*@convert);
            }
            .info-other-rate {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              position:relative;
              z-index:2;
              .star-number{
                .font-size(15*@convert);
                color:#4a4a4a;
                .padding-right(5*@convert);
              }
              .star-evaluate {
                position: relative;
                .width(100*@convert);
                .height(16*@convert);
                background: url("../../assets/images/star_gray.png") no-repeat 0 0;
                background-size: cover;
                overflow: hidden;
                .star {
                  position: absolute;
                  top: 0;
                  left: 0;
                  display: inline-block;
                  .height(16*@convert);
                  background: url("../../assets/images/star.png") no-repeat 0 0;
                  background-size: cover;
                  overflow: hidden;
                }
                .star⑴ {
                  .width(8*@convert);
                }
                .star⑵ {
                  .width(21*@convert);
                }
                .star⑶ {
                  .width(29*@convert);
                }
                .star⑷ {
                  .width(42*@convert);
                }
                .star⑸ {
                  .width(50*@convert);
                }
                .star⑹ {
                  .width(63*@convert);
                }
                .star⑺ {
                  .width(71*@convert);
                }
                .star⑻ {
                  .width(84*@convert);
                }
                .star⑼ {
                  .width(92*@convert);
                }
                .star⑴0 {
                  .width(100*@convert);
                }
              }
            }
            .info-desc-box {
              width:100%;
              .height(20*@convert);
              .padding-all(4*@convert, 26*@convert, 4*@convert, 0);
              box-sizing: border-box;
              overflow: hidden;
              .info-desc{
                .font-size(14*@convert);
                .line-height(20*@convert);
                color: #484848 ;
                .info-other-rate{
                  display: none;
                }
              }
              .roll-box{
                height:auto;
              }
            }
          }
          .info-install{
            .min-width(66*@convert);
            width:fit-content;
            .height(40*@convert);
            .line-height(40*@convert);
            box-sizing: border-box;
            .padding-all(0,4*@convert,0,4*@convert);
            .font-size(14*@convert);
            color:#fff;
            text-align: center;
            .margin-right(20*@convert);
            background:url("../../assets/images/btn_download_short_shadow.png") no-repeat 0 0;
            background-size:100% 100%;
          }
        }
      }
      &.info-desc-box {
        display: none;
      }
    }
  }
} 

留意3点:

1、宽高比1定是比值的方式,不可以立即写小数,宽/高

2、在less中立即写宽高比也不容易起效,由于less会编译程序成小数,能够在比值前面加1个  ~   完善处理

3、防止款式遮盖,最好是把大占比的新闻媒体查寻写在后边
 

总结

以上所述是网编给大伙儿详细介绍的css 新闻媒体查寻 aspect-ratio less 应用方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

上一篇:应用css画1个文档提交图案设计 返回下一篇:没有了