我正在尝试创建一个移动友好版本的网站,以使我的网站响应较小的屏幕尺寸和相应的比例.
我创建了一些媒体查询,在桌面上调整大小时在浏览器中表现正常.
在我的iPhone上,safari只缩小整个网站,但仍保持整个网站的宽高比.如何查看媒体查询？我错过了什么吗？
这是一个沙箱的链接,我正在尝试正常工作 - 任何帮助或建议表示赞赏:
我正在重新设计我的博客,其中考虑了响应式网页设计,以及"移动优先"方法 - 简而言之,我正在尝试使用min-width来避免任何类型的复制或css ..没有显示:无等等.
我的问题是,当我确实需要覆盖CSS值时,较低的最小宽度优先.例:
@media only screen and (min-width: 600px) {
h2 { font-size: 2.2em; }
}
@media only screen and (min-width: 320px) {
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}
我期待当我在600px及以上的分辨率下得到2.2em h2,但我得到1.7em ..在我的开发工具中,我看到2.2em声明在那里,但另一个优先.这没有意义!
我可以继续使用最小宽度并有效地覆盖较高分辨率的声明而不使用更强的选择器或最大宽度..？
我正在尝试建立一个单页网站(5).我试图使每个部分的窗口宽度和高度均为100%.因此,即使调整窗口大小,部分大小也会适应它.
我听说过JavaScript,但我找不到任何好的解决方案.有人能帮助我吗？媒体查询是否可能？
我将此表单放在页面的页脚中(只有一个文本框和一个按钮).我想@media根据可用的视口宽度尝试应用它...例如,在我的情况下,这个形式的全宽度需要大约270px左右.所以我想应用CSS来说:
if the width available is at least 270px
apply first set of CSS rules
else
apply second set of CSS rules
我怎么能用这个@media呢？
这是我的媒体查询:
@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media screen and …我想为支持悬停的浏览器(例如桌面浏览器)和不支持悬停的浏览器(例如触摸屏设备)提供单独的行为.具体来说,我想在支持它的浏览器上声明悬停状态,但不支持那些不支持浏览器的浏览器,以避免移动浏览器使用额外的点击模拟它,因为这会打破页面上的其他交互 - 通过不定义悬停这些浏览器的状态可以避免.
我已经阅读了" 交互媒体查询"功能,看起来它应该可以解决问题.我可以做类似的事情:
@media (hover: none) {
/* behaviour for touch browsers */
}
根据CanIUse,除了IE11和Firefox之外,它还支持我需要支持的所有浏览器.
所以我想知道我是否可以反过来做 - 因为主要的触控设备都支持它,然后否定它:
@media not (hover: none) {
/* behaviour for desktop browsers */
}
但是,这似乎根本不起作用.
我正在尝试做的伪代码示例:
.myelement {
/* some styling */
/* note: no hover state here */
}
@media(this device supports hover) {
.myelement:hover {
/* more styling */
}
}
那么,有没有办法让这项工作按照预期的方式进行,或者我是否走错了轨道？
这可能吗？对我来说这似乎是一个很好的解决方案,但我不确定它是否会起作用.
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Code for both portrait and landscape */
@media (orientation:portrait) {
/* Code for just portrait */
}
@media (orientation:landscape) {
/* Code for just landscape */
}
}
好像最近我看到更多的人开始在他们的样式表中使用media="all"vs.media="screen"
我的问题是,当我应该使用media="all"过media="screen",反之亦然？
注意:如果有所不同,我使用的是HTML5 Doctype.
根据Apple的网站:
iPhone 6的分辨率为1334×750像素,分辨率为326 ppi,对比度为1400:1(典型值)
iPhone 6+的分辨率为1920×1080像素,分辨率为401 ppi,对比度为1300:1(典型值)
但是,CSS媒体查询响应断点的内容是什么？(肖像和风景)
我不完全了解如何使用各种响应式仿真器测试视网膜屏幕尺寸.任何帮助将非常感激.