当屏幕宽度小于480px时,我使用以下CSS代码进行格式化,并且它运行良好.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
我想得到当前的计算宽度,zoom如下所示:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom: (current screen width)/(480);
}
}
Hea*_*065 28
使用CSS3视口百分比功能.
假设您希望主体宽度大小为浏览器视图端口的比率.我添加了一个边框,这样您就可以在更改浏览器宽度或高度时看到正文调整大小.我使用了视口大小的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>Adé*_*gun 23
正如我们有css单位“view-height(vh)”，它大致对应于视口的高度，您也可以使用view-width(vw)相对于视口的宽度动态调整元素的大小
IE
.random-div{
height: 100vh;
width: calc(100vw - 480px);
}
干杯
这可以通过 csscalc()操作符来实现
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom:calc(100% / 480);
}
}
| 归档时间： |
|
| 查看次数： |
74156 次 |
| 最近记录： |