标签: responsive

嗨，我正在我正在做的网站上使用 iDangero Swiper，但由于某种原因，我无法让响应式断点工作。下面是我正在使用的js。

var swiper = new Swiper('.s1', {
 slidesPerView: 5,
 slidesPerColumn: 2,
 spaceBetween: 30,
 nextButton: '.swiper-button-next',
 prevButton: '.swiper-button-prev',
 breakpoints: {
  1024: {
   slidesPerView: 5,
   spaceBetween: 30
  },
  768: {
   slidesPerView: 1,
   spaceBetween: 10
  },
  640: {
   slidesPerView: 1,
   spaceBetween: 10
 },
 320: {
  slidesPerView: 1,
  spaceBetween: 10
 }
},
});

我出错的任何想法

有没有办法隐藏每行第一个元素中的分隔符？

我有一个响应式水平菜单，当窗口变小时会添加额外的行。

更糟糕的是，最终用户可以在此菜单中添加和删除项目，或者只是更改菜单项的顺序。

使用 first-child 不是一个选项，因为它只适用于第一行。当屏幕变得太小时，以下行将在它们的第一个 li 元素上有分隔符。

#block-views-solutions-block{ 
  box-sizing: border-box; 
  text-transform: uppercase; 
  font-weight: bold; 
  width: 92%; 
  max-width: $maxWidth; 
  margin: 20px auto 0 auto; 
  padding: 15px 0 0 0; 
  background-color: $colorBlue;  
  .content{ 
    box-sizing: border-box;
    width: 100%; 
    overflow: hidden;
  }
  ul{ 
    margin: 0 !important; 
    padding: 0 40px; 
    text-align: center; 
  }
  li{ 
    display: inline-block; 
    padding: 0 !important;
    &:before { 
      position: relative; 
      top: 0.125em; 
      display: inline-block; 
      width: 1px; 
      height: 1em; 
      border-left: solid 2px #fff; 
      content: " "; 
    }
    &:first-child{
      &:before{ border-left: none; } …

我想在chrome中使用Js中的API屏幕。

 if ( navigator.userAgent.match( /(android|iphone)/gi ) ) {
        if ( 'orientation' in screen ) {
            //console.log( '// API supported, yeah!' );
            //console.log( 'new orientation is ', screen.orientation );
            screen.lockOrientation( 'landscape' );
        } else {
            console.log( '// API not supported ' );
        }
    } else {
        //alert('none');
    }

我的错误js：捕获了TypeError：screen.lockOrientation不是函数

/ *其他* /

if ( navigator.userAgent.match( /(android|iphone)/gi ) ) {
    if ( 'orientation' in screen ) {
        let locOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
        locOrientation('landscape');
        console.log( '// API supported, yeah!' , …

我试图创建一个Flexbox的响应式布局，让我交替两个方向row和row-reverse。

也许您可以通过一些图像更好地理解它（注意框的顺序）：

并调整大小：

或者仍然：

你可以想象一个箭头穿过每个盒子，一定可以按照数字的顺序穿过1到8（就像一条蛇）。

如何使用 flexbox 实现它？

我想我可以使用orderCSS 属性，但我错过了一种动态设置它的方法。我不认为我可以用 JavaScript 实现这个结果，因为没有办法获得动态行的编号（除了丑陋的黑客，我想避免它们）。那么，你有什么想法吗？

谢谢你。

如果你想根据我的代码写一个例子，你可以使用这个：

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  width: 380px;
  height: 100px;
  background: red;
  margin: 5px;
  
  font-family: sans-serif;
  color: white;
  text-align: center;
  font-size: 2em;
  line-height: 150%;
}

<div class="flexbox-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

我正在尝试使我的 Google Column Material Chart 具有响应性，但对我来说似乎有点不稳定并且根本无法正常工作。谁能帮我把这个流程做好

图表只会在页面加载时以该格式显示。当浏览器窗口宽度改变时，它不会动态调整大小。

JSFIDDLE https://jsfiddle.net/rbla/Le8g0sw0/8/

HTML

<div id="chart">
    <div id="chart_div"></div>
</div>

CSS

#chart {
   border:5px solid #AAA;
   width: 80%; 
   min-height: 450px;
}

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>

  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      }, …

我正在尝试使用 Bootstrap 创建一个具有以下属性的瓷砖网格：

• 所有瓷砖都应该是正方形
• 水平和垂直间隙应该相同（即使在不同屏幕宽度上比较相同）
• 图块应始终居中在屏幕中间（从网站的左边缘到最左边的图块的左边框的距离 = 从网站的右边缘到最右边的图块的右边框的距离）

它应该是这样的：

body{
	   background: #a5b5c5;
	   background:lightblue !important;
    }

    .box{
	   height: 180px;
	   width: 180px;
	   background: #fff;
	   border-radius: 4px;
    }

    .col-lg-2, .col-md-3, .col-xs-6{
	     margin-top: 12px !important;
    }

<div class="container">
	<div class="row">
		
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 …

我有一个应该具有响应性的页面，它还有一个用于移动设备的视口标签，如下所示。

<meta name="viewport" content="width=device-width, initial-scale=1.0,
                                 maximum-scale=1.0, user-scalable=no">

但是，在 Chrome Dev Tools 中，当页面首先以横向模式查看，然后旋转到纵向模式时，即使 html 页面的宽度是旋转后设备的宽度，即 400px，页面尺寸也会变得非常小。这显示在以下视频中：在 Chrome 工具中将设备从横向模式旋转到纵向模式时页面缩小

缩小页面截图如下。可见主体的宽度为400px，但没有延伸到屏幕截图的右边缘。

问题：为什么即使包含正确的视口标签也会发生这种情况？可能是 Chrome 工具模拟器错误/问题。

更新 1

我还发现这个问题不仅发生在 Chrome Dev Tools 模拟器上，而且也发生在真正的移动设备上，比如 android 或 iphone 智能手机。我在 android 智能手机（chrome）和 iphone 6plus（safari 和 chrome）上验证了这一点

我有一个图像，里面有两个按钮。我希望这些按钮具有响应性，并且文本始终居中并在图像调整大小时调整大小。这些按钮内的文本未居中，并且在调整浏览器大小或在移动设备上浏览时变得更糟。我错过了什么？下面是图片和按钮的 CSS 代码：

.container {
  position: relative;
  width: 100%;
  max-width: 2400px;
}

.container img {
  width: 150%;
  opacity: 0.85;
  height: auto;
}

.container .btn {
  width: 30%;
  height: 10%;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 70%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.5vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

.container .btns {
  width: 30%;
  height: 10%;
  opacity: 0.8;
  filter: alpha(opacity=80); …

我有两个线性渐变，一个在另一个下面，我想让它们在所有屏幕尺寸上对齐并保持对齐。

这就是我想要的样子

（所以你知道我说“对齐​​”是什么意思

正如我目前所拥有的，我可以通过输入特定的百分比来对齐它们，但在任何其他屏幕上，这两个渐变将不对齐

.

    <div style="background-image: linear-gradient(110deg, #0085CA 54%, #e3e3e3 54%); height: 50vh;"></div>
    <div style="background-image: linear-gradient(110deg, #ffffff 45%, #000 45%); height: 50vh;"></div>

我环顾四周寻找答案，但一直无法找到有关此特定案例的任何信息，因此将不胜感激。

有人知道如何使用 Jest 测试 React 组件的不同屏幕宽度或响应能力吗？我一直在寻找这样做的正确方法，但没有一个解决方案对我有用。例如，我发现有人建议matchMediaPolyfill(window)和有人建议用自定义宽度模拟 div，但这些解决方案都不起作用。请帮忙！谢谢！