1回答
液体布局中的绝对div
、、、、
我有绝对定位图像(在左边)，其中有一些div的相对位置。在右边，我用浮标定位了div :对。有任何方法来调整大小的图像时，它接触浮动的div？不是浏览器的边缘。现在我做了这样的东西
@media screen and (max-width: 1860px){ .content-image img { max-width: 1250px; } }
@media screen and (max-width: 1780px){ .content-image img { max-width: 1200px; } }
@media screen and (max-width: 1710px){ .con
浏览 3提问于2014-06-09得票数 0
回答已采纳
2回答
我在一个网站上工作，那里的css看起来非常混乱。
我注意到的第一件事是媒体查询的顺序如下：这肯定是错的吧？按照正确的顺序重组是明智的吗？如果没有大量的工作，这是可能的吗？我想避免尽可能多的重复，所以哪一个是正确的顺序，我可以消除一些断点吗？
@media screen and (max-width:997px)
@media screen and (min-width:674px) and (max-width:997px)
@media screen and (max-width:997px)
@media screen and (min-width:998px)
@media screen
浏览 5提问于2016-03-31得票数 1
2回答
在移动优先响应式设计中，媒体查询的层次结构是什么？我将开始从较大的设备写入到较小的设备，反之亦然。
max-width: 1024{}
max-width: 768{}
max-width: 320{}
or
max-width: 320{}
max-width: 768{}
max-width: 1024{}
浏览 0提问于2016-12-08得票数 0
1回答
我想创建一个响应12 column grid system使用CSS FLEXBOX使我的网站响应。我不想使用任何css框架，相反，我想使用自己的12 column grid system并编写自己的css。我想要这样的class names，如下所示。任何帮助都将不胜感激。
我试过像下面这样的。请纠正我。
*,
*::after,
*::before {
box-sizing: border-box;
}
.container,
.container-full {
width: 100%;
margin: auto;
padding: 0 1rem;
}
.col-1,
.c
浏览 6提问于2022-05-16得票数 0
我正在使用kartik gridView来显示数据。我试图为列提供宽度，但我的数据溢出了它的单元格边界，并且没有换行。我使用了以下代码：
$columns = [
['class'=>'kartik\grid\SerialColumn', 'width'=>'38px'],
[
'attribute'=>'bill_number',
'vAlign'=>'middle',
&#
浏览 1提问于2017-10-03得票数 1
我想用react JS制作响应式页面。我在制作它时遇到了一些问题。我真的不知道媒体查询CSS是如何工作的，但对于@media(max-width:1024)和@media(max-width:768px)大小，它的工作方式与我预期的一样。我猜对于大小，@media (max-width:425px)也会像@media(max-width:768px)一样工作。但显然它是从@media(max-width:425px)开始的，它遵循上一个断点(@media(max-width:768px))，@media(max-width:375px)遵循@media(max-width:425px)风格。在
浏览 0提问于2021-11-27得票数 0
2回答
固定柱宽流体柔性箱网格
、、、
我有一个通过柔性箱安装的容器。我希望在容器内平均分配每个瓷砖，但将它们保持在220 to的固定宽度。
我已经接近使用flex-grow并设置了一个min-width: 220px，但显然它通过计算调整了瓷砖的大小，以填充容器。
我还设置了一些媒体查询，以便tiles在某些断点上堆叠。
用我目前的造型，能不能让这些瓷砖保持在220 my而不拉伸呢？这能通过柔性箱完成吗？有和柔性箱一样好的替代品吗？
.container {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max
浏览 0提问于2016-01-09得票数 10
回答已采纳
在@if $param==x ... @else if $param==y中，当x是一个以数字(1a)开头的字符串，而y是一个纯数字作为x (1)中的前导数时，条件落入错误的块中。是个窃听器还是故意的？
@mixin view($view) {
$bp_1a: 300px;
$bp_1: 600px;
@if $view == 1a {
@media only screen and (max-width: $bp_1a - 1) { @content; }
}
@else if $view == 1 {
@media only screen and (ma
浏览 1提问于2014-11-06得票数 0
回答已采纳
2回答
我有一个情况，我想让flipkart横幅响应。
对于超过768 It的屏幕大小，它可以正常工作，但对于移动大小则不起作用。
我尝试过这个线程，但它只工作在旧的横幅，而不是新的横幅。
演示：
以下是我尝试过的：
style.css
* {margin:0; padding:0;}
div[data-wrid^=WRID] {
margin: 0 auto;
max-width:100% !important;
}
div[data-wrid^=WRID] img {
max-width:100% !important;
margin:0 auto;
}
浏览 5提问于2017-08-08得票数 0
1回答
在给移动设备提供兼容性的情况下，我有太多的@media查询，导致一些不能工作，有没有我遗漏的语法？或者是CSS的局限性。 在这段代码中，我试图隐藏图像的一部分，但随着手机宽度的变化，高度也需要改变，我已经在网上搜索了视口分辨率的列表，关于这个列表，我已经向媒体查询了我能找到的每一种可能的分辨率。但是，所有这些媒体查询都没有像我之前提到的那样工作，因此我请求社区提供解决方案。 CSS代码： .desktopimg {
height: 486px;
overflow: hidden;
}
@media only screen and (max-width: 375px) {
.de
浏览 55提问于2021-03-25得票数 0
回答已采纳
1回答
@media标记有助于定义屏幕的缩放级别。例如,
@media(min-width:1165px) and (max-width:1366px){
.subheader
{
position:fixed;
top:8.5%;
left:0%;
background-color:;
}
.notices
{
margin-top:8%;
margin-left:22%;
}
}
当变焦电平约为125%时，执行1165 to到1366 to的范围。有人能告
浏览 2提问于2013-11-06得票数 0
回答已采纳
我正在检查wordpress主题代码，我找到了这一行代码：
840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
从php的角度来看，这一行意味着什么？
更清楚的是，这是整个功能：
/**
* Add custom image sizes attribute to enhance responsive image functionality
* for content images
*
浏览 6提问于2015-12-30得票数 0
回答已采纳
2回答
我试图在我的角度应用程序中为中介程序创建一些常见的断点。我在用scss。我在任何地方重复这三行，我想改进它：
@media screen and (orientation: landscape) and (max-width: 959px),
screen and (orientation: portrait) and (max-width: 599px) {
@media screen and (orientation: landscape) and (max-width: 959px) {
@media screen and (orientation: portrait) and
浏览 1提问于2019-03-27得票数 1
回答已采纳
我正在尝试构建一个SASS(SCSS)文件，它创建了我的主容器。我想通过使用@each或@mixin循环每个大小(xl、lg、md、sm、xs)来减少膨胀，然后：
·按比例减少psuedo元素的高度，从xl中最大的响应大小开始，下降到xs，在最小响应大小时，该值降低到0。
或者：
·将xs中最小响应大小的值从0增加2个，最大响应大小为xl。
预期结果与以下相同(虽然大小重叠为线性是可以接受的，例如，现在每个容器大小的响应大小(起始和结束2 2rem )都小于以前的容器大小)。
.container-xl {
@extend %container;
&::after,
&am
浏览 1提问于2020-03-05得票数 2
回答已采纳
1回答
有人能告诉我这到底是为什么吗？
/* small desktop */
@media all and (max-width: 1200px) {
}
/* tablet */
@media all and (max-width: 1024px) {
}
/* mobile phone */
@media all and (max-width: 768px) {
}
但这并不是：
/* mobile phone */
@media all and (max-width: 768px) {
}
/* tablet */
@media all and (max-width: 1024p
浏览 1提问于2014-04-05得票数 0
回答已采纳
我的CSS中有以下媒体查询。
我注意到他们的行为是不正确的，有些被其他人掩盖了。这个的正确顺序是什么？媒体查询和命令的规则是什么？
1) @media screen and (max-width:767px) {
2) @media screen and (max-width:992px) {
3) @media screen and (max-width:1000px){
4) @media screen and (max-width:480px){
5) @media screen and (max-width:580px){
6) @media screen and (max-width
浏览 14提问于2022-08-21得票数 0
回答已采纳
3回答
我对媒体查询不太了解，但我想尝试做出响应性的div。
@media screen and (max-width: 768px) {
div#zarada p {
width: 100%;
font-size: 14px;
}
.zaradabox img {
display: none;
}
}
@media screen and (max-width: 1024px) {
div#zarada p {
width: 38%;
font-size: 14px;
}
}
@media screen and (max-width: 1
浏览 2提问于2014-10-25得票数 0
回答已采纳
2回答
所以，我正在使用来自DRUPAL的服务，它有自己的风格。
我尝试使用css和！重要标记来覆盖它，但它似乎不起作用。来自服务的样式非常简单，我只想覆盖背景颜色属性。
.FixBackground{
background-color: rgb(238,238,238) !important;
}
@media all and (max-width: 1920px){
.Container{
max-width: 40vw;
}
}
@media all and (max-width: 1023px){
.Container{
m
浏览 4提问于2016-08-10得票数 1
回答已采纳
1回答
在我的网站上，我正在开发，我有一个问题，当我在Safari中打开页面时，我的所有图像都被扭曲了。Chrome，它们工作得很好。我也不确定为什么当我在任何浏览器上调整大小时，图像都会被挤压。 此外，我的意图是在主页上制作链接，但是当我将它们设置为链接时，它们的格式非常奇怪，也不起作用。 到网站的链接在这里:带链接的主页：https://www.ryanstewsart.com/worklinks.html我想要的方式主页:只有图像(和一些文本)的https://www.ryanstewsart.com/work2.html项目页面：https://www.ryanstewsart.com/ca
浏览 4提问于2021-11-10得票数 0
2回答
我正在为媒体查询做scss混音
@mixin breakpoints($min-width, $max-width, $media-type: false) {
@if $media-type == true {
@media $media-type and (min-width: $min-width) and (max-width: $max-width) {
@content;
}
} @else {
@media all and (min-width: $min-width) and (max-width: $max-width) {
浏览 5提问于2016-03-03得票数 0
回答已采纳
3回答
我有一个关于max-width的问题，以及为什么它在显示宽度上改变自己。
这是我的代码：
div {
height: 100px;
max-width: 500px;
background-color: powderblue;
}
因此，max-width是500 is，但是当我调整显示大小时，max-width值会发生变化。
在下面的图像中，我有一个150 In宽的结果大小：
如您所见，我的除法宽度实际上是150 as，而不是500 as，这是我的max-width值。
那么，为什么max-width会自动更改其值呢？如果显示的宽度小于max-width，那么它与屏幕的宽度匹配是
浏览 5提问于2022-06-04得票数 0
回答已采纳
我有以下HTML-Dom：
<nav class="menubar-first">
<a class="w-nav-link menue" href="/" style="max-width: 940px;">Start</a>
<div class="w-dropdown dropdown-bg" style="max-width: 940px;">
<div class="w-dropdown dropdown
浏览 4提问于2015-02-11得票数 0
回答已采纳
1回答
我正试图建立一个网站，我在photoshop中制作了临时图片，我用插画家重新制作了这些图片，而在chrome和firefox之间，图像正在改变大小( firefox中很大，而chrome中很小)。我已经导出图像为png，我在这些图像上使用宽度和最大宽度。
知道为什么会这样吗？
浏览 0提问于2017-01-16得票数 0
回答已采纳
我试图实现像一样的目标。
问题是，这是一个响应，因此个人图像，如iphone，徽标，耳机堆栈在彼此下面的小屏幕。
我要固定在集装箱里的位置。我不想让图像堆积在彼此下面。如何使用引导程序定位像这样的图像？我希望网站的响应，但也保持准确的图像位置。
我们会感谢你的帮助。
HTML：
<div class="jumbotron" style="background-image: url('background.png'); width: 100%; height: 100%;position: absolute; top: 0; left: 0; ove
浏览 0提问于2015-09-27得票数 0
回答已采纳
1回答
我有一个包含8张图像的网格。就宽度而言，我已经让他们非常有反应了。
.gallery .item {
width: 33%;
height: 368px;
float: left;
}
@media screen and (max-width: 1650px) {
.main-content {
width: 55.66666667%;
}
.gallery .item {
width: 33%;
height: 330px;
}
}
@media screen and (max-width: 1540px) {
.gallery
浏览 2提问于2014-10-24得票数 0
回答已采纳
1回答
我正在创建一个网页，它是围绕960px 12列网格布局设计的，其中每列宽达60px，每边有高达10px的边距。"Up to“，因为如果页面收缩，列也会收缩。现在我很难让它成为完美的像素。
我的"CSS“(实际上生成CSS的代码较少)如下所示
.column{
position: relative;
float: left;
margin: 100%*(10/960);
&.c1{
max-width: 60px;
width: 100%*(60/960);
}
&.c2{
浏览 2提问于2012-07-16得票数 0
我有一个具有这种样式的css文件：
.filefield-element .widget-edit {max-width: 70%;}
我想在不修改css文件的情况下增加max-width，所以我创建了一个具有此样式的自定义css文件：
.filefield-element .widget-edit {max-width: 99%;}
在“html/style”窗格中，我看到样式是按照正确的顺序列出的：
.filefield-element .widget-edit {
max-width: 99%;
}
.filefield-element .widget-edit {
f
浏览 0提问于2011-02-08得票数 40
回答已采纳
1回答
有很多关于如何使父母的宽度与孩子的宽度类似的问题，这不是我想要的。
我正在为品牌的目的而设计一款软件，我并不控制软件，我只能访问CSS修改，所以JavaScript或修改DOM是不可能的，否则这将是微不足道的。
仅使用CSS，是否有可能实现以下目标。
我有一个容器div，它包含两个列，主内容区和侧栏。侧栏包含多个div，用于包装不同侧栏元素的内容。这些边栏元素的内容被设计成它的父元素的100%宽度，当父元素有一个固定的宽度(默认情况下是容器的25% )时，它可以工作。
我们需要的是当侧边栏的内容被隐藏时，它就会消失。每个侧栏元素中的内容可以设置为display: none，但是当所有元素被隐藏
浏览 2提问于2021-04-08得票数 2
回答已采纳
我有过
@media (max-width: 360px),
@media (max-width: 320px),
@media (max-width: 768px),
等等..。
为响应我的网站(作业)。我首先将css代码放入max-width:360px中，然后当我将代码放在max-width:320px中时，它不会改变元素的大小/裕度/填充等。它需要！重要的是，在它开始工作之前，这就是为什么我有很多！在我的代码中很重要，比如："margin-left:240px !important;“。我相信，如果我开始为max-width:768px编写代码，大小调整就不会起作用。有办法解
浏览 3提问于2017-10-17得票数 0
回答已采纳
如果我想要一个图像在左边，另一个在右边，同时在同一行中，这样它在每个设备上都能响应。那我该怎么做呢？正如您在给定的iphone和耳机图像示例中所看到的。
我试着实现像一样。
HTML：
<div class="jumbotron" style="background-image: url('background.png'); width: 100%; height: 100%;position: absolute; top: 0; left: 0; overflow: hidden; background-size: cover;
back
浏览 2提问于2015-09-27得票数 0
在使用角材料时，角Flex布局非常有用，有什么方法可以在TypeScript文件中使用flex布局API吗？
例如，从中可以获得TypeScript文件中的MediaQueries值吗？
breakpoint mediaQuery
xs 'screen and (max-width: 599px)'
sm 'screen and (min-width: 600px) and (max-width: 959px)'
md 'screen and (min-width: 960px) and (max-width: 1279px)'
lg
浏览 1提问于2020-12-09得票数 4
回答已采纳
1回答
我在html中有以下标记
<picture>
<source
srcset="img/home-page/placeholders/placeholder_2560.jpg"
media="(max-width: 2560px)">
<source
srcset="img/home-page/placeholders/placeholder_1920.jpg"
media="(max-width: 1920px)
浏览 1提问于2017-04-28得票数 1
回答已采纳
2回答
我有下面的html。
<div id="menu">
<div><span class="cr">Login</span><span class="cl">Welcome</span></div>
</div>
和下面的css
#head{background-color:#fef}
#head div{margin:0 auto;max-width: 800px;}
@media (max-device-width: 321px){
.cr
浏览 1提问于2014-09-09得票数 0
我对媒体查询非常困惑，因为当我应用媒体查询时，它不能正常工作，是否有ant序列将其写入CSS文件？
@media max-width(767px) {body{background:red;} }
@media max-width(992px) {body{background:blue;} }
@media max-width(1200px) {body{background:#fff;} }
是否有适当的顺序根据屏幕大小来写它?如果我这样写有什么区别吗？
@media max-width(1200px) {body{background:#fff;} }
@media ma
浏览 1提问于2018-07-26得票数 0
回答已采纳
我有一个基本的网页。到目前为止，这里有一个演示：
从我的CMS生成的代码在我的img标记周围添加了一个段落标记。
有没有办法强迫max-width:100%在<p><img src...上运行，这样它就能像演示上的最后一幅图像那样工作吗？
代码：
p {
max-width:200px
}
img {
max-width:100%
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet tortor eu aliquam sodales. C
浏览 4提问于2015-07-28得票数 0
回答已采纳
1回答
我使用引导和自己的style.css。
我不知道一些@媒体有用，有些则不行。
代码：
.col-md-4.acompanhantes {
margin-bottom: 30px;
float: left;
}
@media (max-width: 1200px){...}
@media (max-width:1000px){...}
@media (max-width:992px){
.col-md-4.acompanhantes {width:50%;}
}
@media (max-width: 767px){.
浏览 2提问于2017-08-22得票数 0
回答已采纳
动画似乎不起作用。
<div ng-cloak class="customize-modal text-white" ng-show="isMenuOpened == true">
...
</div>
这是我的css：
.customize-modal {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
max-width: 100vw;
浏览 2提问于2020-06-08得票数 2
回答已采纳
1回答
我想让我的网站在电话里有反应..。等
我的问题是，我想知道我在@media (CSS)中做的任何类型的宽度
例如，我制造了768‘s的电话，对吗？
我需要你的帮助：
浏览 2提问于2016-04-01得票数 0
回答已采纳
1回答
我的网站使用YUI Compressor来缩小CSS，它删除了前面的空格！重要的是，这使得css声明不起作用。有没有办法阻止它这样做？
预压缩
@media screen and (max-width: 1146px) {
#controls_zoom {display:none !important}
}
@media screen and (max-width: 1060px) {
#controls_views {display:none !important}
}
@media screen and (max-width: 925px) {
#controls_
浏览 0提问于2012-03-23得票数 1
回答已采纳
1回答
我正在用下面的断点创建一封电子邮件，但是我在断点上遇到了一些困难。
下面的断点不是在移动上工作，实际上我在另一封电子邮件中使用了相同的断点，而且它运行得很好。
<style style="" type="text/css">
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
浏览 12提问于2022-11-10得票数 0
2回答
我需要这种类型的4行4列引导响应轮播动画脚本
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-
浏览 0提问于2016-07-05得票数 1
我们目前正在我们的网站上实现Picturefill (版本2.2.0)。图片元素如下所示：
<picture>
<source media="{query_size1}" srcset="/images/size1.jpg"></source>
<source media="{query_size2}" srcset="/images/size2.jpg"></source>
<source media="{query_size3}&
浏览 8提问于2015-01-07得票数 0
1回答
媒体查询不能正常工作
、、、
项目链接：
以下是预先制作的媒体查询，我不能也不允许悲伤地改变它们。然而，目前的问题是，设备选择了较小的体面分辨率。我的意思是，如果设备应该从假设(最小宽度:992 if )和(最大宽度:1200 if)中选择css，那么它从(最小宽度:768 if)和(最大宽度:991 if)中选择它。希望这是有意义的，我似乎找不到原因。
/*iPhone*/
@media screen and (max-width: 399px) {}
/*Big Phones Portrait and iPhone Portrait*/
@media (min-width: 400px) and (max-
浏览 3提问于2014-04-11得票数 0
回答已采纳
3回答
.ains是我的中心层div，需要灵活的宽度。
有没有一种更短的方式-一些公式什么的-说这句话(没有javascript)
.ains{width:50%;}
@media only screen and (max-width: 1366px){.ains{width:60%;}}
@media only screen and (max-width: 1280px){.ains{width:70%;}}
@media only screen and (max-width: 1080px){.ains{width:80%;}}
@media only screen and (max-width:
浏览 1提问于2020-12-16得票数 3
回答已采纳
我正在添加一些(@media)条目以使我的网站具有响应性，这在Chrome中运行良好。
所有其他宽度(476-1040)显示正常。
我的媒体设置是：
@media (min-width: 768px) and (max-width: 1040px){
@media only screen and (max-width: 475px){
@media (min-width: 476px) and (max-width: 575px){
@media (min-width: 576px) and (max-width: 675px){
@media (min-width: 676px) and
浏览 0提问于2015-11-03得票数 0
1回答
我遇到了一个媒体查询的问题，只有在移动宽度设备上，当屏幕为414px时，最低查询(max- width : 320px)被接管(max-width: 414px)，当屏幕为375px时，(max-width: 375px)被接管。我没有设置！在320px上很重要。较大的媒体查询以(max-width: 768px)或更高的速度工作。其他人有没有经历过这种行为？
我的查询在样式表中是从高到低的顺序，我需要将它们从低到高翻转吗？
@media (max-width: 768px)
@media (max-width: 414px)
@media (max-width: 375px)
@me
浏览 2提问于2017-06-17得票数 0
1回答
我有这个JQuery脚本，它查看一些div，获取图像大小，并根据图像设置div大小。
我有一个JQuery脚本来获取每个图像的所有DIV和循环，并获取大小并根据正确的大小设置DIV大小。问题是脚本运行得很奇怪，它只在我刷新(F5)页面时才起作用。现在，如果我更改为首先获取所有图像，然后循环以获取大小，则可以很好地工作。第二个选项的唯一问题是我不知道哪些图像属于哪个DIV，所以我必须添加一个额外的循环来从正确的DIV中获取所有图像。
下面是我的代码：
$('.groupContainer').imagesLoaded(function($images){
$(th
浏览 2提问于2013-12-19得票数 2
我正在寻找PrimeNg的相当于Bootstrap的.container类，这样我的元素就可以在大型或超大型设备上有一个合理的max-width。
浏览 0提问于2021-06-26得票数 0
回答已采纳
2回答
引导表设置单元格宽度问题
、、、、
我的引导表有以下问题。无法将自定义宽度设置为桌面上的单元格。即使我这么做了，也没有设定好。我搜索并了解到，通过在单元格中添加填充，引导确实可以防止这种情况发生。但是，当我在桌面的每个单元格中添加填充:0时，它仍然不起作用。不管怎样，让我展示一下代码和屏幕截图。
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<table class="table table-hover table-white">
浏览 0提问于2018-09-03得票数 0
回答已采纳
我想知道为什么当菜单完全展开时，当你在移动设备上向下滚动时，菜单实际上会折叠。请帮帮忙。链接到该网站，请注意，我还没有做太多。如果需要，我会把代码写在下面。只要问一下，我会用你想要的代码进行注释。非常感谢您的帮助，我们将不胜感激
HTML：
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content=
浏览 0提问于2016-03-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
