[英]Change the font-size based on its original value by changing the browser width
当浏览器的大小(宽度)在两个特定数字之间时,如何使用jQuery,JS,CSS来按百分比更改字体大小值。
前
<div class="Fsize">Sample text<div>
<style>
//a sample size, lets say it can be anything
font-size: 100px;
</style>
<script>
//what should be here to change font-size to for example 30% of its original value (100px), which is 30px. when browser size (width) is between 700px to 1000px.
</script>
我无法使用媒体媒体查询。 下面是我使用它的示例。 CSS中的百分比会根据body {font-size}
而不是其原始值(此处为250)更改字体大小。
<div class="font">Some Text</div>
<style>
.font {
font-size: 250px;
}
@media (max-width: 600px) {
.font {
font-size: 100%;
}
}
</style>
font-size属性相对于父元素的字体大小
http://www.w3.org/TR/css3-fonts/#font-size-prop
这意味着,如果要使用媒体查询通过百分比更改字体大小,则需要首先设置容器的相对字体大小。
.container{
font-size:40px;
}
.font{
font-size: 100%;
}
@media (min-width: 400px) and (max-width: 800px){
.font {
font-size: 200%;
}
}
http://jsbin.com/bisirojoquxa/1/
您可以使用容器,也可以在body元素中设置字体的大小,然后从那里缩放。 我建议对响应字体大小使用基于Sass的解决方案,其中包括以下内容:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.