当屏幕宽度小于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>
原文地址：https://www.jb51.cc/html/226636.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
