标签: media-queries
有没有办法将相同的CSS样式表用于打印介质和默认布局？
我正在寻找一种方法来使用与默认屏幕布局相同的打印介质样式表.我的优点是每次更新CSS时都不需要更新2个文件.我希望有一个样式表,并通过某种方式表示它们来指定打印介质的特殊规则......这可能是不可能的,但我想我会把问题放在那里.
推荐指数
解决办法
查看次数
所有台式机/笔记本电脑显示器的方向是否与iPad等设备上的横向相似？
所有台式机/笔记本电脑显示器的方向是否与iPad等设备上的横向相似？
两者之间有什么区别吗？
body {background:red}
@media only screen and (orientation : landscape) {
body {background:blue}
}
推荐指数
解决办法
查看次数
媒体打印多页表格边框布局
当我打印这个时,在第二页的表格左侧和顶部缺少边框.我怎样才能解决这个问题？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
@media print
{
body {
margin: 0;
padding: 0;
color: #000000 !important;
background-color: #ffffff !important;
}
* {
color: inherit !important;
background-color: transparent !important;
background-image: none !important;
}
table {
width: 100%;
border: 1pt solid #000000;
border-collapse: collapse;
font-size: 11pt;
}
#space { height: 750px; }
}
</style>
</head>
<body>
<br /><br />
<h2>.</h2>
<div id="space"></div>
<table border="1">
<thead>
<tr><th>Amount</th><th>label</th></tr>
</thead>
<tbody>
<tr><td>20</td><td>pineapple</td></tr>
<tr><td>20</td><td>pineapple</td></tr>
<tr><td>20</td><td>pineapple</td></tr>
<tr><td>20</td><td>pineapple</td></tr>
<tr><td>20</td><td>pineapple</td></tr>
<tr><td>20</td><td>pineapple</td></tr>
<tr><td>20</td><td>pineapple</td></tr>
<tr><td>20</td><td>pineapple</td></tr> …推荐指数
解决办法
查看次数
这意味着@media only屏幕和(min-device-width:320px)和(max-device-width:480px)
这在Wordpress Twenty Eleven主题的css文件中意味着什么.
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
推荐指数
解决办法
查看次数
媒体查询未对浏览器调整大小生效
我正在使用媒体查询为客户制作网站的移动版本.当我调整浏览器大小时,媒体查询不会生效,但是当在每台设备上查看网站时它们会生效 - 我只是好奇为什么当我调整浏览器窗口本身时媒体查询不会生效即Firefox.
任何输入都非常感谢.
我正在使用的代码:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 720px) {
#container {
width: 100% !important;
}
}
推荐指数
解决办法
查看次数
asp.net mvc 4以错误的方式缩小css媒体查询
在使用此媒体查询后,我正在使用ASP.NET MVC 4版本和Microsoft.AspNet.Web.Optimization'1.1.2':
@media (min-width: 1025px) and (max-width: 1599px) {
#circles_inner {
width: 1080px;
margin: auto;
}
}
我得到这个CSS:
@media(min-width:1025px)and (max-width:1599px){#circles_inner{width:1080px;margin:auto}}
之前省略了空间
和
标记,mac上的新chrome版本不理解它.
这实际上是Google Chrome的可行更新.它只是对媒体查询的语法更加严格.MVC项目的解决方案可以在这里找到:http://i-skool.co.uk/net/mvc/mvc-bundling-and-minifcation-issues-with-google-chrome/
css google-chrome media-queries asp.net-mvc-4 bundling-and-minification
推荐指数
解决办法
查看次数
在媒体查询中使用"全部"有什么好处？
有什么区别
@media all and (min-width: 500px) {
// some css
}
和
@media (min-width: 500px) {
// some css
}
我经常看到第一个声明,但包含有什么好处all吗？
推荐指数
解决办法
查看次数
Bootstrap 4媒体查询Mixins无法通过CDN与Bootstrap 4一起使用
我正在使用通过CDN连接的bootstrap 4，一切正常，但是只有mixins无法正常工作。我在php风暴中遇到以下错误：“找不到mixin'media-breakpoint-down'。此检查警告有关无法解析为任何有效目标的sass / scss mixins引用。”
而这在终端：
插件“ sass”中的错误消息：sass \ styles.scss错误：没有名为“ media-breakpoint-down”的混合
Backtrace:
sass/styles.scss:365
on line 365 of sass/styles.scss
@include media-breakpoint-down（xs）{--------- ^
这就是我在scss文件中使用它的方式： @include media-breakpoint-down(xs) { }
这是我连接引导程序4的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
这是我的gulpfile.js：
var gulp = require('gulp');
var sass = …推荐指数
解决办法
查看次数
css在最后一页打印背景颜色
嗨我打算在打印时显示纯色背景色.
我用过
@media print {
height: 100%;
min-height:100%;
background: #CCC;
}
并在Chrome和Safari中激活"打印背景图形".
但在最后一页下面有一个白点,因为该网站没有覆盖A4/Letter页面的100%高度.
相片:
第一页:看起来像预期的那样.
最后一页:下面是一个空的空白区域,我想填充颜色.
推荐指数
解决办法
查看次数
JavaScript - window.matchMedia 未触发的事件侦听器
我已经尝试了无数解决方案来解决这个问题，但没有一个解决了我的问题。我非常简单地有一个导航栏，当在移动浏览器上时，它会消失并被一个按钮取代，其功能是显示和隐藏导航栏。
现在，我希望我的侦听器在窗口缩小时显示按钮并隐藏导航栏。当窗口展开时，按钮应隐藏，导航栏应显示。该按钮正常工作，因为媒体查询不会影响它。我的侦听器似乎根本不运行，除非重新加载页面。
我的脚本包含在 PHP 标头内，该标头包含在我所有页面的开头。这是我所得到的：
媒体查询侦听器（包含在 header.php 代码中）
// ... navbar code, opening script tag, yadda yadda
function mediaQueryCheck(inputQuery) {
var content = document.getElementById("navigation");
if (inputQuery.matches) {
// it matches
content.style.display = "none";
} else {
// it does not match
content.style.display = "block";
}
}
var mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mediaQueryCheck(mobileQuery);
mobileQuery.addEventListener(mediaQueryCheck);
// closing script tag
该元素#navigation是一个包含导航栏的 div 元素。如有必要，我将提供任何其他相关代码。
推荐指数
解决办法
查看次数
标签 统计
media-queries ×10
css ×9
html ×3
css3 ×2
bootstrap-4 ×1
gulp ×1
html-table ×1
javascript ×1
mixins ×1
orientation ×1
printing ×1
sass ×1
wordpress ×1