我有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的屏幕尺寸中一样?
答案 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 */
}
更多信息请参阅以下链接。
答案 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)
您可以通过PHP找到更多过滤器,如操作系统和事物(例如:http://www.danielkassner.com/2010/06/11/get-user-operating-system-with-php)