默认情况下,我想给我的body元素一个绿色边框.在支持视网膜显示的设备上,我想首先检查尺寸.在ipad上我想给我的身体一个红色边框,在iphone上我想给它一个蓝色边框.但是像这样嵌套媒体查询不起作用:

body { border: 1px solid green; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   @media (max-width: 768px) and (min-width: 320px) {
      body { border: 1px solid red; }
   }
   @media (max-width: 320px) {
      body { border: 1px solid blue; }
   }
}

我正在研究响应式设计.我已经碰到了一堵墙,因为没有足够的空间放置一个input盒子而且它就是这样label.所以我决定将标签隐藏在较小的屏幕尺寸上.

目前它有占位符文本your email里面,但我想只有在屏幕上小于400(所以到399px宽)的不同的占位符Join our newsletter.

我认为需要有一些JS来执行此操作,而不是使用CSS.

基本上:如果屏幕尺寸小于400:占位符文本=加入我们的新闻通讯

else:占位符文本=您的电子邮件.

这是我的HTML:

<div id="mc_embed_signup">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email">
</div>

我需要将元素的宽度保持为其高度的百分比.因此,随着高度的变化,宽度会更新.

相反的情况可以通过使用填充顶部的%值来实现,但填充左边的百分比将是对象宽度的百分比,而不是其高度.

所以使用这样的标记:

<div class="box">
  <div class="inner"></div>
</div>

我想用这样的东西:

.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}

确保根据箱子的高度保持箱子的纵横比.高度是流动的,因为它的边距百分比 - 随着窗户高度的变化,盒子的高度也会变高.

我知道如何用JavaScript实现这一点,只是想知道是否有一个干净的CSS解决方案？

在开发Web应用程序时,过去选择已经800px或1024px适合用户的监视器.我一直在研究响应式网页设计和流体设计,似乎很多都定义了980px宽度.增加智能手机和平板电脑,并考虑其他可能的视口

是980px在新的事实上的标准？

谢谢.

有人知道如何使用媒体查询定位三星Galaxy S3吗？

目前我使用:

iPad的

<link rel="stylesheet" media="all and (device-width: 768px)"                                                href="css/device-768.css"/>

其他平板设备

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>

电话(S3没有使用这个 - 不知道为什么)

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)"    href="css/phones.css"/>

我也测试过

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"    href="css/phones.css"/>

但它没有工作......

我正在尝试使我的响应式CSS样式仅适用于平板电脑和智能手机.基本上我有桌面风格,移动风格:肖像和移动风格:风景.我不希望移动样式干扰桌面演示.我玩过无数媒体查询,但结果是移动样式显示在桌面上,或者移动样式仅在移动设备上显示,但只有一组规则(无响应).有没有办法让两者完全分开？

我现在的代码是这样的:

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */

从历史上看,您将使用基于像素宽度的媒体查询来确定最终用户将获得的显示内容.但是,当您使用更高分辨率的设备(如Galaxy S4(1080x1920)分辨率)时,这不会/不会起作用.

你怎么处理这个？

简要说明

我创建了一个响应式网站,有效地拥有三个视图(桌面,平板电脑,移动设备).大部分设计都是通过CSS使用媒体查询进行更改(因为它应该用于响应式网站).但是,部分设计太复杂,不能简单地通过CSS操作,因为HTML实际上需要在DOM周围移动.我知道这听起来不太好但是我无法看到我是如何在不移动HTML中的某些元素的情况下复制此设计的.

因此,考虑到上述情况,我现在计划编写一个函数,为每个不同的"响应视图"创建自定义事件.当每个事件被触发时(与CSS媒体查询同步),它将执行一些Javascript来移动/动画使用CSS无法操纵的任何元素.

我的问题

这是最好的方法吗？如果,不是,我还有其他选择吗？我可以查看和学习任何现有的图书馆吗？

我的实际问题是; 在DOM中移动元素以进行响应式网页设计的最佳方法是什么？

进一步说明

如果上述内容不明确,请阅读以下内容:

考虑以下三种不同的观点:

现在考虑前两个视图的代码:

桌面

<div id="some_container">
    <nav>
        <ul>
        </ul>
    <nav>
    <p>Some Text</p>
    <!-- The rest of the content -->
</div>

片剂

<div id="some_container">
    <p>Some Text</p>
    <nav>
        <ul>
        </ul>
    <nav>
    <!-- The rest of the content -->
</div>

请注意,nav标签已移至p标签下方...

我试图设计按钮的样式,悬停使按钮变浅,而不是更暗的阴影.我试过bootstrap自定义页面(http://getbootstrap.com/customize/),它没有给我一个更改按钮悬停颜色的选项.我尝试通过检查CSS手动执行此操作但不清楚按钮如何获得悬停颜色.我尝试了另一个bootstrap定制网站

http://pikock.github.io/bootstrap-magic/app/#!/editor

我希望主色是#0495c9,悬停颜色是#00b3db但是我只能指定按钮bg颜色而不是它的悬停颜色.

任何帮助将不胜感激

所以我一直在寻找和寻找指导,但没有用.

基本上,我只想要一个侧边栏,但是当屏幕变小时,即智能手机的屏幕尺寸,它会转换为导航栏.

我的侧边栏HTML代码是这样的:

<nav class="col-sm-3 ">
  <div class="col-sm-12" id="fixed-sidebar">
    <!-- <a href="index.html"><img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"></a>  -->
    <ul>
      <li class="fuente-fjalla ul-personalizada">Animación</li>
      <li class="fuente-fjalla ul-personalizada">Ilustración</li>
      <li class="fuente-fjalla ul-personalizada">Interacción</li>
      <br>
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br>
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>

我的CSS:

#fixed-sidebar {
    position: fixed;
    max-width: 20%;
    color: white;
}

我不知道如何将其导入导航栏.我所知道的是如何从头开始制作导航栏,但我不希望这样!我不想要任何那种花哨的动画叠加多色手风琴 - 无论如何,请 -

谢谢 :)