我有一个我正在努力完善的网站，我想要的是这样的
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 的窗口中完全在浏览器中查看我的网站？
你好现在习惯了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 */
}
更多信息请参阅下面的链接。
对于屏幕尺寸，您可以使用@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>
检测操作系统不是一个好主意。但是要检测它们，有很多插件。
您将需要使用 jQuery 来检测浏览器大小和操作系统版本。
您可以使用： http: //www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/插件。
然后使用 If/Selects/Switches 等，您可以根据浏览器/操作系统/大小等使用不同的 CSS。