Question

在我的网页中，如果屏幕尺寸是移动尺寸，我想用jquery更改字体大小。我的代码如下：

<head>
<script type='text/javascript'>
 if(screen.width <= 600){

        $("#para_head").css({"font-size":"12px"});
        $("#para_detail").css({"font-size":"10px"});
}
</script>
<style>
#para_head{
}
#para_detail{
}
</style>
</head>
<body>
<div id="para_head">
    Header
</div>
<div id="para_detail">
    Detail
</div>
</body>

如上面的代码，我无法更改font-size。我该在哪里解决这个问题。任何想法请。

Answer 1

为什么不使用CSS？

@media only screen and (max-width: 600px) {
 #para_head{
  font-size: 12px;
 }
 #para_detail{
  font-size: 10px;
 }
}

<div id="para_head">
  Para Head
</div>
<div id="para_detail">
  Para Detail
</div>

玩得开心：）

Answer 2

我建议使用CSS媒体查询而不是jQuery。如果你的应用程序很大，你将需要大量的jQuery操作，它也将更难维护，最重要的是它将在DOM上很重要。

使用CSS可以更轻松地实现响应式网站，如下所示。

@media screen and (max-width: 600px) {
    #para_head {
       font-size: 12px;
    }
}

演示（调整输出窗格的大小）

https://jsfiddle.net/9351yv7j/

作为补充说明，我会使用kebab样式的外壳来表示HTML元素，para-head而不是para_head。

Answer 3

最好使用media query，但如果您更喜欢jquery解决方案，请参阅下文

if ( $(window).width() > 600) {     
  //Add your javascript for large screens here
}
else {

   $("#para_head").css({"font-size":"12px"});
   $("#para_detail").css({"font-size":"10px"});
}

如果屏幕大小是移动大小，请使用jquery更改字体大小

3 个答案: