经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » LESS » 查看文章
css 媒体查询 aspect-ratio less 使用方法_CSS教程_CSS
来源：jb51　　时间：2019/8/7 10:27:46　　对本文有异议

css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配   使用样例如下：
 

  1. // 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图样式
  2. @media screen and (min-aspect-ratio: ~"249/50") and (max-aspect-ratio: ~"29/4"){
  3.   @base: 320;
  4.   @convert: 375/@base;
  5.   .container{
  6.     width: 100vw;
  7.     height:100%;
  8.     position:relative;
  9.     display:flex;
  10.     flex-flow:row nowrap;
  11.     align-items: center;
  12.     .info-icon-box{
  13.       .width(46*@convert);
  14.       .height(46*@convert);
  15.       .border-radius(10*@convert);
  16.       .border(1@convert,#e3e3e3);
  17.       overflow: hidden;
  18.       .margin-left(10*@convert);
  19.       .min-width(46*@convert);
  20.       .max-width(46*@convert);
  21.       flex-grow: 0;
  22.       img {
  23.         width: 100%;
  24.         height: 100%;
  25.         .border-radius(10);
  26.         vertical-align: top;
  27.       }
  28.     }
  29.     .info-other{
  30.       flex-grow: 1;
  31.       display:flex;
  32.       flex-flow:column nowrap;
  33.       overflow: hidden;
  34.       height:100%;
  35.       .margin-left(10*@convert);
  36.       .info-wrap.roll-box{
  37.         height:200%;
  38.       }
  39.       .info-box{
  40.         width:100%;
  41.         height:50%;
  42.         flex-grow: 1;
  43.         display:flex;
  44.         flex-flow:row nowrap;
  45.         align-items: center;
  46.         .info{
  47.           width:48vw;
  48.           height: 100%;
  49.           flex-grow: 1;
  50.           display: flex;
  51.           //align-items: center;
  52.           flex-direction:column;
  53.           justify-content: center;
  54.           .info-title{
  55.             font-weight:bold;
  56.             .font-size(16*@convert);
  57.             .line-height(26*@convert);
  58.             color: #484848 ;
  59.             .margin-bottom(4*@convert);
  60.           }
  61.           .info-other-rate {
  62.             display: flex;
  63.             align-items: center;
  64.             justify-content: flex-start;
  65.             position:relative;
  66.             z-index:2;
  67.             .star-number{
  68.               .font-size(15*@convert);
  69.               color:#4a4a4a;
  70.               .padding-right(5*@convert);
  71.             }
  72.             .star-evaluate {
  73.               position: relative;
  74.               .width(100*@convert);
  75.               .height(16*@convert);
  76.               background: url("../../assets/images/star_gray.png") no-repeat 0 0;
  77.               background-size: cover;
  78.               overflow: hidden;
  79.               .star {
  80.                 position: absolute;
  81.                 top: 0;
  82.                 left: 0;
  83.                 display: inline-block;
  84.                 .height(16*@convert);
  85.                 background: url("../../assets/images/star.png") no-repeat 0 0;
  86.                 background-size: cover;
  87.                 overflow: hidden;
  88.               }
  89.               .star-1 {
  90.                 .width(8*@convert);
  91.               }
  92.               .star-2 {
  93.                 .width(21*@convert);
  94.               }
  95.               .star-3 {
  96.                 .width(29*@convert);
  97.               }
  98.               .star-4 {
  99.                 .width(42*@convert);
  100.               }
  101.               .star-5 {
  102.                 .width(50*@convert);
  103.               }
  104.               .star-6 {
  105.                 .width(63*@convert);
  106.               }
  107.               .star-7 {
  108.                 .width(71*@convert);
  109.               }
  110.               .star-8 {
  111.                 .width(84*@convert);
  112.               }
  113.               .star-9 {
  114.                 .width(92*@convert);
  115.               }
  116.               .star-10 {
  117.                 .width(100*@convert);
  118.               }
  119.             }
  120.           }
  121.           .info-desc-box{
  122.             display: none;
  123.           }
  124.         }
  125.         .info-install{
  126.           .min-width(66*@convert);
  127.           width:fit-content;
  128.           .height(40*@convert);
  129.           .line-height(40*@convert);
  130.           box-sizing: border-box;
  131.           .padding-all(0,4*@convert,0,4*@convert);
  132.           .font-size(14*@convert);
  133.           color:#fff;
  134.           text-align: center;
  135.           .margin-right(20*@convert);
  136.           background:url("../../assets/images/btn_download_short_shadow.png") no-repeat 0 0;
  137.           background-size:100% 100%;
  138.         }
  139.       }
  140.       .info-desc-box {
  141.         width:100%;
  142.         height:50%;
  143.         .padding-all(4*@convert, 26*@convert, 4*@convert, 0);
  144.         box-sizing: border-box;
  145.         overflow: hidden;
  146.         .info-desc{
  147.           .font-size(14*@convert);
  148.           .line-height(20*@convert);
  149.           color: #484848 ;
  150.           .info-other-rate{
  151.             display: none;
  152.           }
  153.         }
  154.       }
  155.     }
  156.   }
  157. }
  158. // 宽高比大于(（320/50）+(728/90))/2 两个尺寸中间值 适配 728*90 设计图样式
  159. @media screen and (min-aspect-ratio: ~"29/4"){
  160.   @base: 728;
  161.   @convert: 375/@base;
  162.   .container{
  163.     width: 100vw;
  164.     height:100%;
  165.     position:relative;
  166.     display:flex;
  167.     flex-flow:row nowrap;
  168.     align-items: center;
  169.     .info-icon-box{
  170.       .width(88*@convert);
  171.       .height(88*@convert);
  172.       .border-radius(10*@convert);
  173.       .border(1@convert,#e3e3e3);
  174.       overflow: hidden;
  175.       .margin-left(10*@convert);
  176.       .min-width(88*@convert);
  177.       .max-width(88*@convert);
  178.       flex-grow: 0;
  179.       img {
  180.         width: 100%;
  181.         height: 100%;
  182.         .border-radius(10);
  183.         vertical-align: top;
  184.       }
  185.     }
  186.     .info-other{
  187.       flex-grow: 1;
  188.       display:flex;
  189.       flex-flow:column nowrap;
  190.       overflow: hidden;
  191.       height:100%;
  192.       .margin-left(10*@convert);
  193.       .info-wrap{
  194.         height:100%;
  195.         .info-box{
  196.           width:100%;
  197.           height:100%;
  198.           flex-grow: 1;
  199.           display:flex;
  200.           flex-flow:row nowrap;
  201.           align-items: center;
  202.           .info{
  203.             width:48vw;
  204.             height: 100%;
  205.             flex-grow: 1;
  206.             display: flex;
  207.             flex-direction:column;
  208.             justify-content: center;
  209.             .margin-right(20*@convert);
  210.             .info-title-rate{
  211.               display: flex;
  212.               flex-flow: row nowrap;
  213.             }
  214.             .info-title{
  215.               font-weight:bold;
  216.               .font-size(24*@convert);
  217.               .line-height(37*@convert);
  218.               color: #484848 ;
  219.               .margin-bottom(4*@convert);
  220.             }
  221.             .info-other-rate {
  222.               display: flex;
  223.               align-items: center;
  224.               justify-content: flex-start;
  225.               position:relative;
  226.               z-index:2;
  227.               .star-number{
  228.                 .font-size(15*@convert);
  229.                 color:#4a4a4a;
  230.                 .padding-right(5*@convert);
  231.               }
  232.               .star-evaluate {
  233.                 position: relative;
  234.                 .width(100*@convert);
  235.                 .height(16*@convert);
  236.                 background: url("../../assets/images/star_gray.png") no-repeat 0 0;
  237.                 background-size: cover;
  238.                 overflow: hidden;
  239.                 .star {
  240.                   position: absolute;
  241.                   top: 0;
  242.                   left: 0;
  243.                   display: inline-block;
  244.                   .height(16*@convert);
  245.                   background: url("../../assets/images/star.png") no-repeat 0 0;
  246.                   background-size: cover;
  247.                   overflow: hidden;
  248.                 }
  249.                 .star-1 {
  250.                   .width(8*@convert);
  251.                 }
  252.                 .star-2 {
  253.                   .width(21*@convert);
  254.                 }
  255.                 .star-3 {
  256.                   .width(29*@convert);
  257.                 }
  258.                 .star-4 {
  259.                   .width(42*@convert);
  260.                 }
  261.                 .star-5 {
  262.                   .width(50*@convert);
  263.                 }
  264.                 .star-6 {
  265.                   .width(63*@convert);
  266.                 }
  267.                 .star-7 {
  268.                   .width(71*@convert);
  269.                 }
  270.                 .star-8 {
  271.                   .width(84*@convert);
  272.                 }
  273.                 .star-9 {
  274.                   .width(92*@convert);
  275.                 }
  276.                 .star-10 {
  277.                   .width(100*@convert);
  278.                 }
  279.               }
  280.             }
  281.             .info-desc-box {
  282.               width:100%;
  283.               .height(20*@convert);
  284.               .padding-all(4*@convert, 26*@convert, 4*@convert, 0);
  285.               box-sizing: border-box;
  286.               overflow: hidden;
  287.               .info-desc{
  288.                 .font-size(14*@convert);
  289.                 .line-height(20*@convert);
  290.                 color: #484848 ;
  291.                 .info-other-rate{
  292.                   display: none;
  293.                 }
  294.               }
  295.               .roll-box{
  296.                 height:auto;
  297.               }
  298.             }
  299.           }
  300.           .info-install{
  301.             .min-width(66*@convert);
  302.             width:fit-content;
  303.             .height(40*@convert);
  304.             .line-height(40*@convert);
  305.             box-sizing: border-box;
  306.             .padding-all(0,4*@convert,0,4*@convert);
  307.             .font-size(14*@convert);
  308.             color:#fff;
  309.             text-align: center;
  310.             .margin-right(20*@convert);
  311.             background:url("../../assets/images/btn_download_short_shadow.png") no-repeat 0 0;
  312.             background-size:100% 100%;
  313.           }
  314.         }
  315.       }
  316.       &.info-desc-box {
  317.         display: none;
  318.       }
  319.     }
  320.   }
  321. }

注意三点：

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

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

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

总结

以上所述是小编给大家介绍的css 媒体查询 aspect-ratio less 使用方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

LESS热门文章

  • 手把手，完整的从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
  • Serverless 与容器决战在即？有了弹性伸缩就不一样了
  • Azure Synapse Analytics Serverless
  • 使用 Serverless Wordpress 快速建站，只需三步
  • 发布更新｜腾讯云 Serverless 产品动态 20210125
  • Linux中使用命令more,less,cat查看文件内容
  • 如何基于 K8S 多租能力构建 Serverless Container
  • Serverless 如何应对 K8s 在离线场景下的资源供给诉求
  • 腾讯云 Serverless 应用初探 —— 印象笔记
  • 再见，本地环境！腾讯云全球首发：Serverless 在线远程调试

    • LESS推荐文章

  • Serverless无服务应用架构纵横谈2：边缘计算激战正酣
  • Util应用框架基础(六) - 日志记录(四) - 写入 Exceptionless
  • Serverless Streaming：毫秒级流式大文件处理探秘
  • 手把手，完整的从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
  • 聚焦当下，重构未来：Serverless 全球视野碰撞（上）
  • Azure Synapse Analytics Serverless
  • 开发者：Serverless 从懵逼到实战
  • [译] Serverless 是一种思想状态！
  • 收益 or 挑战？Serverless 究竟给前端带来了什么
  • Knative 实战：三步走！基于 Knative Serverless 技术实现一个短网址服务

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号