Html 如何在 CSS 中获取当前屏幕宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35393429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get current screen width in CSS?
提问by mongmong seesee
I use the following CSS code for formatting when screen width is less than 480px, and it works good.
当屏幕宽度小于 480px 时，我使用以下 CSS 代码进行格式化，并且效果很好。
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
I would like to get the current width for calculation to use zoomlike it follows:
我想获得用于计算的当前宽度，zoom如下所示：
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom: (current screen width)/(480);
}
}
回答by Heather92065
Use the CSS3 Viewport-percentage feature.
使用 CSS3 视口百分比功能。
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.
假设您希望主体宽度大小是浏览器视口的比率。我添加了一个边框，以便您可以在更改浏览器宽度或高度时看到主体调整大小。我使用了视口大小的 90% 的比例。
<!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>回答by Shubhasish Bhunia
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.
根据您的要求，我认为您希望将动态字段放入 CSS 文件中，但是这是不可能的，因为 CSS 是一种静态语言。但是，您可以使用 Angular 模拟这种行为。
Please refer to the below example. I'm here showing only one component.
请参考下面的例子。我在这里只展示一个组件。
login.component.html
登录.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
登录.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
登录名.component.css
.card {
max-width: 400px;
}
.card .card-body {
min-height: 150px;
}
.home {
background-color: rgba(171, 172, 173, 0.575);
}
