我也开始建立一个适合移动设备的网站.所以我也开始研究媒体查询和各种网格框架.我已经看过像Inuit.css这样的所有'主要参与者',语义网格等等.发现可能对我来说最好的是无框网格
作者说它是" Less Framework " 的精神继承者:
好.我已经研究了很多所有较少的/ css代码和主要的framelessgrid.com页面的html代码(应该实现无框架网格),但我无法理解我是如何实现它的.
首先,他是什么意思'无框架'？只是它不是一个框架？除了自由列宽和"倒置"媒体查询是"先移动"之外,它与lessframework有何不同？
我应该如何使用.less变量(特别是@cols系列)？
"逐列调整,而不是逐像素调整".意思？如何将这个概念付诸实践？
:)
我知道这听起来很荒谬,但是我可以在内联样式中使用css媒体查询吗？原因是我正在回应PHP的背景,如果设备是视网膜,需要使用视网膜大小的图像.
ie: <div style="background:url(normal.png); <- need to add style for retina device
我正在尝试创建一组三个非常简单的媒体查询来处理各种屏幕尺寸.这是我想出来的一堆头像:
@media all and (min-width: 0px) and (max-width: 480px) { styles here }
@media all and (min-width: 481px) and (max-width: 1023px) { styles here }
@media all and (min-width: 1024px) { styles here }
这可以像我在浏览器中预期的那样工作,但当我指向我的iphone时,它坚持显示中等大小的syles.使用这些数字,我发现只有最大宽度为980px的iphone才会响应该查询中的样式.
请注意,我在这些查询中使用"all"来排除与是否编写"掌上电脑"或"屏幕,手持设备"等有关的任何问题.尝试简化以帮助我理解问题.
我认为它可能与我正在开发的页面的内容有关,所以我创建了一个无内容的测试页面来试图确定问题.它在:
http://rgdaniel.com/test-mediaquery.php
如果我使用桌面浏览器查看该页面,当我调整窗口大小时,它会按预期运行.但iPhone会以980px以下的任何指定最大宽度报告我的"中等分辨率"消息.任何帮助表示感谢,提前谢谢.
我的应用程序通过创建一个不可见的iframe然后打印它来生成打印的报告.我正在尝试解决的一系列令人沮丧的问题中的最新信息是针对不同的打印页面大小优化CSS.IE9 似乎有点工作(但有其他问题,比如忽略@page {margin:...}),但在FF或Chrome上根本没有运气.
我的代码看起来像这样:
@media print and (width: 210mm) and (height: 297mm) {
... stuff for A4 size ...
}
@media print and (width: 8.5in) and (height: 11in) {
... stuff for US letter size ...
}
在Chrome或FF中,这些规则都没有匹配.我也尝试了设备宽度和设备高度,这些也没有用(它们似乎报告了打印机的绝对最大尺寸,而不是页面尺寸).我无法弄清楚"宽度"和"高度"返回的值是什么,有没有办法告诉我？
是否有可靠的方法使用媒体查询检测打印页面大小？我非常接近得出的结论是,没有办法在浏览器中以任何一致的方式控制打印,并且放弃了这一点.
根据http://www.webmonkey.com/2010/02/browser-specific_css_hacks/,我碰巧在WebKit浏览器中使用了下面的CSS hack .
@media screen and (-webkit-min-device-pixel-ratio:0) {
#my-id { height: 100%; }
}
有用.但是,后来我发现它在生产环境中不起作用.我发现它是由于CSS优化器修剪后的空间and.Chrome无法识别以下CSS.
@media screen and(-webkit-min-device-pixel-ratio:0) {
#my-id { height: 100%; }
}
那么,究竟是什么@media screen and (-webkit-min-device-pixel-ratio:0)意思呢？
我知道@media screen,但我之前没有and在CSS文件中使用过.
为什么and必要后的空间角色？
我有一个div
<div id="page">
</div>
使用以下css:
#page {
background: url('images/white-zigzag.png') repeat-x;
}
@media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
我注意到当我调整浏览器大小时,我看到了"移动"背景(很好)但是如果我回去让我的浏览器变大,我以前的"大"背景并不总是重新出现.
这是一个间歇性的问题,但它经常发生,我认为我应该解决它.
有没有办法解决这个"背景图像不出现"问题或调整背景图像大小的方法,以便媒体查询"缩小"背景图像以适应新的大小？据我所知,没有(广泛的)方式来改变背景图像的大小......
之前我使用过Zurb Foundation和Skeleton,所以我对两者都很熟悉,但我之前从未将现有网站转换为响应式网站.什么是转换我的网站最快的方法？使用上面的框架,或为已经提供的代码添加媒体查询？(这甚至有效吗？)
我正在寻找一个可靠的媒体查询规则:
If desktop width < 720px AND devices in portrait mode {}
(也就是说,当桌面上的宽度减小时,媒体查询会以720px开始.在手机上,这应该只在纵向模式下才会发生 - 横向不应该应用媒体查询)
问题是:如何将设备与桌面分开定位.
存在问题是因为:@media handheld不受支持
另外max-width影响一切,所以它不能与之结合使用max-device-width AND portrait
好像我只能针对:
无法单独处理设备和台式机.
是否有现成的JavaScript解决方案可以满足我的需求？
注意我正在编写我的CSS,LESS,媒体查询嵌套在其中.
背景
我正在处理的网站是响应式的,并使用网格系统.在720px宽度(当前测试宽度)下,列使用会针对较小的设备/分辨率进行更改.经测试,不过,该网站(在720像素宽度的整个网站)是景观惊喜可读性,甚至在我的小屏幕的HTC Desire.当我删除部分网站以便通过媒体查询获得更好的可用性时,我想为什么不能在横向上正常访问该网站.
没有修改元素列跨度的桌面上的波纹720px看到一个非常破碎的网站.但是,由于移动设备的性质较小,因此不会出现这种情况.然而,对于列跨度修改,当涉及到手机上的风景时(由于浏览器的高度大大降低),特定元素仅仅是不成比例的(例如标题).
简而言之,完全根据浏览器宽度更改设计并不能平等地传播所有设备,因为我已经设法在其他网站上实现.
我使用以下元标记:
<meta name="viewport" content="width=device-width,
initial-scale=1,
maximum-scale=1,
user-scalable=no" />
已经尝试过什么
方向与桌面无关.它会根据用户窗口设置,分辨率等而改变.
我尝试过以下目标来定位手机/两者:
@media handheld and (orientation:portrait) { }
似乎没有手机利用这个handheld属性,至少100%没有 - 所以它毫无价值.
@media screen and (max-device-width:720px) and (orientation:portrait) { }
会工作得很好,但Android 2.2和2.3(可能是其他人,更不用说其他操作系统？)有问题max-device-width不工作.
@media screen and (max-width:720px) and (orientation:portrait) { } …我试图导入基于媒体查询的样式,但导入未被触发如果我将样式直接放在媒体查询中,它们将呈现给页面.
这是现场http://update.techbasics.ca的链接
这是我的style.css,包含媒体查询和导入
我正在使用wordpress,如果这有助于调试.
@import url('base.css');
/******************************************************************
Site Name: Tech Basics
Author: Anders Kitson
Stylesheet: Main Stylesheet
Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/*****************************************************************
BASE CSS
*****************************************************************/
/*****************************************************************
MEDIA QUERIES
*****************************************************************/
@media only …如何组合两个媒体查询？一个用于较小的设备,一个用于较大的设备,但仅限于纵向模式!
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape){
#div {margin-top: 20px;}
}
}
@media only screen
and (min-device-width : 481px)
and (max-device-width : 1024px)
and (orientation : portrait){
{margin-top: 20px;}
}