标签: responsive-design

仅使用CSS交换DIV位置

我正在尝试交换两个divs位置以进行响应式设计(网站看起来不同,具体取决于浏览器的宽度/移动设备的好处).

现在我有这样的事情:

<div id="first_div"></div>
<div id="second_div"></div>

Run Code Online (Sandbox Code Playgroud)

但是,是否可以交换他们的展示位置,使其看起来像是second_div第一个,仅使用CSS？HTML保持不变.我尝试过使用花车和东西,但它似乎没有按照我想要的方式工作.我不想使用绝对定位,因为divs 的高度总是在变化.有没有解决方案,或者没有办法做到这一点？

css responsive-design

Dra*_*fly

2013 07-04

70
推荐指数

7
解决办法

12万
查看次数

为什么媒体查询的顺序在CSS中很重要？

最近,我一直在设计响应更快的网站,而且我经常使用CSS媒体查询.我注意到的一种模式是定义媒体查询的顺序实际上很重要.我没有在每个浏览器中测试它,只是在Chrome上测试.这种行为有解释吗？有时,当您的网站无法正常工作时会感到沮丧,并且您不确定它是查询还是查询的编写顺序.

这是一个例子:

HTML

<body>
    <div class="one"><h1>Welcome to my website</h1></div>
    <div class="two"><a href="#">Contact us</a></div>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS:

body{
font-size:1em; /* 16px */
}

.two{margin-top:2em;}



/* Media Queries */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}

}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
            }
/*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;} …

Run Code Online (Sandbox Code Playgroud)

css css3 media-queries responsive-design

dsi*_*gnr

2016 02-05

68
推荐指数

2
解决办法

6万
查看次数

在中心Bootstrap 3网格旁边创建固定侧边栏

我想创建一个固定的侧边栏,它存在于我的中心Bootstrap网格之外.我在尝试这样做时面临的挑战是确定应用/覆盖我的其他样式,.container以便在调整屏幕大小时它不会与我的侧边栏重叠.

对于初学者来说我只使用了CSS框架的栅格部,因此.container,.row并.col-md-12从拉代码bootstrap.css文件本身并不是定制.另外请记住我正在使用Bootstrap 3,所以请不要为以前的线程中经常被问到的Bootstrap 2的流体网格解决方案提出建议.

HTML

<div id="left-nav"></div>
<div class="container">
   <div class="row">
      <div class="col-md-12">
         <p>Lorem ipsum dolor sit amet, nunc dictum at.</p>
      </div>
   </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

html, body {
  height: 100%;
  width: 100%;
}
#left-nav {
  background: #2b2b2b;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 250px;
}

Run Code Online (Sandbox Code Playgroud)

html css responsive-design twitter-bootstrap

Car*_*rds

2016 08-30

68
推荐指数

1
解决办法

18万
查看次数

Bootstrap行与不同高度的列

我目前有类似的东西:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Run Code Online (Sandbox Code Playgroud)

现在假设,content是不同高度的盒子,具有相同的宽度 - 我怎么能保持相同的"基于网格的布局",并且所有盒子彼此排列,而不是完美的线条.

目前TWBS将下一行col-md-4置于前三行中最长元素下面,因此每行项目完全对齐干净 - 虽然这很棒但我希望每个项目直接落在最后一个元素下("砌体"布局) )

html css responsive-design twitter-bootstrap bootstrap-4

use*_*926

2018 04-03

68
推荐指数

2
解决办法

5万
查看次数

jQuery:如何快速检测窗口宽度？

我的页面上有一个滚动元素(使用jScrollPane jQuery插件).我想要实现的是通过检测浏览器窗口的宽度来关闭滚动窗口的方法.我正在做一个响应式布局,我希望在浏览器低于一定宽度时关闭此滚动功能.当我刷新页面时,我能够使它工作,但是当我调整浏览器窗口的大小时,宽度值不会立即更新.

现在,如果我开始使用宽度为1000px的窗口,则调整大小为350px,滚动功能仍然存在.一旦浏览器宽度达到440px,我希望滚动功能关闭.

这是我到目前为止的代码..

var windowsize = $(window).width();

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}

Run Code Online (Sandbox Code Playgroud)

javascript jquery responsive-design

Dus*_*tin

lucky-day

67
推荐指数

2
解决办法

20万
查看次数