I use the following CSS code for formatting when screen width is less than 480px, and it works well.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
I would like to get the current width for calculation to use zoom
like it follows:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom: (current screen width)/(480);
}
}
Based on your requirement i think you are wanted to put dynamic fields in CSS file, however that is not possible as CSS is a static language. However you can simulate the behaviour by using Angular.
Please refer to the below example. I'm here showing only one component.
login.component.html
import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
cssProperty:any;
constructor(private sanitizer: DomSanitizer) {
console.log(window.innerWidth);
console.log(window.innerHeight);
this.cssProperty = 'position:fixed;top:' + Math.floor(window.innerHeight/3.5) + 'px;left:' + Math.floor(window.innerWidth/3) + 'px;';
this.cssProperty = this.sanitizer.bypassSecurityTrustStyle(this.cssProperty);
}
ngOnInit() {
}
}
login.component.ts
<div class="home">
<div class="container" [style]="cssProperty">
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">Please login</div>
<div class="card-footer">Login</div>
</div>
</div>
</div>
login.component.css
.card {
max-width: 400px;
}
.card .card-body {
min-height: 150px;
}
.home {
background-color: rgba(171, 172, 173, 0.575);
}
Use the CSS3 Viewport-percentage feature.
Viewport-Percentage Explanation
Assuming you want the body width size to be a ratio of the browser's view port. I added a border so you can see the body resize as you change your browser width or height. I used a ratio of 90% of the view-port size.
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<title>Styles</title>_x000D_
_x000D_
<style>_x000D_
@media screen and (min-width: 480px) {_x000D_
body {_x000D_
background-color: skyblue;_x000D_
width: 90vw;_x000D_
height: 90vh;_x000D_
border: groove black;_x000D_
}_x000D_
_x000D_
div#main {_x000D_
font-size: 3vw;_x000D_
}_x000D_
}_x000D_
</style>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
<div id="main">_x000D_
Viewport-Percentage Test_x000D_
</div>_x000D_
</body>_x000D_
</html>
_x000D_
this can be achieved with the css calc()
operator
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom:calc(100% / 480);
}
}
Source: Stackoverflow.com