问题标签 [responsiveness]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
727 浏览

css - 如何在 Bootstrap-3 中裁剪轮播图像的侧面?不横向调整大小

我正在使用 Bootstrap 的示例 'carousel.css 和 html' 使用图像大小 1500x500

如果浏览器窗口变得小于图像,我如何保持图像的高度,并且在不扭曲图像的情况下从每一侧裁剪等量,使高度保持在 500 像素?

这是 Bootstrap 提供并且我正在使用的相关 CSS。

这是HTML:

先感谢您。我已经搜索了这个论坛以及其他论坛,但似乎无法破解这个。听起来很简单。

0 投票
0 回答
46 浏览

css - Meta Tag 缩放和 css 媒体查询

为了正确查看该站点,我正在使用initial-scale 0.3.

内容还可以,但我希望我的标题图像更大一点。我正在使用 CSS 媒体查询,但它不起作用。随着(元) initial-scale 1我的查询被解雇,所以我认为我必须重新考虑这一点。

我是否必须使用因子 3 分别计算标题图像以适应 0.3 比例?

如果我将 css 媒体查询设置为 320 分钟宽度,则没有任何反应。诀窍是什么?

0 投票
2 回答
56 浏览

javascript - $(window).width() 在正常状态和检查元素上的响应状态的差异

我想知道为什么$(window).width()在浏览器标准和设备仿真模式下使用时会有所不同。

当我$(window).width()在宽度为 1024px 的浏览器上使用时,我在标准模式下得到了 1007 的值,但在设备仿真模式下使用它时,我得到了准确的 1024。

那么两者之间有什么区别,无论如何要检查在正常窗口模式和设备仿真模式下准确的特定宽度?

我现在使用的是$(window).width()检查窗口大小,所以无论如何要检查这个旁边的实际大小?

0 投票
2 回答
35 浏览

html - 图片不垂直调整大小/不垂直居中

当浏览器水平收缩时,图片(现在的 bean 先生)可以很好地调整大小,但如果浏览器垂直收缩,则不会做任何事情。我希望该图片始终保持在页面的中心。

https://jsbin.com/mehihimevi/edit?html,css

0 投票
1 回答
66 浏览

jquery - 响应式网站中的 CSS/jquery 错误

首先让我说我是一个非常新手的编码器,但是在询问任何内容之前,我已经在这里和其他地方进行了彻底的搜索......而且我基本上知道我的网站有什么问题,但到目前为止我没有尝试过似乎工作。

我正在为我的朋友制作一个“游戏部落”一个寻呼机网站,作为我的第一个官方直播网站……我决定使用修改后的引导主题,而不是从头开始,因为我对此还是很陌生…… .

网站网址是www.darknessmilitia.com

我从一开始就遇到的主要问题之一是,当您单击导航中的任何链接时,即使您继续向下滚动页面,它也会保持“活动”颜色,并且如果您不小心双击了链接,滚动会出现几秒钟的故障,就像你在用 jquery 滚动动画玩拔河一样......

我发现的所有其他错误都仅在移动视口上。

1.在移动设备上横向查看时,花名册面板/表格会缩短

  1. 无法弄清楚如何在“非粘性”模式下让花名册向上折叠,因为它在您第一次加载时位于页面底部....如果这不可能,我想以某种方式使其勉强低于视口并强制他们单击按钮以首先向下滚动并将导航贴在顶部。

3.单击链接后,移动设备上的导航菜单不会关闭....在您尝试登录之前,这不是什么大问题,模式会放在导航菜单后面。我想我可以只更改模态的 z-index,但我更愿意在单击链接时让它消失。

如果我的代码有点乱,我提前道歉,我正在尽我所能:(

感谢您的阅读,非常感谢任何建议!

0 投票
0 回答
136 浏览

css - Woocommerce - 有没有办法让产品缩略图“流动”响应?

我的网站在这里-

正如你所看到的,我正在使用 wordpress 和 woocommerce,并且我对产品档案的样式非常重视 - 我还在使用基于 Underscores 的自定义主题。

我想要的是一个网站,在桌面尺寸(>992 像素)时每行显示 6 个产品,在平板电脑横向显示 4 个产品,在手机尺寸显示 2 个产品。平板电脑和手机尺寸效果很好,但我无法阻止桌面视图将所有图像分流到页面左侧。

我尝试将列数更改为 6 并调整 css 以适应桌面视图,它也会弄乱平板电脑的大小。我也尝试过使用引导程序,但这似乎让事情变得更加错误!

有没有办法用 css 做我想做的事情,或者我必须以某种方式完全删除 woocommerce.php 文件中的列?

提前谢谢了!

0 投票
1 回答
1785 浏览

css - 如何设置 12 列宽度为 960 像素但行宽度为 1280 的引导网格?

如何为 12 列设置 960 像素的引导网格,但每行的宽度为 1280 像素,因此只有行背景图像/颜色的宽度为 1280 像素,并且在 160 像素(1280-960 / 2)的两侧都有填充?

在此处输入图像描述

0 投票
0 回答
79 浏览

css - 如何在 woocommerce 中更改产品图像窗口

我正在尝试将 400x400 的图像作为我的产品图像。但是这个图像显得拉伸和模糊。我认为的原因是产品图像的默认窗口大小为 562x562。将鼠标悬停在图像上时,图像的实际分辨率即 400x400 是可见的。那么有没有办法改变woocommerce中窗口的尺寸?这是链接http://mytalaash.com/product/image-2-2/

0 投票
1 回答
90 浏览

javascript - 如何为网站演示制作响应式面板切换选项?

我想知道如何为网站的演示制作响应式切换选项面板。我想知道用户何时单击任何响应式图标,例如桌面、移动设备等。模板应自动更改其响应性。以下是该网站的示例链接,该链接在页面底部具有相同的响应式面板选项。

http://kopatheme.com/demo/upside-demo/

我想要我的演示使用相同的面板。

0 投票
1 回答
243 浏览

html - AngularJs 在移动设备上的响应能力

我使用材料 angularjs 创建了一个 HTML 页面,该页面在浏览器上具有不同大小的桌面上运行良好。

但是,每当在移动设备上打开同一个页面时,它的行为就像桌面应用程序一样。它没有显示其对移动设备大小的响应能力。

请帮我解决这个问题。