与父 DIV 内的中心子 DIV 对齐
当尺寸小于 768px 时，我试图在页面中间对齐 DIV 我有一个包含三个不同 DIV 的父 DIV.因此，我使用了媒体查询，并在一个显示尺寸内将这个“clear:both"添加到了 display_type 和 buttons 类.因此，这样每个 div 都将在自己的行中.
排序后:
..
media-queries相关内容
图像在移动设备上没有变化
我希望将用作背景的图像通过 css 媒体查询更改为较小的版本. 我不太清楚为什么它不能在移动设备上运行. @media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : Landscape){#slide1 {背景: url(../images/slides/mobiletest.jpg
..
当窗口调整为最大宽度减去滚动条宽度时，Firefox 中的媒体查询丢失
这是我第一次尝试响应式网站设计，但遇到了一个奇怪的问题，即在 Firefox 32 for Windows 7 中媒体查询在特定窗口宽度处丢失(到目前为止). 当缓慢调整窗口大小时，它可能会导致断点处(主要是)无样式的内容闪烁.如果我仔细调整窗口大小，我可以达到断点之间的宽度.我最终看到的是默认样式，因为媒体查询在这两种情况下都丢失了. 例如，max-width 768px 是一个断点
..
媒体查询后如何重置 CSS?
我的页面上有一些元素可以显示，有些元素通过媒体查询隐藏，最终导航消失并被响应式 jQuery 菜单取代.这一切都很好，但是当我之后调整浏览器的大小时，一些曾经隐藏的元素不是没有.这就是我的媒体查询 @media only screen和(最大宽度:1282px){#wrapMiddleNew { 显示:块；}} 我本质上想在同一个断点重新调整大小时再次隐藏它.这似乎不起作用. @media
..
媒体查询在 VueJS 样式标签中不起作用
我正在尝试在 VueJS 组件的样式标签中使用 @media.@media 中的样式始终有效，而不是使用宽度规则. 导出默认{}.header {高度:2000px；背景颜色:黑色；}@media only screen and (min-width: 576px) {.header {高度:2000px；背景颜
..
视口不缩放到中心
你好
..
使窗口变小时，如何使四个响应子项更改为 2 x 2 网格?
我想创建四个彼此相邻的孩子.现在，当视口宽度变小时，它们应该会折叠成两个乘两个网格.(不太重要:当它变得更小时，它们将是父级宽度的 100%.)现在我的问题不是用媒体查询创建它.问题是第一个孩子的身高比第二个孩子的身高大.当它们折叠成 2 x 2 网格时，第三个孩子总是放在第二个孩子的下方，而不是(我希望它是这样)在第一个孩子的下方. 我也尝试过 flexbox，但据我所知，不可能将其设为 4
..
Css - 如何停止带有尺寸覆盖的图像缩放?
我正在为宽度超过 2560 像素的屏幕创建简单的媒体.我的问题是我有标题并且超过 2600px 我将静态宽度设置为我的标题，当我调整窗口大小超过 2600px 标题有 2600px 宽度但图像正在调整大小.如何设置相对于标题宽度而不是屏幕宽度的图像大小?? #header {位置:相对；高度:100vh；.背景图片 {位置:绝对；顶部:0；左:0；高度:100%；宽度:100%；背景图片:url
..
有没有办法在某些条件下禁用媒体查询?
我在主站点以及站点的“预览"中使用相同的样式表(不在 iframe 中，因为我需要它是交互式的).问题是，预览不会占用 100% 的屏幕宽度，因此当媒体查询基于屏幕大小时，页面的行为会很奇怪.不过，我可以将编辑器/预览模式设为固定宽度，所以我想也许有某种方法可以在某些条件下禁用媒体查询?不过，我不知道如何处理.要么通过 javascript，要么可能在媒体查询之后加载一个额外的通用样式表，以某种方
..
垂直响应高度
我正在使用引导程序并在宽度方向上有一个响应式页面，但我也在尝试使其垂直响应.该页面最终将成为一种小部件，以便用户可以将其调整为任何类型的宽度和高度组合.一般来说，我在网上看到的研究都是与响应宽度相关的，或者如果他们谈论高度媒体查询，它只是构成页面的所有元素的一部分. 我发现在引导程序中设置断点有帮助，但几乎希望有一个 12 行的网格系统以及垂直断点.当受到高度限制时，并非所有布局都会看起来不
..
媒体查询不适用于 React App 中的样式组件
我无法让媒体查询与媒体模板和样式组件一起使用.我直接从文档中定义了一个 MediaQueries 模板: MediaQueries.js import { css } from "styled-components";常量大小 = {桌面:992，平板电脑:768，电话:576};//遍历大小并创建媒体模板const media = Object.keys(sizes).reduce((a
..
媒体查询的屏幕尺寸是如何测量的?
我正在构建一个响应式网站.有一组单独的 CSS 可用于智能手机.为此，我使用以下代码 @media all and (min-width: 760px) {.裹 {/*大屏幕的css在这里*/}}@media 不是全部和(最小宽度:760px){.裹 {/*小屏幕的css在这里*/}} 我的智能手机具有“屏幕分辨率:1080 x 1920".但它仍然显示小屏幕的 CSS.我很惊讶会发生这种情况
..
HTML响应式电子邮件:台式机/平板电脑的3列布局到电话的2列布局
尝试创建具有响应式HTML电子邮件，该电子邮件具有用于台式机/平板电脑的3列(多行)布局，并使用表(
)更改为2列(多行)以用于电话显示. ).我只在线找到了从大型设备的多列布局到主要使用表的单列小型设备布局的解决方案.如何编码这种布局的最佳策略是什么?我尝试引用主要来自Mailchimp，Campaign Monitor和Litmus的资源. 下面的代
..
如何按列拆分html表以进行响应式设计
我们已经检查了Web和SO的解决方案，但没有找到解决我们特定问题的方法. 我们将以下表格格式用于联系人公式:
COL1-2 COL3-4
COL1 COL2 COL3 COL4
..
CSS打印，页眉仅在首页宽度CSS上
我在徽标标签中有一个徽标.对于打印样式，我做了一个@print媒体查询CSS.如果我将其打印出来，徽标将打印在每一页上-但只应显示在第一页上. 尝试过: header {display:none;}@page:first {标头{display:block;}} 但是标题会在每页上删除！有小费吗?谢谢 解决方案 根据
..
放置媒体查询的最佳方法
用HTML放置媒体查询的最佳方法是什么? 在相同的CSS文件中，例如: .my-text {font-size:30px;}@media only屏幕和(最大宽度:768px){.my-text {font-size:24px;}}.my-img {宽度:100％;}@media only屏幕和(最大宽度:768px){.my-img {宽度:80％;}}{更多样式...}@media
..
Samsung Galaxy Tab 2 10.1的CSS媒体查询(Chrome浏览器)
有一个与此相关的问题: iPad的媒体查询(横向)也适用于Samsung Galaxy Tab 2(横向) 我的问题是什么媒体查询可以使Android Samsung Galaxy Tab 2 10.1(Chrome浏览器18)上的Chrome浏览器被检测为纵向模式. 我当前正在使用: @media all和(最小宽度:479)和(最大宽度:1199)和(最大设备宽度:1199px
..
媒体查询不起作用
CSS位于.scss文件中，并且通过Gulp进行了最小化，该版本可以正常工作.我正在测试响应速度是Chrome(调整网页大小).我已添加 HTML
..
iphone"landscape"上的font-size属性将在屏幕上显示.似乎更大?
我不明白为什么iPhone"landscape"上的font-size属性似乎比纵向或桌面浏览器大... 我有 body 字体大小:100％ 以及图像 17px 中的文字 肖像 我保证在 landscape 版本中，文本看起来更大. 解决方案 将此添加到您的网站中 body {-webkit-text-size-adjust:无；}
..
媒体查询不适用于手机屏幕尺寸
我已经使用网格布局创建了一个单价组件.对于375像素的移动屏幕，我希望将网格布局变成单个，以使其成为2行的两个div，而不是一列具有2的div.我为移动设备设置的媒体查询无法显示预期结果. HTML代码:
..