How to use CSS media query aspect-ratio less
|
CSS media query has a very convenient aspect ratio, aspect-ratio, which can directly use width/height to adapt the page. The usage example is as follows:
// The aspect ratio is between (（320/50）+(728/90))/2 to fit 320*50 design style @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;
}
}
}
}
}
}
// The aspect ratio is greater than (（320/50）+(728/90))/2. The middle value of the two sizes is suitable for 728*90. Design style @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;
}
}
}
}Note three points: 1. The aspect ratio must be in the form of a ratio. You cannot write a decimal directly. Width/Height 2. Writing the aspect ratio directly in less will not work, because less will compile it into a decimal. You can add a ~ in front of the ratio to solve it perfectly. 3. Avoid style overlays. It is best to write large proportions of media queries at the end. Summarize The above is the usage of CSS media query aspect-ratio less introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: How to use Maxwell to synchronize MySQL data in real time
>>: Is it true that the simpler the web design style, the better?
Recommend
How to manage multiple projects on CentOS SVN server
One demand Generally speaking, a company has mult...
What you need to know about msyql transaction isolation
What is a transaction? A transaction is a logical...
Detailed steps to install and uninstall Apache (httpd) service on centos 7
uninstall First, confirm whether it has been inst...
Docker container time zone error issue
Table of contents background question Problem ana...
Mac installation mysqlclient process analysis
Try installing via pip in a virtual environment: ...
Mysql8.0 uses window functions to solve sorting problems
Introduction to MySQL Window Functions MySQL has ...
Use of filter() array filter in JS
Table of contents 1. Introduction 2. Introduction...
Analysis and solution of the reasons why HTML external reference CSS files are not effective
As a front-end novice, I tinkered with the front-e...
Detailed explanation of the difference and usage of quotes and backticks in MySQL
Preface So I wrote this blog. This blog also reco...
Analysis of Linux Zabbix custom monitoring and alarm implementation process
Target Display one of the data in the iostat comm...
Introduction to cloud native technology kubernetes (K8S)
Table of contents 01 What is Kubernetes? 02 The d...
HTML cellpadding and cellspacing attributes explained in pictures
Cell -- the content of the table Cell margin (tabl...
Detailed explanation of MySQL covering index
concept If the index contains all the data that m...
Solution to 2059 error when connecting Navicat to MySQL
Recently, when I was learning Django, I needed to...
MySQL 5.6.15 installation and configuration method graphic tutorial under Windows 8
MySQL is a database that I like very much. Today,...