Question

我有a website我想要完善，我想要的是这样的

if screen=1920x900 set size="100%"
if screen=1280x600 set size="50%"
if os="windows" set font="100%"
if os="osx" set font="50%"
if os="linux" set font="25%"

...width="{size}"
font-family="{font}"

请注意以上代码只是示例！

我希望能够在屏幕大小为XXXX的Windows中查看我的网站就像在其他浏览器的/ os的屏幕尺寸中一样？

Answer 1

你好习惯CSS Media queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

更多信息请参阅以下链接。

http://cssmediaqueries.com/

http://www.css3.info/preview/media-queries/

Answer 2

对于屏幕尺寸，您可以使用 @media查询。

实施例

@media screen
and (min-width: 600px)
and (max-width: 900px) {
  .class {
    background: #333;
  }
}

@media screen
and (min-width: 900px) {
  .class {
    background: #333;
  }
}

了解更多信息：

要定位不同版本的IE，您可以使用条件评论。

实施例

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

检测操作系统不是一个好主意。但要检测它们，有很多插件。

Answer 3

您将需要使用jQuery来检测浏览器的大小和范围。操作系统版本。

您可以使用：http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/插件。

然后使用If / Selects / Switches等，您可以使用不同的CSS，具体取决于浏览器/操作系统/大小等。

Answer 4

你究竟想做什么？为不同的屏幕尺寸设置css规则，请查看CSS媒体查询（例如：http://www.w3.org/TR/css3-mediaqueries/）。

您可以通过PHP找到更多过滤器，如操作系统和事物（例如：http://www.danielkassner.com/2010/06/11/get-user-operating-system-with-php）

不同OS /屏幕的不同代码

4 个答案:

实施例

实施例