@media min-width没有覆盖正常的CSS吗？
@media min-width是CSS中的一个媒体查询规则，用于根据设备屏幕宽度来应用不同的样式。它可以用于响应式设计，使网页在不同屏幕尺寸下呈现不同的布局和样式。
@media min-width的作用是当设备的最小宽度大于或等于指定的值时，应用媒体查询中的样式。它可以用于创建适应不同屏幕尺寸的布局，提供更好的用户体验。
使用@media min-width可以实现以下功能：
- 响应式布局：根据设备屏幕宽度调整页面布局，使其在不同设备上显示良好。
- 媒体特性适配：根据设备屏幕宽度应用不同的样式，以适应不同的媒体特性，如打印机、屏幕阅读器等。
- 自适应字体：根据设备屏幕宽度调整字体大小，以提高可读性和用户体验。
应用场景：
- 响应式网页设计：通过@media min-width可以根据设备屏幕宽度调整网页布局，使其在不同设备上呈现最佳效果。
- 移动优化：通过@media min-width可以为移动设备提供特定的样式和布局，以提供更好的移动用户体验。
- 多屏幕适配：通过@media min-width可以根据不同屏幕尺寸调整样式和布局，以适应各种终端设备。
腾讯云相关产品推荐： 腾讯云提供了一系列与云计算相关的产品和服务，以下是一些与CSS和前端开发相关的产品：
- 云服务器（CVM）：提供灵活可扩展的云服务器实例，用于部署和运行网站和应用程序。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储和分发静态资源文件，如图片、CSS和JavaScript文件。
- 内容分发网络（CDN）：提供全球加速的内容分发网络，用于加速静态资源的传输，提高网站的访问速度。
- 云监控（Cloud Monitor）：提供全面的云资源监控和告警服务，帮助用户实时了解网站和应用程序的运行状态。
- 云安全中心（Cloud Security Center）：提供全面的云安全解决方案，包括漏洞扫描、风险评估和安全事件响应等功能。
更多腾讯云产品和服务的详细介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
很难让CSS在不同的设备上工作。我有一台台式机、一台iPad 4和一台索尼S8。使用以下CSS媒体查询：
@media screen and (min-width: 1200px){
body{
background: red;
}
}
@media screen and (min-width: 768px) and (max-width: 979px){
body{
background: green;
}
}
@media screen and (max-width: 767px){
body{
bac
浏览 15提问于2018-02-22得票数 0
我正在尝试使用媒体查询来完成我的第一个项目，而且我面临着一个奇怪的问题。
我开始为手机开发，使用这个媒体查询：
@media screen and (max-width:479px) {}
然后，我为大型移动设备开发了以下功能：
@media screen and (min-width:480px) and (max-width:600px) {}
那么对于小药片：
@media screen and (min-width:601px) and (max-width:720px) {}
和更大的片剂：
@media screen and (min-width:721px) and (max-
浏览 1提问于2014-05-15得票数 1
回答已采纳
3回答
因此，我使用引导来创建一个导航条，并使用他们的示例导航条作为我的基础。我摆弄了引导文件，这样导航条就会在995 at而不是768 at上崩溃。正因为如此，我的肚脐按钮一直停留在左边，直到窗口大小低于768 my。我发现如果我改变了
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
至
@media (min-width: 995px) {
.navbar-header {
float: left;
}
}
那它就能正常工作。
不管我怎么说
@media (m
浏览 7提问于2015-07-28得票数 2
回答已采纳
1回答
Bootstrap.min.css覆盖了我在外部CSS文件中编写的所有内容。内联似乎是唯一可以覆盖Bootstrap的东西。有人知道如何使用下面的CSS脚本和内联脚本吗？
@media (min-width:768px){.container{width:80%}}
@media (min-width:992px){.container{width:80%}}
@media (min-width:1200px){.container{width:80%}}
浏览 0提问于2019-12-20得票数 0
谷歌一直抱怨我的网站对移动设备不友好。这是他们告诉我的，我的网站上的一个随机页面对Google Bot mobile是什么样子的：
下面是相同的页面在Google Chrome开发人员工具设备模式中的外观：
我已经为我的网站实现了响应式设计，尽管它还不是100%完美的(正如你可以看到的，内容比第二张图片中的屏幕略宽)，但它看起来肯定不像Google Bot mobile告诉我的那样。当我在一个真实的移动设备上测试它时，它看起来和Google Chrome开发者工具的设备模式一模一样。
你知道这里会出什么问题吗？
以下是报头中的重要部分：
<meta name="
浏览 0提问于2016-03-20得票数 1
2回答
我不知道为什么我的CSS media查询不能正常工作：
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.bottom-right{margin-top:20%;}
.bottom-right h2{font-size: 0.9em;}
.buttons{font-size: 1.0em;}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 993px) {
.solodesktop{disp
浏览 4提问于2016-03-02得票数 0
回答已采纳
2回答
我正在使用媒体查询来控制一些元素的‘页边距-顶部’和‘缩放’CSS属性，但由于某种原因，它不能像预期的那样工作。 以下是我的CSS媒体查询： /* (1440x900) WXGA+ Display */
@media screen and (max-width: 1440px) {
.multipleVendors {
zoom: 0.85;
}
.searcher {
zoom: 0.90;
margin-top:100px;
}
}
/* (1920x1080) Full HD Display */
@
浏览 21提问于2019-01-10得票数 0
回答已采纳
1回答
CSS媒体查询的问题
、、、、
我正在尝试获得我的应用程序的正确点，以便我可以将媒体查询添加到我的应用程序中。我找到了一个名为的很棒的网站来测试我的应用程序。
我运行我的应用程序，看到它显示我的应用程序在1257宽度和1576宽度之间刹车，然后我的应用程序就会恢复正常。所以我编辑我的查询来满足解决问题的需要，但它仍然不起作用？
以下是我目前遇到的问题：
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Sty
浏览 0提问于2014-06-05得票数 0
2回答
我已经编写了3个不同维度的媒体查询。初始样式为320 is宽度，另一个查询为
320 and及以上
768px
1024
css的初始尺寸为320 is，320 nad高于nad 768 is。但是1024 1024px不适用.
这是我的css查询
@media (min-width: 320px) {
For above 320px
}
@media (min-width: 1024px) {
For 1024px; this is not applying
}
@media (min-width: 768px) {
for 760px
}
浏览 0提问于2012-06-15得票数 0
回答已采纳
3回答
我非常想知道CSS文件中语句的执行顺序。我在CSS文件中有以下CSS：
/* screen width larger than 800px */
@media screen (min-width: 800px) {
.indexphototd {
width:200px !important;
}
.indexphoto {
width:200px !important;
}
}
/* screen width larger than 1200px */
@media screen (min-width
浏览 3提问于2013-05-15得票数 5
回答已采纳
我正在帮助设计一个正在用Alpha Anywhere构建的应用程序。我们的目标是使用@media标签来支持不同的风格，以适应纵向的小型手机、纵向的大型手机、横向的手机和平板电脑。 我的想法是使用@media screen and...来定义大小的范围，并在其括号中定义适当的容器和字体大小的样式代码，以使每种格式都适用于将要显示的设备。 因为我使用的是Alpha Anywhere，所以有一个用于CSS的选项卡。我需要把所有的CSS放在这一个位置，这样我就不能引用每个不同样式的不同.css文件。我希望将一种样式的代码放在一种媒体范围内，将另一种样式的代码放在另一种样式中，以此类推。是否可以通过@
浏览 12提问于2019-01-15得票数 0
1回答
我开始用编写自己的设计系统。但我正在努力使我的组件具有响应性。
// Container.tsx
import React from 'react'
import styled from 'styled-components'
import { media } from '../utils/mediaQuery'
export const StyledContainer = (isFluid: boolean) => {
return styled(
({ element: Component, containerRef,
浏览 10提问于2019-11-12得票数 0
我们的设计师正在他的4k显示器上测试一个响应式网站。其中一个断点如下：
<link rel="stylesheet" media="all and (min-width: 1000px)" href="/css/desktop.css" type="text/css" />
<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999px)" href="/css/tablet.cs
浏览 0提问于2018-10-26得票数 11
2回答
我想隐藏一个段落标签的内联css背景图像，以隐藏在移动设备上。我该如何实现这一点呢？ <div class="items-body">
<p
style={{ background: `url('${item.image.childImageSharp.fluid.src}') no-repeat right 30px` }}
><Content source={item.sectiontext} /> </p>
</div> 我在一个单
浏览 13提问于2020-09-03得票数 0
回答已采纳
3回答
我试图在我的一个网站上使用媒体查询，一开始它运行良好，但后来当我完成所有媒体查询部分的网站设计都不正常，这是我在style.css中使用的媒体查询。
@media screen and (max-width: 768px) {}
@media screen and (max-width: 375px) {}
@media screen and (max-width:1920px) {}
@media screen and (max-width:1440px) {}
在intex.html文件中：
<meta name="viewport" content="wid
浏览 5提问于2015-06-29得票数 1
回答已采纳
编辑:在我的代码中发现了一个严重的错误，与其他有同样问题的人无关，我只是在一个媒体查询中丢失了一个"}“，而不是那些不起作用的查询。
请像我5岁一样解释一下。
因此，我试图让我的洗牌一些利润率，改变一些浮动，一般是反应。我好像没办法让它起作用。基本上，我想让@media查询中的CSS在浏览器窗口的宽度(而不是设备屏幕宽度)到达某个标记时切换。现在这不管用。我想我应该使用CSS的级联特性来覆盖这样一个事实:当所有的@media CSS都在最低的最大宽度以下时应该是活动的。情况似乎并非如此，相反，我从1600 at获得的CSS分辨率要低得多。
所以我读了起来，读得越多，我就越困惑。请帮帮我
浏览 7提问于2015-02-07得票数 0
回答已采纳
2回答
我觉得媒体查询真的很容易。
css
.outer{
background-color: blue;
width: 1500px;
}
.flipcardscontainer{
background-color: red;
height: 50px;
}
@media only screen and (min-width : 622px) {
.flipcardscontainer{
width: 506px !important;
}
}
@media only screen and (min-width : 422) {
.flip
浏览 2提问于2014-05-09得票数 0
回答已采纳
1回答
我有一些媒体查询不能正常工作，基本上下面的css应该在桌面上显示一些元素，在手机上显示一些元素。
例如，在手机/平板电脑上隐藏一些“悬停”元素，但让它们在桌面设备上可见。
@media (max-width: 1024px){
.desktop_only {
display: none !important;
}
}
@media (min-width: 1025px){
.mobile_only {
display: none !important;
}
}
在CSS4中，我们可以更容易地使用“指针”特性：，但我不能使用它，因为这是
浏览 5提问于2016-04-20得票数 0
回答已采纳
我不想在我的CSS上一直重复相同的属性。
在我的例子中，我有三个媒体查询，我在其中更改了特定元素的padding属性，并在需要将其作为开头之后：
@media (max-width: 1000px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
@media (max-width: 750px){
ul > a{
padding-top: 16px;
padding-bottom: 16px;
}
}
@m
浏览 0提问于2016-04-29得票数 0
2回答
你好，我有一个关于媒体查询特定宽度而不是其他宽度的问题。
我想要的目标是768px的屏幕宽度，没有其他宽度。现在，我正在使用它作为目标
@media (max-width:769px) and (min-width:768px) {
/* my css */
}
这是正常工作，但它阻止了我下面的其他媒体查询不起作用。例如，当我去的时候：
@media (max-width:769px) and (min-width:768px) {
/* my css */
}
@media (max-width:600px) {
/* this css will not work
浏览 0提问于2016-08-12得票数 1
我将此表单放在页面的页脚(只有一个文本框和一个按钮)。我想尝试将@media应用于它，基于可用的视口宽度...例如，在我的例子中，这个表单的全宽大约需要270px左右。因此，我想应用CSS来说明：
if the width available is at least 270px
apply first set of CSS rules
else
apply second set of CSS rules
如何使用@media完成此操作？
浏览 0提问于2013-07-14得票数 40
回答已采纳
2回答
我试图使用媒体查询，使宽度的div 100%为较小的屏幕。然而，媒体查询似乎不适用于我的css文件。css文件的部分代码如下：
@media all and (max-width: 500px) {
body {
background-color:lightblue;
}
}
@media all and (min-width: 500px) {
body {
background-color:red;
}
}
然而，背景颜色的变化是看不到的。当我将媒体查询放在html文件上时，它似乎是有效的。
<link rel="
浏览 8提问于2015-06-24得票数 1
回答已采纳
4回答
我有一个关于CSS媒体查询的问题。我的问题是，我的css媒体查询的顺序是否会有所不同。
例如：
<link rel="stylesheet" href="desktop.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="mobile.css" media="">
<l
浏览 0提问于2012-12-11得票数 0
4回答
我设计了一个模板，我希望它能够响应，所以我包括了一些媒体查询文件来实现它。但是，最大宽度:500 is文件没有正确检测。我真的不知道怎么解决它。该网站在所有其他桌面屏幕分辨率工作良好。我不知道为什么它不能在低于500‘t的屏幕分辨率下工作。我在css文件(媒体标签)中所做的就是将菜单容器的显示转换为none，并通过写display:block激活移动容器，从而使另一个菜单被自动激活。我怎样才能解决这个问题？
<link rel='stylesheet' media='screen and (max-width: 1024px)' href='cs
浏览 4提问于2014-07-15得票数 0
回答已采纳
1回答
早些时候，我问我的个人资料设计，我说我没有去使用相同的设计在手机上，但我改变了我的想法，然而，我使用的旗帜上的主要风格，但当我使用height:10%;和拥有相同的课程，但与height:30%;是不会改变。我有一个不同的css，我做同样的事情，但在那里，它的工作(大多数情况下)。
html：
<?php if($user_visible == 'a'){ ?>
<!--Profile picture, banner, and main information-->
<div class="profile-wrapper"
浏览 0提问于2016-10-18得票数 0
回答已采纳
1回答
我正在尝试根据屏幕的大小在导航栏上显示和隐藏一些选项。我已经用VisualStudio代码编写了我的代码，它工作得很好，但是当我把自定义的CSS放在我的主题的自定义部分(使用故意空白)的附加CSS选项下时，它不起作用。我尝试了很多在这个网站上提出的类似问题的解决方案，但它们都不起作用。 我的CSS代码的其余部分正常工作，所以查找CSS文件应该不是问题。 这是我的代码： 当屏幕变小时，我会删除选项卡，并将它们移动到名为"more“的下拉菜单中 .custom {
font:'Arial';
}
.logo {
height: 100px;
wi
浏览 23提问于2021-04-11得票数 1
因此，我已经看到有一个不同的css称为取决于屏幕有多大。
示例正常大小：
注意，红栏没有任何边距底部，文本是自定义css (在额外的css文件中提供，而不是bootstrap.css)。
小尺寸的例子：
请注意，我添加的css基本上已经消失了。
我怎么才能解决这个问题？我以为这是
@media (max-width: 767px)
但是，在将这个添加到额外的css文件后，它不会被修复。
这是我使用的CSS：
#The red bar
.top .alert {
margin-bottom: 0px;
}
#The text css
.very-big {
color: #2
浏览 1提问于2014-02-19得票数 1
回答已采纳
如何制定只适用于平板电脑和手机(不适用于桌面)的CSS规则？如果我用：
@media screen and (max-width: 1400px)
“屏幕”的意思是“浏览器窗口”，而不是“设备屏幕”。因此，如果我缩小桌面上的浏览器窗口，这个CSS规则将被应用。
我看到媒体手持设备被废弃了。
@media screen and (max-device-width: 1400px)
工作正常，但是设备宽度似乎也被废弃了，根据：
浏览 4提问于2020-05-02得票数 0
3回答
我对320 in宽度的媒体查询有问题。在我的标准网页决议的一般css中，我有以下内容：
body {
background-image:url(../Images/FondoSL.png);
font-family: 'Open Sans', sans-serif;
font-size:1em;
}
.headerPartOne p{
font-size:0.94em;
color:#676767;
margin-left:30px;
margin-top:5px;
margin-bottom:0;
}
.co
浏览 6提问于2014-01-18得票数 0
回答已采纳
2回答
下午好,
我试图让我的网站响应式的，但我不能让它工作。我已经用谷歌搜索了大约一个小时或三个小时，我几乎可以肯定我没有做错，但它仍然不起作用。
下面是我的代码：
@media screen and (min-width: 1230px) {
}
@media screen and (min-width: 750px) and (max-width: 1229px) {
body{
display: none;
}
}
我能最好地描述这个问题的最好的方法是，当我用浏览器全屏访问我的网站时，它会像我希望的那样正常加载，但当我缩小窗口时，它应该会加载css的另一部分，但不
浏览 0提问于2014-10-08得票数 2
2回答
我做了整个网站与雷姆单位，因为我使用引导4 aplha版本的，现在将开始做响应的网站。
我有html {font-size: 16px}，所以我需要知道是否可以缩小html在媒体查询中的大小？类似于：
/****responsive css***/
@media only screen and (max-width: 1280px) {
html{
font-size: 15px;
}
}
@media only screen and (max-width: 1199px) {
html{
font-size: 14px;
}
浏览 3提问于2016-02-06得票数 0
回答已采纳
3回答
我正在尝试用我的custom.css覆盖引导媒体查询
下面是引导查询
@media (min-width: 768px)
.navbar-right {
display: none;
}
我什么也得不到。我想要做的是
@media screen and (min-width: 900px){
display:none;
}
在我如何用我的custom.css重写引导查询方面，任何帮助都将不胜感激
谢谢
浏览 2提问于2017-09-08得票数 0
我已经为我的一个博客定下了一个主题。是否可以将样式表(大多数主题上的style.css)封装在@media查询中，并使整个主题响应或流畅，这样它在所有浏览器和屏幕分辨率上都能正常工作吗？
如果是的话，有谁知道我怎样才能做到这一点？还是有更好、更简单的方法来完成这一任务？
我的意思是，我能把这个放在我的style.css顶部吗？
@media screen and (max-height: 700px) {
// style.css rules
当然，在最底层，只是：
}
这会使我的整个主题变得动荡不安或反应灵敏，还是比这更深入？在这方面的任何指导将不胜感激！
浏览 0提问于2013-02-16得票数 -1
回答已采纳
好吧，这有点奇怪，但是当我完成对平板电脑大小的编辑时，收到的样式表是移动版本的。我已经提到过像这样的媒体查询
@media (min-device-width: 768px) {...}
我在引导中工作，不太确定为什么会发生这种情况。上一次，当我这样做的时候，我首先对中型设备进行了编码，然后对较小的设备进行了编码。这一次，我首先按照MOBILE FIRST.Then的引导行为移动版本编写代码，然后为768 in及以上版本构建相应的站点，甚至在此过程中刷新了页面几次，直到完全是done.Then，页面突然呈现了移动样式表的样式，命名为STYLE.CSS，里面没有媒体查询。这次采用自下而上的方法似
浏览 1提问于2014-12-27得票数 0
2回答
我一直在尝试媒体查询，并认为我理解了它是如何工作的。
我的HTML中有以下代码：
<link rel="stylesheet" type="text/css" media="screen and (min-width: 0px)" href="mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 350px)" href="tablet.css
浏览 0提问于2013-11-14得票数 0
1回答
在我的媒体查询混合包含的设置中，我很难获得更改样式的方法。我首先编写移动样式，然后在这些媒体查询中声明用于大屏幕的样式。
在我的医生的顶端。
@mixin breakpoint($point) {
@if $point == medium {
@media (min-width: em(480)) { @content; }
}
}
@mixin breakpoint($point) {
@if $point == large {
@media (min-width: em(800)) { @content; }
}
}
从头到尾，我都有这样的风格：
.co
浏览 0提问于2013-10-25得票数 1
回答已采纳
我已经完成了一个网站，它现在在浏览器中运行良好。我被要求使它与安卓，iPhone，iPad，平板电脑和网络等兼容。我正在使用bootstrap asp.net。
现在我正在尝试，但找不到任何答案。我正在使用这些内联媒体查询
@media screen and (min-width:0px) and (max-width:320px){/*Any css will be defined here*/}
@media screen and (min-width:321px) and (max-width:480px){/*Any css will be defined here*/}
@media
浏览 3提问于2013-08-24得票数 2
回答已采纳
我在文档的头部使用了主要的媒体断点：
<!-- Base = Normalize for basic and small screens -->
<link rel="stylesheet" href="css/base.css">
<!-- Enhanced = Styles for devices that understand media queries -->
<link rel="stylesheet" href="css/enhanced.css" media=”screen,
浏览 2提问于2012-09-08得票数 0
回答已采纳
1回答
仅适用于电话的视口
、、、
我试图使一个响应式的布局，有一个电话视图和一个正常的视图只(即。平板电脑应正常加载页面)。
就CSS而言，一切都运行正常，然而，当平板电脑处于纵向模式时，视口却搞乱了缩放。(它们被放大到其像素宽度)
有没有办法让平板电脑缩小到整个页面，同时仍然让手机加载到他们的大小？
这是我的资料..。将初始比例更改为.75几乎可以正常工作，但随后iPhone会在横向模式下加载正常的站点，这是我不想要的。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
浏览 0提问于2013-06-26得票数 0
2回答
我将保持简洁..使用Zurb Foundation 5构建站点。媒体查询不起作用。代码如下：
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>...</title>
<link rel="stylesheet" href="css/foundation.css" />
<
浏览 3提问于2014-02-02得票数 4
1回答
对于媒体查询断点应该是什么，我真的很困惑。例如，我习惯于使用比下一个中断点少一个像素的方式
@media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx
@media screen and (min-width: 750px) and (max-width: 969px) {}
etc.
但是有些人使用的是精确的值，比如
@media screen and (max-width: 750px) {}
@media screen and (min-width: 750p
浏览 11提问于2017-07-29得票数 0
回答已采纳
2回答
我设置了许多查询，但是，我意识到它们都没有真正起作用。所以我开始一个接一个地测试它们。1217.css适用于任何大于1201 is的东西。1200.css用于任何高达1200 is的东西，600.css用于任何高达600 is宽度的东西。现在，当我调整窗口的大小时，我看到了从1200.css到1217.css的变化，但是，当我将窗口宽度降低到600 to以下时，什么都不会发生。就好像没有这样的样式，1200.css仍然适用于1200 as以下的任何东西。为什么不使用600.css样式？
<link rel="stylesheet" type="text/css&#
浏览 6提问于2014-03-01得票数 0
回答已采纳
我肯定有人问过这个问题，但我似乎找不到一个不使用SASS的例子。我只是有一个正常的CSS文件，我正在使用。我想让汉堡菜单变成更大尺寸的水平菜单。(@media only screen and (min-width: 64.063em))我看到一些帖子说要像这样更新settings.scss文件()，但是我不会在这个项目中使用SASS。我只是不知道是什么触发了菜单从移动到桌面的转变:媒体查询或javascript。
浏览 2提问于2015-07-05得票数 0
回答已采纳
我有这个网站，我目前正在尝试转换为反应css媒体查询电话和平板电脑。
我刚刚遇到的问题是，media query的css没有被读取，或者根本没有反应。
有什么解决办法吗？谢谢
浏览 3提问于2016-10-16得票数 0
回答已采纳
Here is the link to the fiddle 我有 .hydrocarbons {
float: left;
width: 85.25%;
}
.claymore {
float: left;
clear: right;
} 在媒体@media中，以及 .hydrocarbons {
width: 91.67%;
} 在最小的“媒体”中。 在中等视图中，一切都像它应该的那样工作，显示是正常的，没有被最小的@media覆盖。但是大的视图被媒体@media很高兴地覆盖了，我不明白为什么
浏览 22提问于2020-11-09得票数 2
3回答
如何编写仅针对1024px宽度的媒体查询？
这是我现有的css，我已经写了320px的宽度和更多
@media (min-width: 320px) {
}
宽度只有1024px的方法是什么？
浏览 0提问于2012-06-15得票数 1
回答已采纳
2回答
我正在为我的网站做一个响应式的设计。
为此，我制作了两个单独的css文件：
<link rel="stylesheet" type="text/css" media = "screen and (min-device-width: 500px) and (max-device-width: 1500px)" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-de
浏览 0提问于2012-12-09得票数 1
我有bootstrap.min.css，它定义：
@media (min-width: 768px) .modal-dialog {
width: 600px;
margin: 30px auto;
}
@media (min-width: 992px) .modal-lg {
width: 900px;
}
我想要宽度:自动；用于“模态-对话模式-lg”屏幕之间的768至992 to。因此，我尝试在我的css：
@media (min-width: 768px) .modal-dialog {
width: auto !important;
}
但这并不适
浏览 1提问于2015-07-29得票数 0
回答已采纳
1回答
当屏幕宽度小于320px时，我试图更改CSS。
目前，它被卡在min-width媒体查询中，当我缩小屏幕时，它不会转到max-width媒体查询。
我将这个html添加到索引页：<meta name="viewport" content="width=device-width">
下面是我的CSS的一部分：
div#imageColumn {
color:white;
background-color:black;
margin:10px;
}
div#contentColumn {
float:left;
c
浏览 1提问于2017-05-05得票数 0
回答已采纳
我在我的页面中有不同的视图，每个视图都有关键帧动画。通过媒体查询显示或隐藏每个部分。
假设理论上我引入了一个单独的CSS样式表，或者我对CSS有一些限制。如果在这种情况下我有两个同名为"fadein“的关键帧样式规则，我会遇到什么问题吗？最后一条声明wins是正确的吗？或者，嵌套在媒体查询中的样式规则是否以不同方式处理？
@media (min-width: 0px) {
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity:
浏览 3提问于2019-10-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
