标签: responsive

我正在建立一个电子商务网站.所有产品都以不同的div显示.我有一个问题:在每个产品的Div中,我想显示产品描述的一部分.当产品描述比div长时,它只是在div的边缘显示描述.我试图将问题放在一张图片中:

现在,正如您在图片中看到的,我想解决三个问题:

• 我想限制文本以适应div.
• 我想确保这不是在一个单词中间的某个地方完成的
• 我想在说明预览的末尾添加"阅读更多"链接.

现在我在其他电子商务网站上看到了很多,但在找了几个小时后,我还没有找到关于如何做到这一点的清晰描述.

这是生成所有产品卡的代码:

for($i = 0; $i<$numberOfItems; $i++) {
    //echo $output_array[$i]["itemName"];
    echo '<a href="/itemDetails.php?itemCode=';echo $output_array[$i]["itemCode"]; echo '&itemName='; echo $output_array[$i]["itemName"];echo'">
    <div id="item" style="background-color: transparent; width:243px;height:auto;float:left; margin-left:20px; margin-top:20px; max-width:800px; display:inline-block;">
    <div id="itemPicture" class="itemImage"; > 
    <div id="price" class="pricetag">
    <div id="priceText" class="priceText";>';
    echo "€".$output_array[$i]["itemPrice"];

    echo '</div></div>';
    $imageSource = "http://www.imagine-app.nl/ProductImages/".$output_array[$i]["firstImage"].".jpg";
    echo '<img src="';echo $imageSource; echo'" style="max-width:100%; border:0px;"> 

    </div>

    <div id="itemName" class="itemName"">';
        echo $output_array[$i]["itemName"];
    echo '</div>'; ?>

    <div id="itemDescription" class="itemDescription" style="height:">
    <?  echo $output_array[$i]["itemDescription"];
    echo '</div>';
    ?>

    <?php
    echo '<div id="itemComment" class="itemComment""> …

我正在尝试将图像放入容器内,同时保持其大小比例.图像应取整个高度或宽度,具体取决于方向.我的解决方案适用于我测试的所有浏览器,但IE11(令人惊讶的是在10和9中工作).

在IE 11中,图像在右侧裁剪.如果可能的话,我想要一种纯粹的CSS方式,我不关心它的居中.

这是JSFiddle:https://jsfiddle.net/wagad0u8/

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/1000x100">
  </a>
</div>

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/400x780">
  </a>
</div>

.img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align:middle;
}
#content-block *:last-child {
    margin-bottom: 0px;
}
.owl-item, .owl-item .img-flux {
    height: 100%;
}
.img-flux {
    background-color: #ECECEC;
    position: relative;
    width: 100%;
    display: flex; …

我是说这个:

https://github.com/ftlabs/fastclick

它仍然需要和重要吗？

我知道有些事情与某些浏览器的视口声明有关.但它似乎是旧事物,现在其他浏览器呢？

<meta name="viewport" content="width=device-width, initial-scale=1">

我想根据屏幕尺寸实现这样渲染的东西:

+---------------------------+
|  A  |       B       |  C  |
+---------------------------+

+---------------+
|   A   |   C   |
|       B       |
+---------------+

如果所有大小都是固定的,我可以使用flex order属性进行管理,但我的C容器的大小不固定,所以我不能使用静态媒体查询.

有没有办法实现这个目标？

编辑:我管理了一个足够好的近似值:在媒体查询中选择所有可能需要换行的屏幕,我order将B容器更改为大容量,同时,我将其设置min-width为100%强制换行.

我的flexbox布局基于Philip Walton的Holy Grail Layout.

我正在尝试创建一个幻灯片/滑出导航侧边栏,就像这些但使用flexbox布局,而不是绝对定位的div.

我见过很多flexbox滑动菜单,例如这个Off Canvas Flexbox菜单,但它们似乎都将文章滑过侧边栏.我希望侧边栏在滑入和滑出视图时推/拉文章.

为了实现这一点,我一直在切换display:block和之间的CSS显示属性display:none.这种方法非常有效,因为侧边栏是隐藏的,内容会自动调整大小以填充新的更大空间.JSFiddle演示显示切换.

但是,当我尝试使用翻译属性(例如transform:translateX(-12em)将侧边栏滑出视图)时,内容将保留在同一位置并且不会调整大小.这留下了一个可以看到父容器的洞.JSFiddle演示滑动切换.

问题:如何滑出nav视图并article调整大小以填补空白？

注意:我想在不使用javascript的情况下实现此目的.

我正在寻找一种纯CSS解决方案，以解决我在这里使用jQuery所提供的帮助。

基本上，我有3个div，它们在容器中的宽度均匀分布。它们保持3/4的比例，高度是根据宽度计算得出的。此外，每个div都有一个与背景成比例的背景图像以及一些水平和垂直居中的文本。

$(document).ready(function() {
  function setw() {
    var footdivwidth = $('footer div').width();
    var footdivheight = footdivwidth * .75;
    $('footer div').css({
      'height': footdivheight + 'px'
    });
    $('footer div span').html('w: ' + footdivwidth + '<br>h: ' + footdivheight);
  }
  setw();
  $(window).resize(function() {
    setw();
  })
});

FOOTER {
  max-width: 1000px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.171);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

FOOTER DIV {
  background-image: url('https://learnwebdesign.online/img/bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: …

我的网站在safari上神秘地破解,没有响应(基础zurb到目前为止在任何其他浏览器上工作).即使我不使用js boundle,也会发生这种情况.

这场灾难在线:http://diet.paperide.com

我不知道为什么!谢谢...

对不起,如果我错过任何解决问题的方法,我已经阅读并尝试了许多解决方案,而没有任何解决方案.

我在一个页面上有几个图表(来自chart.js),但我不能成功地使它们响应,尽管:

responsive: true,

我可以获得的最佳响应显示是在放大画布宽度和高度时,但在桌面版本图表上显示整个屏幕.

这是一个小提琴网

有人帮我吗？非常感谢你.

我正在尝试使用反应材料ui库构建移动Web应用程序.

但似乎材料UI组件没有响应.它们在桌面上显示得非常好,但是当我在移动浏览器上打开它时,字体非常小.

材料UI是否意味着用于构建移动应用程序？为什么它甚至没有响应？

希望能够在 Material UI 中为平板电脑的样式对象设置纵向和横向视图

const styles = theme => ({
  root: {
    padding: theme.spacing.unit,
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.secondary.main
    }
  }
}

我如何为类似于传统媒体查询的纵向视图和横向视图添加断点：

@media screen and (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
}