标签: responsiveness

我有这个HTML代码:

        <div class="row fluid">
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk …

我一直在各种设备上测试我的bootstrap网站,以确保它的响应能力.我已经为除了导航栏之外的不同显示尺寸正确调整了大小.在我的浏览器上,当我水平调整窗口大小时,它似乎响应,按预期折叠菜单,但在移动设备上,我仍然看到导航栏就像在台式机或笔记本电脑上的全屏窗口中显示一样.这是我的导航栏的代码:

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="WinShir" src="img/rocket.png" /> WinShir
        </a>
        <button type='button' class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="sr-only">Toggle Navigation</span>
        </button>
      </div>

      <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
        <li><a href="#signInModal" data-toggle="modal">Sign In</a></li>
        <li><a href="#signupModal" data-toggle="modal">Sign Up</a></li>
      </ul>
    </div>

  </nav>
</div>

我已经尝试将nav元素更改为div,看看是否有帮助但没有成功.我还删除了封闭的容器类div,看看是否有帮助,也没有运气.

当我为我的网站编写媒体查询时，我想到了这一点：浏览器的地址栏会影响 CSS 媒体查询吗？

当我编写这个代码时：

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px)  
  and (orientation: portrait) {

}

我是否考虑了浏览器地址栏的高度？地址栏是否会减去屏幕视口的像素？

我是否必须考虑此媒体查询？

/* Portrait */
@media screen 
  and (device-width: 320px - <AddressBarHeight>) 
  and (device-height: 640px - <AddressBarHeight>)  
  and (orientation: portrait) {

}

这更像是一个最佳实践问题。所以，假设我在 Bootstrap 中有两个列，我希望将正确的列设置为 300 像素，直到它到达 768 像素断点，然后将其堆叠。

<div class="container">
  
  <div class="row">
    
    <!-- This column needs to fill the rest of the container fluidly -->
    <div class="col-sm-8"></div>
    
    <!-- This column needs to stay 300px -->
    <div class="col-sm-4"></div>
    
  </div>
  
</div>

我最初的解决方案是只向每个容器添加类，并为每个媒体断点静态设置两个容器的宽度，然后在堆栈断点上将宽度设置为 auto。但是，我不喜欢这个解决方案，因为它非常冗长，而且将列都设置为静态似乎太脆弱了。我更喜欢左列使用动态混合或设置百分比。

有什么想法吗？谢谢！

我需要测试一个html文件的移动响应能力,但我发现这样做的所有资源都需要一个URL或一个localhost,有没有办法用一个html文件来测试响应能力？

我用Java创建了我的第一个游戏--Snake,它的主循环看起来像这样

while (true)
    {
        long start = System.nanoTime();
        model.eUpdate();
        if (model.hasElapsedCycle())
        {
            model.updateGame();
        }
        view.refresh();
        long delta = (System.nanoTime() - start) / 1000000L;
        if (delta < model.getFrameTime())
        {
            try
            {
                Thread.sleep(model.getFrameTime() - delta);
            } catch (Exception e)
            {
                e.printStackTrace();
            }
        }
    }

但是在我的项目的要求中有一个响应点,所以我需要改变Thread.sleep()其他东西,但我不知道如何以一种简单的方式做到这一点.提前感谢任何建议.

我正在使用 Expo 和 React-Native 开发平板电脑应用程序（Android 和 iOS）。

我设法使布局具有响应性而没有遇到任何问题。在不同大小的设备上运行该应用程序后，我注意到我忘记了字体大小响应能力。

我尝试了我能找到的所有 npm 库 ( react-native-responsive-fontsize, react-native-cross-platform-responsive-dimensions, react-native-responsive-fontsize)。对于其中任何一个，我都遇到了同样的问题：在应用程序启动时，根据设备的方向，字体大小呈现不同。（即，如果我在纵向模式下打开应用程序时，字体大小明显大于在横向模式下打开应用程序时的字体大小 - 横向模式是我的应用程序的默认方向）。我试图在启动时将我的应用程序的屏幕方向锁定为横向，并在我的第一个组件安装后将其重置为默认值，但这也无济于事。

