标签: responsive-design

我正在学习 Flexbox，我的目标是创建一个包含 3 个项目的简单 Flexbox，这些项目将响应不同的设备（智能手机、平板电脑、台式机\xe2\x80\xa6）。\n这些项目应该一个在另一个之上，并且\n（总结一下，一项位于最顶部，一项位于页面底部，其余项占据中间的左侧空间）。

桌面和智能手机上的宽度部分似乎有效。但如何填充浏览器的高度以及字体和框如何适应不同设备的不同高度对我来说仍然是一个谜。

我的临时解决方案是增加smartphone\xe2\x80\xa6的margin

你怎么看？

这是我所做的：

.container {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  height: 100%;\n  font-size: 3em;\n}\n\n.item {\n  border: 5px solid red;\n  margin-bottom: 40px;\n}\n@media screen and (max-width: 500px) {\n  .element {\n    margin-bottom: 70px;\n  }\n}\n\n.one {\n  flex-basis: 100%;\n  display: flex;\n}\n\n.two {\n  flex-basis: 80%;\n  display: flex;\n}\n\n@media screen and (max-width: 64em) {\n  body {\n    font-size: 80%;\n  }\n}\n\n@media screen and (max-width: 50em) {\n  body {\n    font-size: 70%;\n  }\n}\n\n@media screen and (max-width: 30em) {\n …

The problem is that i want to know how to make responsive Desktop applications in JavaFx or Java Swing (preferred in JavaFx) . When i try to resize my application frame it's components size does not grow or shrink and similar is the situation when i try to run this on different screen sizes with different screen resolutions. I have searched on this topic but could not find any solution to this. So, any reference material will also be very …

我有一个网站(http://ginkandgasoline.net).我将视口设置为

<meta name="viewport" content="width=device-width" />

但是,在纵向模式下,网站显示的屏幕尺寸要大于屏幕尺寸.子页面似乎只是在主页上正常工作.当我删除视口代码时,该站点适合窗口,但一旦设备被转动,它将保持当前缩放,并且不会重置为旋转前的设置方式.

我尝试了多个选项,但实际上并不想使用媒体查询来解决问题.我也尝试用Jeremy Keith概述的问题来解决这个问题.

我知道媒体查询用于创建响应式布局.

然而它们似乎多余; 我们不能实现我们所需要的一切%吗？

在我的网站上，我在移动视图的右侧看到一个空白区域，在桌面上可以看到它的空白。

谁能帮我猜猜是什么引起的。谢谢

我想仅将边框应用于容器的特定角，类似于下图。下面的摘要容器的角落有一个小边框。我怎样才能实现这个目标？先感谢您。

我正在开发一个三列布局的页脚.我需要这个页脚响应每个div在移动设备上彼此堆叠,不包括平板电脑.

这是HTML:

<div id="footer-pages">

<div class="footer-container">  
    <div id="one">
        container1
    </div>

    <div id="two">
        container2
    </div>

    <div id="three">
        container3
    </div>
</div>
</div>

这是CSS:

#footer-pages{
    width:100%;
    height:100px;
background-color:red;    
}

.footer-container{
   width:70%;
    margin-left:auto;
    margin-right:auto;
   }

#one, #two, #three{
    width:30%;
    float:left;
    }

这里也是我设法实现的一个小提琴:http://jsfiddle.net/5L2RY/

有人可以指导我如何实现这一目标吗？

我的引导页面是响应式设计的.视口按要求声明:

`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`

(没有反引号)

在我测试的浏览器(Safari,Chrome,Firefox)中,响应度很好.

但是,iPhone和其他智能手机始终显示桌面视图.

我究竟做错了什么？这是一个测试页面供您查看(对不起,它仍然有点混乱):http: //zhaw.warnez-services.ch/NaKt/stackoverflow.php(链接更新)

有趣的是,使用隐形服务,他们发送自己的头并抑制我的视口指令.

谢谢你的任何提示.

我创建了一个测试网站.我在css中使用了媒体查询但是当我在移动设备上加载页面时,我看不到移动版本,当我重新调整浏览器大小时,网站会响应.我在多个地方读过不要使用*-device-width.那么,我错过了什么？什么可能是决议？

编辑:viewport meta tag添加了,但我的一个JavaScript搞砸了.通过js修复它.

编辑:删除了网站的链接,因为我已经解决了这个问题.问题出在我网站的JS上.

假设一个站点是:

• 最初使用固定宽度设置
• 通过媒体查询进行调整
• 各种尺寸看起来很棒

即使没有涉及灵活的网格类型布局,它仍然被认为是响应式的吗？

演示

我想像在这个网站上做出响应行为.有meta viewport内容设置width=device-width, initial-scale=1, maximum-scale=1,但如果我通过减少其宽度(大约200px宽度和更小)调整浏览器视频大小,内容按比例缩放和响应"切换".

你可以将这个网站和jsFiddle演示与下面的图片进行比较.具有相同字体大小的相同文本,但缩放比例不同.

UPD

我需要知道如何设置20px字体大小,它将按比例缩放,而不使用meta viewport.尝试制作一个<h1>有meta viewport和没有一个,你会明白我的意思