标签: media-queries
打印样式表 - 将输入转换为文本
我有一个桌子,里面有一些<input type="text">盒子,我希望这些在打印时显示为普通文本.我已经设置了一个media ="print"样式表
input
{
border-style: none;
}
在它,这删除边框,所以内容看起来像文本,但输入仍然将列的宽度推到其实际宽度(不出意料),所以我得到不必要的空格和列宽.是否有一种时髦的方式以某种方式使用CSS将输入的宽度设置为其内容大小,或其他一些方法来解决这个问题？
另一个论坛上的某个人建议使用打印按钮创建客户端脚本来物理地更改页面标记,但不幸的是,由于页面的复杂性和动态性,这并不实际.
我很确定这不可能做到,但我想我会问.
推荐指数
解决办法
查看次数
CSS媒体查询的精确NOT(反向)
以下CSS媒体查询的确切"NOT"是什么？
@media only screen and (device-width:768px)
只是补充一下,这意味着......除了iPAD ......或者......不是iPAD ..
和BTW ......我已经尝试过了
@media not only screen and (device-width:768px)
这不起作用..
推荐指数
解决办法
查看次数
使用css媒体查询触发jquery
我在我的项目中使用css媒体查询来创建一个可以在任何大小的屏幕上工作的网站.我正在寻找触发差异jquery函数就像我对css一样.
例如,如果浏览器大小介于1000px和1300px之间,我想调用以下函数:
$('#mycarousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'circular'
});
但是当浏览器大小低于1000px时,js将停止其处理.等等等等.
我不确定这是否可行,但也许现有的解决方案或插件可根据浏览器窗口大小创建不同的js环境.我想我可以用某种格式创建条件语句.有什么想法吗？
推荐指数
解决办法
查看次数
CSS预处理器,可以在@media查询中定义变量
目前,我使用LESS作为我的主要CSS预处理器.我(我相信很多人都有这个需要)在@media查询中定义变量,如:
@media screen and (max-width: 479px) {
myVar: 10px;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
myVar: 20px;
}
@media screen and (min-width: 768px) {
myVar: 30px;
}
.myElement {
padding: @myVar;
}
这在LESS中不起作用,因为编译性质(@myVar仅在每个特定范围内定义@media,但不是全局定义).即使我@myVar在媒体查询之前全局定义,它也不会根据媒体查询进行更新,.myElement无论如何都会获得初始值.
所以,问题是,是否有可能在任何其他CSS预处理器中实现这一点,或者我们注定要覆盖.myElement每个媒体查询中的内容？这个最简单的例子不是问题,但在实际项目中,这可以节省大量时间和复制/粘贴.
编辑: 不是解决方案,而是我的特定项目的解决方法:
- 将font-size设置
<html>为基本字体大小 myVar定义LESS变量rem而不是px基本字体大小的衍生- 使用
@media查询调整不同媒体的基本字体大小. - 可选使用REM单元polyfill用于浏览器,但尚不支持
rem(http://caniuse.com/#search=rem).这在IE 8及更低版本中不起作用,但不是因为缺乏支持rem- 它不支持媒体查询.所以IE8及以下版本无论如何都可以获得全尺寸无媒体查询样式表.
代码段: …
推荐指数
解决办法
查看次数
Chrome中是否会忽略打印媒体查询？
我正在使用以下内容创建一些特定于打印的样式:
@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:我可以看到打印样式表正在底部加载所以理论上这应该写掉所有其他媒体查询(至少是我试图写的那些)？
推荐指数
解决办法
查看次数
服务器端渲染+响应式设计+内联样式 - >使用哪个断点？
我有一个使用ReactJS构建的响应式Web应用程序,我希望有一天能够支持服务器端呈现.
根据视口大小,应用程序布局/行为会发生变化.但所有这些变化不仅可以通过简单的CSS mediaquery来完成:JS行为,而且底层HTML结构也必须根据宽度进行更改.
例如,我可以:
宽度在800px以下:
<div class="app">
<div class="menu-mobile">...</div>
<div class="content">...</div>
<div class="mobile-left-menu">...</div>
<div class="footer-mobile">...</div>
</div>
宽度超过800像素:
<div class="app">
<div class="menu">...</div>
<div class="main">
<div class="left-menu">...</div>
<div class="content">...</div>
<div class="right-menu">...</div>
</div>
<div class="footer">...</div>
</div>
现在,我想为该应用程序使用服务器端呈现.但是在服务器上我没有宽度,所以我不知道返回客户端的HTML结构.
请注意,我不是在寻找使用静态默认服务器端断点的解决方案,而是在客户端上更正应用程序.我正在寻找一种解决方案,根据其设备返回给客户端正确的html结构.因此,如果他在浏览器上禁用javascript,它应该可以正常工作.
有人可能会说我可以渲染两者所需的html,并使用普通的CSS媒体查询隐藏/显示所需的部分display: none,但它会使应用程序变得复杂并使其呈现大量未使用的html元素,因为通常用户不太可能移动断点上方/下方(我的意思是如果他有移动设备,桌面的html元素永远不会被使用)
此外,如果我想使用内联样式,它会变得复杂,因为我必须在服务器上呈现这些内联样式以获得正确的宽度.
我看到有些人正在考虑嗅探浏览器UA来估计他们的视口大小.但即使有一些不安全的屏幕尺寸检测,我也不确定我们是否可以知道服务器端的设备屏幕方向.
我可以做任何事来解决这个问题吗？
inline-styles media-queries reactjs isomorphic-javascript server-side-rendering
推荐指数
解决办法
查看次数
如何使用Firebug和Chrome Developer工具在不同媒体查询中调试css？
如何调试css的方向:Chrome Developer工具中的肖像？
我写的内容 (orientation:portrait)无法通过Firebug和Chrome Developer工具动态编辑.它始终显示正常的属性.
/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}
推荐指数
解决办法
查看次数
min-width媒体查询无法在ipad上运行？
为什么在横向模式下iPad上没有拾取以下媒体查询？
@media all and (min-device-width: 1000px) {
css here
}
要么
@media all and (min-width: 1000px) {
css here
}
我希望这个css能够针对1000px或更宽的浏览器,而不仅仅是ipads.因此,如果可能的话,id更适合使用min-width的第二个选项而不是min-device-width.这两个版本都可以在我的电脑上使用firefox.谢谢
推荐指数
解决办法
查看次数
在媒体查询中仅对IE 11应用屏幕大小
我目前有以下宽度特定的媒体查询.
@media only screen and (max-width: 1920px) {
.toggleMultiSelect .filter {
width: 566px;
}
}
但" .toggleMultiSelect .filter " 的宽度在IE中从Chrome/Firefox发生了变化.所以基本上需要在1920px中为IE使用相同css类的不同宽度.从Stackoverflow搜索我发现IE特定的行为可以像下面这样实现.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.toggleMultiSelect .filter {
width: 575px;
}
}
所以现在我需要实现分辨率和css类.575px宽度仅适用于IE和Chrome或firefox应该获得566px.
在此先感谢您的帮助.
推荐指数
解决办法
查看次数
我们可以使用屏幕分辨率而不是视口来应用 CSS 吗？
我想添加基于屏幕分辨率而不是视口的 CSS 样式。
情况如下：我的屏幕分辨率为 (1980px x 1080px)，如果我将 Windows 10“缩放和布局”设置为 125%，它会更改屏幕的视口并显示该视口样式。我想根据屏幕分辨率而不是视口显示我的媒体风格。
目前，我正在使用这些媒体查询来获得高分辨率：
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
我们可以只使用 CSS 而不是 JS 来实现这一点吗？
截图：
窗口 10 比例 100%：
100% 比例的视口：
窗口 10 比例 125%：
比例为 125% 的视口：
推荐指数
解决办法
查看次数