不同OS /屏幕的不同代码

时间:2012-10-10 11:41:15

标签: html css

我有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的屏幕尺寸中一样?

4 个答案:

答案 0 :(得分:2)

你好习惯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/

答案 1 :(得分: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>

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

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

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

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