标签: responsive

我有个问题.

我到目前为止得到了这个:

无论设备屏幕有多大,我都希望突出显示的div能够覆盖你的设备屏幕.现在,当我在手机上打开它时,我会看到2个不同的div.我只想看到突出显示的那个.我该如何实现这一目标？

提前谢谢,凯文

我在materializeCSS上有一个基本网格我的问题是我的列高度不一样,所以我的布局变得一团糟.我知道这已经在bootstrap问了,但是这个解决方案在materializeCSS中对我没有任何帮助

这是我的jsfiddle https://jsfiddle.net/zrb46zr2/1/

<div class="row">
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

我有一个图像的形成,如下所示:

以下是HTML."第二面板"是主要包装,具有建筑物的背景图像.每个"菱形"图像使用CSS绝对定位像素值.

 <!-- Second panel -->
    <div id="second-panel" class="parallax-wrapper">
        <div id="second-panel-diamonds">
            <img class="second-panel-diamond" src="images/furniture-min.png" alt="Furniture" />
            <img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" />
            <img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" />
            <img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" />
        </div>
        <div class="parallax-panel">
            ...(not relevant)...
        </div>
    </div>

CSS:

#second-panel-diamonds{
    position: absolute;
    left: 1%;
    top: -5px;
}
#second-panel .second-panel-diamond{
    position: absolute;
    /* width: 22%; */
    width: auto;
    height: auto;
    max-width: 350px;
}
.second-panel-diamond:first-child{
    top: 250px;
    left: 90px;
}
.second-panel-diamond:nth-child(2){
    top: 80px;
    left: 260px;
}
.second-panel-diamond:last-child{
    left: 337px;
    top: 337px;
} …

我正在使用Bulma CSS框架，特别是我正在尝试使其中的表具有响应性。

我尝试给它一个width: 100%;并申请，overflow-x: auto;但似乎没有用。这是演示：http : //104.236.64.172 : 8081/#/pricing

码：

<div class="panel-block">
    <table class="table is-bordered pricing__table">
        <thead>
            <tr>
                <th>Travellers</th>
                <th>Standard</th>
                <th>Delux</th>
                <th>Premium</th>
                <th>Luxury</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Per Person Cost</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr>
            <tr>
                <td>
                    Extra Person <br>
                    (> 12 yrs)
                </td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr>
            <tr>
                <td>
                    Extra Child <br>
                    (> 12 yrs)
                </td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr> …

使用 CSSdisplay: grid而不是 html 标签是个好习惯<table>吗？

很多时候<table>在响应式设计中很难使用。特别是对于复杂的购物篮表和处理 colspan 等。但是使用 css-grid 很容易。

我在样式行（如<tr>表格）中看到了一些问题。有 nth-child 东西的方法。你怎么看待这件事？

我正在使用 wordpress 并使用 CSS 通过添加填充使我的“关于”和“联系人”页面的宽度更加居中和更小。但是，当我这样做时，尤其是在移动视图中（我认为平板电脑还可以），因此两侧都有空白。

我正在使用的主题是按照我的想法构建的，我无法在该主题中真正找到使元素看起来更小宽度并以页面为中心的内容，因此我使用填充来使其显示为我想要的方式。

移动视图中我网站的“联系”页面

移动视图中我网站的“投资组合”页面

这是我网站的链接：http : //www.lisaweng.com/contact/

即使我添加了填充，是否有 CSS 可以使这些页面在移动视图上查看时显示正常或全宽，就像投资组合页面如何在移动设备上查看全宽，即使在屏幕两侧查看时在屏幕两侧都有空白桌面版？

对于用于填充“关于”和“联系方式”页面元素的 CSS 的 PS，我确实使用了百分比而不是像素。我不确定为什么在移动视图中查看时它不完全响应。

这是“关于”和“联系方式”页面的 CSS 样式：

.cf7_custom_style_1 {
  padding-left: 20%;
  padding-right: 20%;
}

和

.aboutme {
  padding-left: 14%;
  padding-right: 14%;
}

有没有代码可以解决这个问题？或者知道为什么会这样吗？如果有移动视图修复的代码，它是否也适用于平板电脑，还是平板电脑也有一个 CSS 来修复它应该如何响应？

我有三个div相同高度等于 1vh`。

我的问题是它们在屏幕上以不同的像素大小出现。有时它们看起来相等但有时不相等，特别是在调整视口大小后发生。请运行代码段查看。

.samples {
  display:flex;
}

.container{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin:10px 20px;
  height: 20vh;
  width:20vh;
}

.container div{
  background: #000;
  width:100%;
}

#set1 div{
  height:.3vh;
}

#set2 div{
  height:.7vh;
}

#set3 div{
  height:.9vh;
}

#set4 div{
  height:1.1vh;
}

<div class = "samples">

  <div class="container" id="set1" >
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="container" id="set2" >
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="container" id="set3" >
    <div></div>
    <div></div>
    <div></div>
  </div>
  
    <div class="container" id="set4" >
    <div></div>
    <div></div>
    <div></div> …

我为我的 D3 图表创建了一个精简的JSFiddle。我使用以下解决方案使其具有响应性（使用 viewbox 和 preserveaspectratio）： responsive D3 chart

当我调整窗口大小并使其变小时，一些网格线似乎消失并重新出现。我认为这在小分辨率下看起来很糟糕（例如 320x480 手机）。当窗口变小时，有没有办法保留我的网格线？

HTML代码：

<!--//d3 chart//-->
<div class="centre-div"></div>

CSS 代码：

.centre-div {
  margin: 0 auto;
  max-width: 550px;
}

/* D3 chart css */
.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

JS代码：

//function createScatterplot() {
//Width and height
var margin = {
  top: 15,
  right: 2,
  bottom: 2,
  left: 2
};
//define width and height as the …

我想知道我的首页是否可以加载专供移动用户使用的图像。我知道使用 javascript 是可能的，但我想知道是否可以仅使用 CSS 来实现相同的效果。我试图做一些研究，但找不到我要找的东西。我的意思不是根据屏幕大小调整图像大小，而是加载适合移动设备的图像。

我有这张表，它是一封较大电子邮件的一部分。当用户的设备是手机或小屏幕时，我希望表格从 2 列/2 行变为 1 列 4 行。希望使用尽可能少的代码。

<table style="width:100%;table-layout:fixed;border-collapse:separate !important;border-spacing:20px 40px; font-family:Helvetica, Arial, sans-serif; color:#333333; font-size:16px; line-height:24px; font-weight:100;" class="bodywrapcenter">
  <tr>
    <td>
      Dr. Andrew Borg<br>
      Chapter Advisor<br>
      aborg@example.edu<br>
    </td>
    <td>
      Stuart J. Sigman, PhD<br>
      Dean, College of Arts and Sciences<br>
    </td>
  </tr>
  <tr>
    <td>
      Dr. Dale Mancini<br>
      Chapter Advisor<br>
      dmancini@example.edu<br>
    </td>
    <td>
      David DeHaven, PhD<br>
      Dean, Graduate School of Business and Management<br>
    </td>
  </tr>
</table>