我理解如何通过媒体查询更改CSS(例如media =“screen and(max-width:640px)”)
但是我想说我想写(仅举例)
<div>
[if screen resolution is lower then 960 px]
<div>
some new text only for lower resolution
</div>
[end of condition]
</div>
为了做到这一点我需要写什么条件?
答案 0 :(得分:7)
据我所知,您无法在HTML页面内进行媒体查询。你需要在你的CSS中做到这一点。
但是如果你想在低于某个分辨率的情况下显示一些特殊文字,为什么不在分辨率低于960px时才能显示?
创建自适应设计与常规设计有很大不同,因为你必须考虑更多(这是haaard)
答案 1 :(得分:4)
您可以使用javascript屏幕对象进行检查:
screen.width
或者您可以使用css
执行此操作<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
http://css-tricks.com/6206-resolution-specific-stylesheets/ http://www.javascriptkit.com/howto/newtech3.shtml
答案 2 :(得分:3)
您需要为<div>
分配一个id(或一个类或任何其他从CSS中查找元素的方式),然后您可以设置这样的媒体查询定义:
<div id="mydiv">...</div>
<style type="text/css">
@media screen and (min-width: 961px) {
div#mydiv { display: none }
}
</style>
或者为了更好的可读性:将其隐藏在默认值中并在max-width: 960px
时可见。
答案 3 :(得分:1)
我可能错了,但我认为按分辨率选择css需要javascript提供一些帮助。
以下是js看起来像jsery中嵌入的内容的快速示例:
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
希望有所帮助。
答案 4 :(得分:1)
您可以添加jQuery
功能,以根据屏幕分辨率动态更改样式。
if(screen.width==1600)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
}
else if(screen.width==1280)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
}
else if(screen.width==1024)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
}
else if(screen.width==800)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
}
答案 5 :(得分:1)
我实际上正在经历相同的情况,发现如果要执行此操作,则可以真正将所有文本添加到HTML页面中,然后将其隐藏在不想显示的屏幕宽度上。例如:
<div>
[text that will be shown for screens less or equal to 960px in width]
<div class="smallScreen">
some new text only for lower resolution
</div>
[end of condition for small screens]
[text that will be shown for other screens that are greater in width]
<div class="largeScreen">
some new text only for higher resolution
</div>
</div>
然后您可以添加CSS:
/* On smaller resolutions, hide the text for Large screens */
@media only screen and (max-width: 960px) {
.largeScreen {display: none;}
}
/* On larger resolutions, hide the text for Small screens */
@media only screen and (min-width: 960px) {
.smallScreen {display: none;}
}
我希望这样可以解决:)
答案 6 :(得分:0)
Answere的帮助来自:
if screen resolution is less than x append css
您可以使用@media命令完全使用CSS 3完成此操作。
**@media (max-width:960px) { css... } //nothing with screen size bigger than 960px
@media(min-width:960px){css ...} //屏幕尺寸小于960px **
Jason Whitted提出了一个很好的观点,这只是CSS 3,所以它不适用于旧浏览器(它应该适用于所有现代浏览器)。 您也可以进行屏幕或设备编辑
@media screen {.nomobile {display:block; }} //桌面/笔记本电脑
@media handheld {.nomobile {display:none; } } //移动设备 或者你可以假设移动设备的宽度较小,然后继续使用。