以下CSS媒体查询的确切"NOT"是什么？
@media only screen and (device-width:768px)
只是补充一下,这意味着......除了iPAD ......或者......不是iPAD ..
和BTW ......我已经尝试过了
@media not only screen and (device-width:768px)
这不起作用..
我在我的项目中使用css媒体查询来创建一个可以在任何大小的屏幕上工作的网站.我正在寻找触发差异jquery函数就像我对css一样.
例如,如果浏览器大小介于1000px和1300px之间,我想调用以下函数:
$('#mycarousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'circular'
});
但是当浏览器大小低于1000px时,js将停止其处理.等等等等.
我不确定这是否可行,但也许现有的解决方案或插件可根据浏览器窗口大小创建不同的js环境.我想我可以用某种格式创建条件语句.有什么想法吗？
我的网站固定宽度为1000px.我想支持此页面的2个较小宽度.我通过像这样的CSS媒体查询成功完成了这项工作:
@media only screen and (min-width : 800px) and (max-width : 999px) {
#content { width:800px; }
}
@media only screen and (max-width : 799px) {
#content { width:600px; }
}
现在,当我在Android浏览器(2.3.3)上测试我的网页时,它使用1000px的视口宽度,因此它以全宽显示网站.但如果选择视口宽度为800px会更好,因为网页会针对具有较小显示的设备显示更优化.
我知道我可以使用例如:<meta name="viewport" content="width=800px" />或设置视口宽度,或者使用:设置相应于设备物理宽度的宽度<meta name="viewport" content="width=device-width" />,但这些都不起作用.因为它会强制所有移动设备在第一种情况下总是使用800px视口,或者它会在第二种情况下使用设备上的像素的物理宽度,但这也不会有效,因为在纵向模式下(大多数人如何冲浪移动设备)网络和使用手机)将是300px或最多400px,这是太小,用户将不得不水平滚动很多.
所以实际上我的问题是 - 我可以支持并可能强制移动浏览器使用不同的视口宽度,具体取决于它们的实际屏幕大小吗？我不知道我是否足够正确地解释了它,所以我将得到我想要实现的例子:
对于物理宽度为400px的移动设备(具有更大显示器的现代设备),我想强制800px宽度的视口,并且可能具有0.5,因此在第一页访问时将显示完整而无需水平滚动并且具有用户选项以放大到页面的一部分.
对于物理宽度为300px(某些中级和低端设备)或更小的移动设备 - 我想强制600px宽度的视口,并且可能使用0.5,因此在第一次访问时将显示完整或至少大部分显示在屏幕上需要很少的水平滚动.当然,用户可以放大页面的某些部分.
这可能只使用CSS或CSS3设置吗？我可以想象JS解决方案,但我想用CSS实现它.
感谢您提前提供的任何帮助.
在Foundation 5.0.2及更高版本中,它不使用xlarge和xxlarge网格大小.他们在之前的5.0.0和5.0.1版本中工作过.
所以当从基础进入css文件时,它只会显示小,中,大网格大小.
显然,没有版本的Foundation 5具有xlarge和xxlarge块网格.
有没有办法让这些再次起作用？
我去了他们的网站并下载了最新的5.1.1,它在foundation.css中也有同样的问题.
我自己用Sass构建它,并尝试手动添加覆盖变量:
// Here we define the lower and upper bounds for each media size
$small-range: 0em, 40em // 0, 640px
$medium-range: 40.063em, 64em // 641px, 1024px
$large-range: 64.063em, 90em // 1025px, 1440px
$xlarge-range: 90.063em, 120em // 1441px, 1920px
$xxlarge-range: 120.063em // 1921px
$screen: "only screen"
$landscape: "#{$screen} and (orientation: landscape)"
$portrait: "#{$screen} and (orientation: portrait)"
$small-up: $screen
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) …我写了一段CSS代码,根据用户的屏幕宽度流畅地切换我的网站布局的宽度.如果用户可用的屏幕空间较少,则布局的宽度会增加以填充更多的窗口并留下更少的空白,如果它们有更多空间,则布局会缩小以保持吸引人的外观.
我使用以下代码来实现此目的:
#bg{
background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
margin-left:auto;
margin-right:auto;
margin-bottom:1.6rem;
border-width:0 0.1rem 0.1rem 0.1rem;
border-style:solid;
border-color:#303030 #101010 #000;
border-radius:0.8rem;
min-width:94.2rem
}
@media (min-width: 70rem){
#bg{
border-radius:4px;
border-radius:0.4rem;
width:90%
}
}
@media (min-width: 91rem){
#bg{
width:80%
}
}
@media (min-width: 112rem){
#bg{
width:70%
}
}
这在Firefox 30中运行得很好,但Google Chrome 总是以70%的宽度显示元素.
以前,我在查询中也使用了max-width,在这种情况下Chrome会做相反的事情; 无论我调整浏览器窗口的大小,它总是会以90%显示元素.
规则使用SASS编译.究竟是什么问题？如何更改查询以在所有浏览器中工作？
可以在此链接中找到受影响的网站.
我正在使用以下内容创建一些特定于打印的样式:
@media print {
/* Styles */
}
当我们使用SASS时,所有样式都会styles.css在运行时编译成一个样式表,在<head>文档中声明如下:
<link rel='stylesheet' href='/assets/css/styles.css'>
现在,当我从chrome(Ctrl + P)打印时,它完全忽略了我的打印样式,但Firefox(30.0)很好.IE(11)很糟糕,但这是因为我们有很多IE/IE似乎不喜欢的显示/隐藏面板/
不能为我的生活弄清楚发生了什么.如果我在Chrome中模拟打印介质,那么它会很好地加载样式,当我实际尝试打印它不起作用时.我已经尝试了大量的东西,添加,media=属性,双引号,改变顺序href等都无济于事!!
请注意,我们不再使用type,因为我认为您不再需要使用它了.我还是尝试添加它,但它仍然无法正常工作!
我甚至试过这个:http://lawrencenaman.com/optimisation/print-media-queries-not-working/但它仍然不起作用.它让我疯狂,任何想法？
更新:所以我注意到,当我点击Ctrl + P打印页面时,我看到的预览似乎使用了打印样式表中的一些样式,但似乎使用移动媒体查询呈现所有内容？我认为可能与断点有一些冲突,当我有机会时会更新.
UPDATE2:我可以看到打印样式表正在底部加载所以理论上这应该写掉所有其他媒体查询(至少是我试图写的那些)？
请帮忙.任何机构都可以告诉我有关三星s6的CSS中的媒体查询更具响应性吗？
@media only screen and
(min-device-width : 360px) and
(max-device-width : 640px) and
(-webkit-min-device-pixel-ratio : 3) { // code here }
从哪里可以测试三星s6的响应式设计？有任何在线链接或工具吗？
我有一个带2个滑梯的自举旋转木马.这两张幻灯片都使用2x2的自举网格来显示图表.它们工作正常,但我正在尝试实现响应式媒体查询,似乎无法使其工作.我使用baseOptions和media选项来定义,但图表没有加载,控制台没有显示任何错误.
我试图定义<div>与内嵌样式容器width和height即style="width: 100%;height:400px;"和我也试图定义width和heightCSS中像所谓
.mychart {
width: 100%;
height: 400px;
}
javascript如下所示.
<div id="chart1" style="width: 100%;height:400px;"></div> //with inline style
<div id="chart1" class="mychart"></div> //with CSS class
var myChart1 = echarts.init(document.getElementById('chart1'));
var lpnArr = [101, 43, 10, 250];
option = {
title : {
text: 'My data Pie',
subtext: 'Data as of last batch',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
}, …我正在使用引导程序创建一个移动优先的响应式布局，并设置了各种行和列，我可以针对不同类别的屏幕尺寸进行调整。
我想知道是否有纯引导样式类可以让我应用和删除不同大小的边框，而不必创建我自己的 css 媒体查询。
例如，如果我只想在行中的第一列以中等大小浮动时才在第一列上有一个边框右侧...我知道这不是真正的代码，但是是否有与我相同的影响哑巴找？
<div class="row">
<div class="col-12 col-md-6 border border-top-0 border-right-0 border-bottom-0 border-left-0 border-md-right-1">
<p>Lorem ipsum</p>
</div>
<div class="col-12 col-md-6">
<p>Dolor sit amet</p>
</div>
</div>
我也在使用 maxcdn css，所以无法进入 sass。有什么建议？
在做了一些搜索之后，我开始意识到我应该使用Flex-Layout库来使 Material-themed UI 具有响应性（如这里的回答）。根据文档，该库提供了MediaObserver以编程方式检测媒体查询激活的类。
我使用了材料原理图命令 -
ng g @angular/material:navigation shell/layout
添加一个Sidenav组件，并注意到以下生成的代码 -
ng g @angular/material:navigation shell/layout
它使用BreakpointObserver类并Breakpoints从@angular/cdk/layout包中预定义来检测视口更改。和文档说-
布局包提供实用程序来构建响应屏幕尺寸变化的响应式 UI。
因此，显然，有两个不同的库可用于使 Material 主题的 UI 响应，并且它们使用不同的方法。（如果我错了，请纠正我）。
我想知道 -
MediaObserver使用BreakpointObserver？@angular/cdk/layout完全避免使用实用程序吗？在这方面是否有一些最佳实践可以遵循？编辑：2020.05.11
根据 的源代码MediaObserver，它不使用底层BreakpointObserver。它使用本机Window.matchMedia()API。
media-queries responsive-design angular-material angular angular-cdk
media-queries ×10
css ×8
html ×2
angular ×1
angular-cdk ×1
bootstrap-4 ×1
border ×1
css3 ×1
echarts ×1
firefox ×1
javascript ×1
jquery ×1
mobile ×1
printing ×1
sass ×1
viewport ×1
w3c ×1
width ×1
window ×1