注意:好的,而我打字这个问题,我碰上了这个 问题,这说明使用@media query
,但被要求早在2011 …
正如你所知道CSS3引入了新的视口百分比长度单位,vh
并且vw
,我觉得是非常有用了坚实的响应式布局,所以我的问题是,是否有任何的JavaScript /jQuery的替代这个?除了将其用于字体大小之外,用于元素大小设置是否安全?像例子
div {
height: 6vh;
width: 20vh; /* Note am using vh for both, do I need to use vw for width here? */
}
更新5:CSS(属性)修复插件等的fancybox使用.css('margin- right')
抓取元件的右边距与.css('margin-right','12px')
设置元素的右边缘。这被破坏了,因为没有检查是否props
是字符串以及是否提供了多个参数。通过检查是否props
为字符串来修复它。如果是这样并且有多个参数,则将参数重写为对象,否则parseProps($.extend( {}, props ) )
不使用。
更新4:
用于响应式布局的插(在工作中)
我尝试了一下。首先,这里是CSS示例:(调整输出面板的大小)。请注意,font- size
至少在最新版本的Chrome上,不适用于视口单元。
这是我使用jQuery进行的尝试。也可以使用该字体的jQuery演示位于。尚未对其进行广泛的测试,但它似乎可用于大多数属性,因为它只是将值转换为像素,然后通过调用其插件window.resize
来保持更新。
更新:
更新了代码以与许多浏览器一起使用。如果您使用的不是Chrome,请在本地进行测试,因为jsBin的行为有点怪异window.resize
。
更新2: 扩展本机css
方法。
更新3: 处理插件内部的window.resize事件,以便现在无缝集成。
/*
* CSS viewport units with jQuery
* http://www.w3.org/TR/css3-values/#viewport-relative-lengths
*/
;(function( $, window ){
var $win = $(window)
, _css = $.fn.css;
function viewportToPixel( val ) {
var percent = val.match(/[\d.]+/)[0] / 100
, unit = val.match(/[vwh]+/)[0];
return (unit == 'vh' ? $win.height() : $win.width()) * percent +'px';
}
function parseProps( props ) {
var p, prop;
for ( p in props ) {
prop = props[ p ];
if ( /[vwh]$/.test( prop ) ) {
props[ p ] = viewportToPixel( prop );
}
}
return props;
}
$.fn.css = function( props ) {
var self = this
, originalArguments = arguments
, update = function() {
if ( typeof props === 'string' || props instanceof String ) {
if (originalArguments.length > 1) {
var argumentsObject = {};
argumentsObject[originalArguments[0]] = originalArguments[1];
return _css.call(self, parseProps($.extend({}, argumentsObject)));
} else {
return _css.call( self, props );
}
} else {
return _css.call( self, parseProps( $.extend( {}, props ) ) );
}
};
$win.resize( update ).resize();
return update();
};
}( jQuery, window ));
// Usage:
$('div').css({
height: '50vh',
width: '50vw',
marginTop: '25vh',
marginLeft: '25vw',
fontSize: '10vw'
});
我正在开发一个客户端音乐播放器,并正在寻找一种方法来保存与mp3数据完整的播放列表。 localStorage localStorage的5mb限制排除了该选项。我想知道还有什么其他选项。 DataURIs我读过DataURIs,例如,在使用data:URI时,有没有办法指定建议的文件名?和跨浏览器另存为。txt,但不建议默认文件名,尤其是缺乏IE支持,这些都是破坏交易的因素。 IndexedDB
问题内容: 我刚刚了解了一个新的不常见的CSS单元。并分别测量视口的高度和宽度百分比。 vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%,依此类推。 这似乎与单位完全相同,这很常见。 在开发人员工具中,我尝试将值从vw / vh更改为%,反之亦然,并得到相同的结果。 两者之间有区别吗?如果没有,为什么要引入这些新单位? 问题答案: 可以达到任何高度。举例来说,如
我刚刚了解了一个新的不常见的CSS单元。和分别测量视口的高度和宽度的百分比。 我从Stack Overflow看这个问题,但它使单元看起来更加相似。 vw和vh单元是如何工作的 答案特别说 vw和vh分别是窗口宽度和高度的一个百分比:100vw是宽度的100%,80vw是80%等。 这似乎与单元完全相同,后者更为常见。 在Developer Tools中,我尝试将vw/vh的值更改为%,反之亦然,
问题内容: 截至本文发布之日,名称“ Microsoft Edge”才被正式宣布为新Windows 10的默认浏览器。 问这个问题还为时过早,但是我想知道是否有新的Selenium WebDriver可用,如果没有,是否有任何信息可以告诉我们我们期望等到开发出来再等多久? (Windows 10的技术预览版已经发布,因此在我看来这并不是一个愚蠢的问题。) 问题答案: 是的,Microsoft Ed
我已经使用SOF很长时间了,但从来没有问过一个问题。今天我在Firefox的网站上,注意到它谈到了px和%就好像它已经过时了。该网站建议使用ViewHeight和view width或view像素(vh和vi或vpx)。用... 而且 ..????他们为什么要做出改变?
问题内容: 我正在寻找一种在客户端(即在浏览器中)进行traceroute的方法。 据我所知,不可能通过Javascript或Flash发送具有任意TTL值的ICMP,UDP或TCP数据包。我知道Flash允许通过Actionscript中的Socket类进行TCP连接,但是它对于traceroute实现似乎没有用。 是开发浏览器插件的唯一解决方案吗? 编辑 :我刚刚发现它已经用Java小程序完成