Ik gebruik de volgende CSS-code voor opmaak wanneer de schermbreedte kleiner is dan 480px, en het werkt goed.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Ik wil graag de huidige breedte voor berekening krijgen om zoomals volgt te gebruiken:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom: (current screen width)/(480);
}
}
Antwoord 1, autoriteit 100%
Gebruik de CSS3 Viewport-percentagefunctie.
Ervan uitgaande dat u wilt dat de grootte van de body een verhouding is van de kijkpoort van de browser. Ik heb een rand toegevoegd zodat je de grootte van de body kunt zien veranderen als je de breedte of hoogte van je browser wijzigt. Ik heb een verhouding van 90% van de view-port-grootte gebruikt.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styles</title>
<style>
@media screen and (min-width: 480px) {
body {
background-color: skyblue;
width: 90vw;
height: 90vh;
border: groove black;
}
div#main {
font-size: 3vw;
}
}
</style>
</head>
<body>
<div id="main">
Viewport-Percentage Test
</div>
</body>
</html>Antwoord 2, autoriteit 8%
dit kan worden bereikt met de css calc()operator
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom:calc(100% / 480);
}
}
Antwoord 3
Op basis van uw vereisten denk ik dat u dynamische velden in een CSS-bestand wilt plaatsen, maar dat is niet mogelijk omdat CSS een statische taal is. U kunt het gedrag echter simuleren door Angular te gebruiken.
Raadpleeg het onderstaande voorbeeld. Ik laat hier slechts één component zien.
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);
}
Antwoord 4
Net zoals we de css-eenheid “view-height(vh)” hebben, die ongeveer overeenkomt met de hoogte van de viewport, kun je ook view-width(vw)om het formaat van uw element dynamisch te wijzigen met betrekking tot de breedte van de viewport
d.w.z.
.random-div{
height: 100vh;
width: calc(100vw - 480px);
}
proost ??