标签: responsive-design

@media only screen and (max-device-width : 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

这就是我到目前为止所拥有的.我正在研究的移动网站的PSD模型是640px宽.另一个是该网站的平板电脑版本,为768px.我只能使用max-width在我的网络浏览器中测试网站,但是现在是时候让这个网站在设备上工作了,它仍然在渲染常规的全尺寸网页.以上两个问题是我最好的猜测.我哪里错了？

目标:

我试图获得一个INLINE SVG元素来填充父元素的完整可用宽度.我可以使用img和object标签来轻松地实现相同的效果来引用svg文件,但我想使用,inline svg因为我使用javascript动画svg内部元素.

问题:

我可以在Firefox中实现这一点,并且在Chrome中也有一些调整,但safari和IE9和IE10将无法​​播放.

• svg的内部内容并不总是在所有屏幕宽度中填充svg元素
• webkit添加了一个神秘的填充/高度(在这个例子中,填充在svg元素内)SVG元素的高度应该是auto并包装内部svg内容.

主要问题:

是否有响应式INLINE SVG的跨浏览器解决方案:查看IE9&10和-webkit-Safari中的示例,并注意SVG元素中不需要的额外高度(青色).

http://jsfiddle.net/David_Knowles/9tUAd/

<div class="block">stuff</div> 
<div class="wrap">
    <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet">

        <rect x="0" y="0" width="550" height="350"/>
        <polyline points="0,0 0,350 550,350"/>
        <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">The text</text>
    </svg>
</div>
<div class="block">stuff</div> 

我只是学习CSS流体布局和响应式设计,我试图在布局中使用没有px值的所有百分比值.

到目前为止似乎有效,但在一个地方,我看到了一些我没想到的东西.我试图在两个垂直堆叠的div之间放置一个边距,这个div根据容器的高度而变化.当我垂直调整窗口大小时,我希望边距会改变,但如果你水平调整它,它也会增长,这是我不想要的.我错过了什么？

这是一个小提琴.感谢您的帮助.

http://jsfiddle.net/gregir/aP5kz/

我正在尝试创建一个移动友好版本的网站,以使我的网站响应较小的屏幕尺寸和相应的比例.

我创建了一些媒体查询,在桌面上调整大小时在浏览器中表现正常.

在我的iPhone上,safari只缩小整个网站,但仍保持整个网站的宽高比.如何查看媒体查询？我错过了什么吗？

这是一个沙箱的链接,我正在尝试正常工作 - 任何帮助或建议表示赞赏:

http://www.preview.brencecoghill.com/

下面的代码将在<a>元素正下方创建一个箭头:

的jsfiddle

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

<a href="#" class="btn">Hello!</a>

问题是我们必须指示链接宽度以获得适当大小的箭头,因为我们无法以像素为单位指示边框宽度.

如何制作响应三角形百分比？

我刚刚完成了对新项目的设计和编码.但我需要它在移动设备上运行良好.我将屏幕大小调整为350~400px宽度,并开始编码并添加一些媒体查询.在redimensioned浏览器中看起来很棒.我已经削减了一些元素和功能,一切都很好......直到我用智能手机测试它

屏幕不大.不到4'(大概3.5).我在代码中添加了一些警报,并意识到其宽度为980px.几乎比调整大小的浏览器测试大3倍.

一切都太小了.其他的东西都很棒:媒体查询正在运行,我在代码中所做的削减也可以,但你几乎看不到我手机中的内容.这当然不是我想要的.

我希望它看起来像一个应用程序,实际上它看起来像是一个在redimensioned浏览器上的应用程序.

如何创建响应式网站来处理这样的问题？

我读了一些关于使用EM(还有一些新的称为REM)单元的东西,但我仍然对此非常困惑.我是否必须将所有内容更改px为em？

而且我知道你可以font-size在html或body标签中设置,所有其他元素都将从它们继承.这是一个approch？你平常都做什么？有诀窍吗？我没有使用bootstrap,也没有使用任何其他前端框架

转向响应式设计,我使用%s作为图像,例如:

#example img {
    width: 100%;
    height: auto;
    max-width: 690px; // Width of the image uploaded.
}

除了在Internet Explorer 8及更低版本中,这很有用.这是否height: auto属于CSS3的一部分,只有IE9才能支持？

最重要的部分......围绕这个问题的任何建议？到目前为止,我唯一能想到的就是给它一个最大高度.

谢谢

我在移动设备(Bootstrap 2)上的Bootstrap菜单下拉列表出现问题.这里有一个类似的问题,带有下拉按钮,但是答案就是引导程序中的一个固有错误,它在更新中得到了解决.我似乎有同样的问题所以也许这取决于我的标记？

我有一个带有下拉菜单的可折叠导航栏,一切都在桌面浏览器上完美运行.但是,在移动设备上,当您点击下拉列表时,下拉菜单会打开,但点击任何下拉链接只会再次折叠下拉菜单 - 无法访问链接.我尝试了各种bootstrap版本,无法纠正这个问题,所以我只能想象它是我的标记.这里是:

 <header class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#"><h1>Branding</h1></a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">Menu Item 1</a></li>
                    <li class="dropdown">                    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>      
                        <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Item 1</a></li>
                            <li><a href="#">Dropdown Item 2</a></li>
                            <li><a href="#">Dropdown Item 3</a></li>  
                            <li><a href="#">Dropdown Item 4</a></li>                           
                        </ul>
                    </li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</header>

这是一个复制代码的例子(抱歉,无法发送网站):http://jsfiddle.net/yDjw8/1/ …

我有类似这样的HTML:

    <div class="table-responsive">
         <table class="table borderless">
             <caption>
                  <h3>Announcements</h3>
             </caption>
             <tbody>
                 <tr >
                     <td>                                        
                         If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc.                                       
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>

当我在一个小视口中查看输出时,表格会正确调整大小,但表格单元格中的段落内容不会被包装,因此会显示滚动条.我预计响应行为会包含段落内容.我该如何实现这一目标？

所以我希望img显示一个

• 尽可能大(当它是风景时填充宽度/纵向时是高度)
• 没有作物
• 没有歪斜或拉伸(原始宽高比)
• 垂直和水平居中

此外,图像的原始大小未知.

我已经尝试了很多不同的选项,包括一个flexbox(获得垂直中心),但似乎没有任何东西勾选所有框.

理想情况下,我当然希望这是一个全CSS解决方案,但我也在研究一些JS.

谢谢