css 媒体查询 aspect-ratio less 使用方法_F11 - 专业站长和开发者的学习网站

分享到

css 媒体查询 aspect-ratio less 使用方法

css 来源：互联网搜集作者：秩名发布时间：2019-08-08 08:59:48 人浏览

摘要

本篇文章介绍css 媒体查询 aspect-ratio less 使用方法 css媒体查询有一个宽高比很方便，aspect-ratio ，可以直接使用宽/高来进行页面适配使用样例如下： // 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内适配 320*50 设计图样式@media screen an

本篇文章介绍css 媒体查询 aspect-ratio less 使用方法

css媒体查询有一个宽高比很方便，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-1 {
                .width(8*@convert);
              }
              .star-2 {
                .width(21*@convert);
              }
              .star-3 {
                .width(29*@convert);
              }
              .star-4 {
                .width(42*@convert);
              }
              .star-5 {
                .width(50*@convert);
              }
              .star-6 {
                .width(63*@convert);
              }
              .star-7 {
                .width(71*@convert);
              }
              .star-8 {
                .width(84*@convert);
              }
              .star-9 {
                .width(92*@convert);
              }
              .star-10 {
                .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-1 {
                  .width(8*@convert);
                }
                .star-2 {
                  .width(21*@convert);
                }
                .star-3 {
                  .width(29*@convert);
                }
                .star-4 {
                  .width(42*@convert);
                }
                .star-5 {
                  .width(50*@convert);
                }
                .star-6 {
                  .width(63*@convert);
                }
                .star-7 {
                  .width(71*@convert);
                }
                .star-8 {
                  .width(84*@convert);
                }
                .star-9 {
                  .width(92*@convert);
                }
                .star-10 {
                  .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;
      }
    }
  }
}

注意三点：

1、宽高比一定是比值的形式，不能直接写小数，宽/高

2、在less中直接写宽高比也不会生效，因为less会编译成小数，可以在比值前面加一个 ~ 完美解决

3、避免样式覆盖，最好把大比例的媒体查询写在后面

您可能感兴趣的文章 :

原文链接 : https://www.jb51.net/css/686861.html

Tag : css(220)less(2)

CSS元素定位之通过元素的标签或者元素的id、cl

大部分人在使用selenium定位元素时，用的是xpath元素定位方式，因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观，更好
微信小程序纯CSS实现无限弹幕滚动效果

啥也不说，先上效果图实现背景产品：我们需要一个弹幕滚动效果，类似于微博热搜那种实时评论，但是我们的数据是固定的20条，你让他
使用CSS构建强大且酷炫的粒子动画效果

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。当然，不使用 HTML + CSS 的主要
flex:1的详细介绍

简单的来说一下在别人问你这个问题的时候怎么来回答它前端新人，如有错误求大佬指出~求教???? 情景复现大佬提问：你知道flex: 1;的更深
新的CSS伪类函数 :is 和 :where()示例介绍

在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对标题中的 b 标签进行颜色调整，我
纯CSS打字动画的实现方法

在一些技术网站中，经常会看到这样一种展示效果：逐个显示一段文本中的字符，模拟出一种打字的效果。通过这种方式可以显著地提升网
实现el-form每行显示两列底部按钮居中效果的教程

el-form 每行显示两列，底部按钮居中问题：以前的解决办法是：el-col,el-row。但是这里只有一个el-form-item的label数据是已知的，其余项都是循
CSS实现六边形的图片效果的代码

前言在CodePen上看到一个有意思的效果: 这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧实现思路
CSS浮动引起的高度塌陷问题的详细介绍

正常页面布局 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 style *{ margin:0; padding: 0; } .content{ width:400px; border:1px solid #000; } .box{ width:200px;
css中:last-child不生效的解决方法介绍

在产品需求中，总有对第一个或者最后一个同类元素进行特殊的样式处理。如果使用js来判断哪个是第一个、最后一个也并不是不可以。但