标签: responsive-design
如何在等待后端处理的同时响应式地处理前端的 UI 操作？
使用 StackOverflow 问答线程作为示例 - 当您投票赞成、反对或喜欢某个问题时，您可以看到 UI 快速响应该操作，同时侧面的赞成票数量发生变化。
我们怎样才能达到这样的效果呢？如果将每个此类操作发送到后端进行处理并使用返回的响应来更新 UI，您将看到更新缓慢并感受到故障。但是，如果将一些逻辑放在前端，您还需要在 UI 上反映操作之前处理欺诈/滥用等问题，即 - 在更改投票数之前，您不需要首先确保这是有效用户的有效点击？
推荐指数
解决办法
查看次数
Bootstrap 3 中心图像
我试图将图像始终放在某些元素的中间和中心，唯一的问题是它不起作用
这是我的代码
CSS
.panel - empty {
width: 100 % ;
height: 400 px; /* for demo only */
}
.panel-empty-inside {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box-inside {
display:inline-block;
vertical-align: top;
}
和HTML
<div class="panel-empty">
<div class="panel-empty-inside">
<div class="box-inside">
<img class="img-responsive center-block" src="http://www.gusonthego.com/wp-content/uploads/2012/04/Gus-Flying-Banner-Hello-nBG.png" alt="Banner"/>
</div>
</div>
</div>
这是工作小提琴 https://jsfiddle.net/DTcHh/9395/
推荐指数
解决办法
查看次数
Flexbox 不会在 IE 10 和 11 中的表格内换行
我在表格内使用 Flexbox，但它在 IE 10 和 11 中不起作用。在您告诉我停止使用该表格之前，让我解释一下该表格位于供应商的代码中，并且我被要求在其中工作HTML 结构超出了我的控制范围。但我真的很想使用 Flexbox，这样可以在任何屏幕宽度上进行换行。
我在以下位置创建了一个小示例： https://jsfiddle.net/6fv3Lekd/18/
我的目标如下：
- 调整浏览器大小时，我需要像紫色盒子一样包裹蓝色盒子。（在 Chrome 和其他浏览器中运行良好。）
- 我需要使用固定像素的 Flex-Basis，例如本例中的 100px，而不是百分比。
- 我希望它在表格单元格内工作
<td>，其中表格、tbody、tr 和 td 没有任何固定宽度设置。
（注意：我很清楚，在 IE 10 上，我将需要各种带前缀的 CSS 属性，例如“-ms-flex-wrap：wrap”，而不是我正在使用的通用现代属性。但在 IE 11 上，在开发人员工具中，它是告诉我 jsfiddle 中的内容已被接受（未划掉），因此我使用代码的简化版本来演示 IE 11 上的问题。）
这是在 jsfiddle 链接中找到的代码：
<table>
<tbody>
<tr>
<td>
<div class="flex-cont">
<div class="flex-myitem">abc</div>
<div class="flex-myitem">abc</div>
<div class="flex-myitem">abc</div>
<div class="flex-myitem">abc</div>
<div class="flex-myitem">abc</div>
<div class="flex-myitem">abc</div>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
<div class="flex-myitem-purple">abc</div>
<div class="flex-myitem-purple">abc</div>
<div class="flex-myitem-purple">abc</div>
<div class="flex-myitem-purple">abc</div>
<div class="flex-myitem-purple">abc</div>
<div …推荐指数
解决办法
查看次数
响应式 html5：百分比与媒体查询
我正在开发一个简单的 html 5 游戏，类似于http://www.ebaumsworld.com/games/play/80617036/。
我需要使游戏具有响应性，我想问是否应该使用CSS 媒体查询，或者是否应该使用元素宽度和高度的百分比尺寸进行基于百分比的布局。
哪条路最好走？
推荐指数
解决办法
查看次数
css 图像被截断
我的页面上有一张图像，该图像从底部被咬掉。我有
html, body {
max-width: 100%;
overflow-x: hidden;
}
.image_button{
border-radius: 20px;
border: 5px solid #d3d3d3;
float: left;
margin-right:20px;
}
image-responsive is present in bootstrap.
text-center is in bootstrap
在我的代码中，但这只是为了避免页面上的侧滚动。有什么方法可以避免侧滚动并且不从底部剪切图像？
<div id="gender" style="visibility: hidden ;" >
<h4 style="left: 20%; top: 10%;position: absolute; " class="text-center" ><b>Click on the female or male figure to select a gender.</b></h4>
<div style="left: 20%; top: 20%;position: absolute;" >
<img id="man" src="images/man.png" onClick="pg4('bh'); sess2('gender male');" class="img-responsive image_button">
<img id="woman" src="images/woman.png" onClick="pg4('bh'); sess2('gender female');" class="img-responsive image_button">
<h4 style="left: …推荐指数
解决办法
查看次数
页面右侧的空白区域
我的网页右侧出现不需要的可用空间问题。这是我的网页：
我添加这些代码
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
它解决了我的问题，但是它禁用了网页上的页脚图标，所以我该怎么做？
这是网页：
推荐指数
解决办法
查看次数
使用 Bootstrap 设计递增和递减数字
我正在尝试获取如下所示的用户界面，并且需要在数字下方有一个边框，如图所示：
但我使用下面所示的代码得到了不同的结果。有人可以帮我设计这个吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.input-number{
margin: 0 15px;
width: 50px !important;
}
</style>
</head>
<body>
<div style="width:150px;padding:50px;">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</body>
</html>推荐指数
解决办法
查看次数
使用 Flutter MediaQuery.of(context).size.width 中的 device_preview 插件不会给出模拟手机的 witdh
为了在 Flutter 中练习响应式设计，我决定使用device_preview。我尝试了不同的手机。但每次我都得到原始设备的宽度。
例如，原始设备的 witdh 为 1700px，但模拟设备的 witdh 为 600px。我无法获取模拟设备的宽度。
有什么设置可以解决这个问题吗？或者它基本上是如何运作的？
推荐指数
解决办法
查看次数
不同的屏幕尺寸有不同的背景图像
我试图为不同的屏幕尺寸提供不同的背景图像。背景图像应该完全可见。我尝试了此解决方案，在此处输入链接描述，但没有成功。首先，如何为不同的屏幕尺寸赋予高度属性，以及适用于手机屏幕、平板电脑屏幕和桌面屏幕的图像尺寸是什么。
.miracle {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
}
/*--For mobile devices--*/
@media (max-width: 480px) {
.miracle {
background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
}
}
/*-----For tablets: ---------------*/
@media (min-width: 481px) and (max-width: 1024px) {
.miracle {
background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
}
}
/*-----For desktop devices ------*/
@media (min-width: 1025px) {
.miracle {
background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
}
}<div class="miracle"></div>推荐指数
解决办法
查看次数
为什么100vh不走全屏？
这是我第一次遇到此类问题。我正在尝试制作响应式导航栏。在一定宽度下，我希望我的导航链接 div 转到右侧栏。但即使在给出 100vh 后，导航链接 div 也没有占据整个视口高度。这是代码 -
超文本标记语言
<header>
<nav>
<div class="logo">Logo</div>
<div class="nav-items">
<li><a href = '#'>Link-1</a></li>
<li><a href = '#'>Link-2</a></li>
<li><a href = '#'>Link-3</a></li>
</div>
</nav>
</header>
社会保障体系
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background: blue;
nav {
height: 65px;
max-width: 1340px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
padding: 1rem;
.logo {
font-size: 2rem;
color: black;
}
.nav-items {
li {
display: inline;
a {
color: black;
text-decoration: …推荐指数
解决办法
查看次数