标签: responsive-design

当我将浏览器的大小减小到XS大小时,使用Twitter Bootstrap.这是我的页脚.我有text-right处理剩余屏幕尺寸的属性,但在XS上,它在堆叠后仍然与右边对齐.

如何text-right在XS屏幕尺寸上没有这个？

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12 copyright">
                <p>&copy; 2014 LFDate. All rights reserved.</p>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <ul class="list-inline text-right">
                    <li><p><a href="#">Blog</a></p></li>
                    <li><p><a href="#">Press</a></p></li>
                    <li><p><a href="#">Jobs</a></p></li>
                    <li><p><a href="#">Contact</a></p></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

我在我的网站上使用Bootstrap的工具提示,但在移动设备上查看时,这些工具提示会在第一次点击时触发,这意味着我必须双击按钮.我想阻止这些在移动设备上显示,并尝试使用媒体查询来执行此操作.我的代码是:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
{
 .tooltip
 {
  display: none;
 }
}

这会停止显示工具提示,但我仍然需要单击两次才能使按钮起作用.有什么办法可以阻止这些工具提示使用媒体查询解雇吗？

我开始使用Angular 4的新项目,需要创建响应和愉快的用户界面.

• bootstrap为您提供响应,但没有物质感觉
• 角度材料提供了良好的UI体验https://material.angular.io

我知道bootstrap并在以前的AngularJS应用程序中使用它,但角度材料对我来说是新的.它似乎很容易遵循文档,但我找不到响应支持.

我不想混合它们但是却无法找到引导程序提供的移动支持的列响应.

我错过了什么吗？角度材料是否支持相似的响应性,还是应该在我的应用中同时使用？

我正在尝试使用twitter bootstrap做一个网站.我的菜单相对较少,所以它也适合768px显示器.但默认情况下,在引导程序中,菜单会使用媒体查询进行折叠.我无法阻止此行为.

这是我的HTML

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

我知道它与bootstrap中的媒体查询有关,但无法理解.

在HTML5中,我们目前有一个<figure>元素,定义如此(W3C参考)

图元素表示内容单元,可选地带有标题,是自包含的,通常从文档的主流中引用为单个单元,并且可以远离文档的主流而没有影响文件的含义.

最近,一个新的元素<picture>,提出了由响应图片社区组,它被定义在参考像这样

用于显示可能来自各种源的图像的图片元素(请参阅srcset属性).用户代理显示的图像取决于用于导出源图像的算法.

由于这两个描述似乎并不矛盾(并且图片上的文档还处于草案状态),我的问题是:在这种方式中,是否有可能(技术上和语义上)嵌套picture在figure元素中？

<figure>
   <picture>
      <source ...>
      <source ...>
      <source ...>
      <img..>
   </picture>

   <figcaption>...</figcaption>
</figure>

我在规格中没有找到关于它的参考文献.:\

注意:我知道没有浏览器实现当前这个元素,我只是用jQuery图片做一些实验

谢谢.

我正在开发一个响应式设计,"bgMainpage"类有一个背景图像,但它并没有在Safari上显示所有设备.我已经应用了背景大小封面,因为它是客户想要的.我也添加了浏览器特定的CSS,我不知道还有什么可以这样做,它也出现在Safari中.Chrome,FF,IE显示图像就好了.有任何想法吗 ？

项目链接

CSS:

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

我已经看到了关于如何将块元素居中的一百万个问题,并且似乎有几种流行的方法来实现它,但它们都依赖于固定的像素宽度.那么要么是margin:0 auto绝对/相对定位left:50%; margin-left:[-1/2 width];等等.如果元素的宽度设置为%,我们都知道这不起作用.

真的没有办法以真正流畅的方式做到这一点吗？我正在谈论使用%宽度(不设置固定宽度越来越小的十几个媒体查询).

注意:有很多解决方案使用热门词"响应",但不回答我的问题(因为他们无论如何都使用固定宽度).这是一个例子.

更新: 我差点忘了:你如何处理限制居中元素的最大宽度并仍然保持在中心？在@ smdrager的回答下看到我的评论.现实生活中的例子.我想要一个弹出消息或一个灯箱效果,其中包含一段文本在窗口中居中显示,文本根据宽度流畅地换行.但我不希望文本框在文本难以阅读的地方伸展得太远(想象一个4英尺的屏幕,其中三个段落延伸到一行文本上).如果为大多数方法添加最大宽度,则在达到最大宽度时,居中框将停止居中.

如何确保桌子的每个单元格在不使用固定尺寸的情况下变成方形？并在改变宽度时保持响应.

table {
  width: 90%;
}
td {
  width: 30%;
}
tr {
  /** what should go here? **/
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
<table>

根据Apple的网站:

iPhone 6的分辨率为1334×750像素,分辨率为326 ppi,对比度为1400:1(典型值)

iPhone 6+的分辨率为1920×1080像素,分辨率为401 ppi,对比度为1300:1(典型值)

但是,CSS媒体查询响应断点的内容是什么？(肖像和风景)

我不完全了解如何使用各种响应式仿真器测试视网膜屏幕尺寸.任何帮助将非常感激.

我用bootstrap.我希望用户能够选择画布大小,同时保持设计屏幕在div内响应.

<div class="row">
  <div class="col-xs-2 col-sm-2" id="border">content left</div>
  <div class="col-xs-6 col-sm-6" id="border">
    Width <input type="number" class="form-control"><br>
  Height <input type="number" class="form-control"><br>
  canvas
  <canvas id="canvas" width="500" height="300">  
  </canvas>

  </div>
  <div class="col-xs-2 col-sm-2" id="border">content right</div>

如何将画布的大小限制为div的大小？

我不知道是否有必要使用JavaScript.

编辑

应该考虑到用户输入宽度和高度值,并且画布必须与div成比例

https://jsfiddle.net/1a11p3ng/2/