我得出的结论是，发生这种情况是因为所有这些库都使用设备的尺寸来制作我传递给它们的内容的 procentual 值，但只涉及一个维度（宽度或高度），这些维度因初始设备方向而异。

我试图实现我自己的解决方案，考虑基于宽度和高度的东西，而不仅仅是基于其中之一，我想出了这个功能：

const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;

export function proportionalSize(size) {
     let aspectRatioSize = width * height;
     let aspectRatioUnit = aspectRatioSize * 0.00001;

     return parseFloat(size) * 0.1 * aspectRatioUnit;
}

这仅适用于我开发应用程序的设备......字体大小不会在具有不同屏幕尺寸的其他设备上保持相同的比例。

我浪费了足够多的时间来修改整个代码的字体大小，试图在库之间切换。你有什么想法我怎么能克服这个，或者我错过了什么？我最初教过这将是我最小的问题，但我错了。

后来的编辑：我注意到我的问题在重新加载应用程序后消失了。它只在第一次渲染时发生，重新加载后，字体大小工作得很好。

我在网页中有一个 SVG，它由图像 + 文本组成

<object data="/infographic/timeline.svg" type="image/svg+xml">    
  <img src="/infographic/timeline.svg" alt="Timeline">
</object>

所有的图像都是响应式的，但文本不是，所以文本变得非常非常小。

SVG 片段（大量的）

  <defs>
    <style>
      .cls-1 {
        font-size: 60.014px;
      }

  .cls-1, .cls-10 {
    opacity: 0.69;
  }

  .cls-1, .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
    fill: #ffffff;
  }

  .cls-1, .cls-10, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-9 {
    text-anchor: middle;
  }

  .cls-1, .cls-3, .cls-6 {
    font-family: "Roboto";
  }

  .cls-2 {
    font-size: 32.014px;
  }

  .cls-3 {
    font-size: 14.089px;
  }

  .cls-3, .cls-6 {
    fill: #db7426;
  }

  .cls-4, .cls-6 {
    font-size: 32px!important;
  }

  .cls-10, …

我正在开发一个反应js的网络应用程序,我正在使用材料UI的组件,但我有点混淆重写我的网页的响应性.所以我想知道我可以使用Bootstrap 4和材料Ui.

任何帮助都会受到赞赏.提前致谢.

问题：我想在所有列表项中以％添加padding-top（因为我需要将文本向下移一点，并且还需要所有元素都可伸缩），这是jsfiddle代码

高度正常。为了计算高度，我计算了li高度（最初为40px）相对于其父级ul（400px）的百分比。400像素中的40像素= 10％。在总ul高度仍等于400px之后，似乎工作正常。（盒子的高度为53.33vw，因为400px是750px的53.33％）。

但是问题在于以百分比计算填充顶部。为了计算padding-top（8px），我需要计算400px中的8px（400px是父ul的高度）= 2％，并且在固定布局中，我从高度中减去了2％（所以10％高度现在为8％）。但是之后，总ul高度等于470px。如何以百分比计算padding-top，以使ul的高度仍为400px？我需要保留那些400像素，这是ul的原始高度，在以％添加padding-top之后，ul的高度变为470像素，这是不正确的。

HTML：

<div class="box">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</div>

CSS：

body {
    line-height: 1;
}

/* THIS IS MY CODE*/

.box {
    margin:0 auto;
    width:100%;
    max-width:750px;
    height:53.33vw;
    max-height:400px;
}

ul.list {
    padding: 0;
    width:100%;
    height:100%;
    background:green;
    list-style-type:none;
    text-align:center;
    font-size:3vw;
}

ul li:nth-child(odd) {
    height:8%;
    width:interit;
    padding-top:2%;
    background:grey;
}

ul li:nth-child(even) {
    height:8%;
    width:interit;
    padding-top:2%; …