css - 获取屏幕宽度作为调整大小的变量

Question

我想将屏幕宽度作为简单 if 语句的变量。基本上如果屏幕> 768，它将显示正常的网站。如果它 < 768 则显示更紧凑的版本。这只是对 ipad 分辨率的一点修复。我已经知道如何在获得信息后更新网页，我首先如何获得值？

Answer 1

使用 javascript .. 有一个属性叫做

.screenwidth()

这是一个链接：

http://www.w3schools.com/jsref/prop_screen_width.asp

Answer 2

您可以使用 CSS 媒体查询：

@media all and (max-width: 768px) {
  body {
    background: #ccc;
  }
}

进一步阅读： http ://css-tricks.com/css-media-queries/

Answer 3

你需要 CSS3 媒体查询

http://www.w3.org/TR/css3-mediaqueries/

http://webdesignerwall.com/tutorials/css3-media-queries

/* Any CSS for bigger screens / default CSS goes outside the brackets */

div {
    /*here*/ 
}

p {
    /*or here*/
}

@media screen and (max-width: 768px) {

   /*css specific to small screens under 768px width here*/

   div {
       /*here*/ 
   }

   p {
       /*or here*/
   }


}