如果屏幕大小是移動大小，請使用jquery更改字體大小

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/

作為附加的注釋，我會用HTML元素，烤羊肉串的風格套para-head ，而不是para_head 。

Answer 3

最好使用媒體查詢，但如果您更喜歡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 個解決方案

解決方案1
3 2016-05-22 10:15:51

解決方案2
0 已采納 2016-05-22 10:05:38

解決方案3
0 2016-05-22 10:09:05

如果屏幕大小是移動大小，請使用jquery更改字體大小

問題描述

3 個解決方案

解決方案1 3 2016-05-22 10:15:51

解決方案2 0 已采納 2016-05-22 10:05:38

解決方案3 0 2016-05-22 10:09:05

解決方案1
3 2016-05-22 10:15:51

解決方案2
0 已采納 2016-05-22 10:05:38

解決方案3
0 2016-05-22 10:09:05