当屏幕宽度小于480px时,我使用以下CSS代码进行格式化,并且它运行良好.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
我想得到当前的计算宽度使用缩放,如下所示：
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom: (current screen width)/(480);
}
}
解决方法
使用CSS3视口百分比功能.
Viewport-Percentage Explanation
假设您希望主体宽度大小为浏览器视图端口的比率.我添加了一个边框,这样您就可以在更改浏览器宽度或高度时看到正文调整大小.我使用了视口大小的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>
