基于各种视口高度使用CSS缩放元素至少可以说是乏味的，并且应该不需要IMO。然后，我可能完全错了。
我想知道是否可以使用jQuery来根据视口的高度自动设置元素的比例？
我已经检查了我在Stackflow上找到的每个链接都没有用，我检查了http://ricostacruz.com/jquery.transit/这似乎是一个可行的选项，但我不知道如何计算高度并将其转换为值所以我可以用它来进行CSS转换。 我不确定，但我可能需要“检查点”，以便特定高度为预设值。
我还需要能够手动调整比例，以便我可以调整缩放比例以使元素适合大多数视口。
这是我的例子： http://testsiten.se/modernaglas/images/showcase/bedroom/
我需要在.ccales类中的所有内容根据视口的高度进行缩放，并且还会更新方向是否更改。
宽度与高度相同所以它不会造成问题，因为它不会比高度宽。
我不想改变.scales的高度，因为这会破坏整个设计。
我做了一些真正糟糕的CSS媒体查询，这些查询尚未清理，因为我认为用jQuery更容易完成所有这些操作。
这是我的CSS。
body, html{ background-color: #333333; font-family: tahoma; margin: 0; padding: 0; }
img{background: none}
h1 {font-size: 18px; margin: 0; font-weight: normal; text-align: center}
#ChangableElements {width: 958px; margin:0 auto; }
#navigation {background-color: #bdc7c9; color: #6e7377;padding: 7px 8px 5px 21px;}
#navigation div div {display: inline-block;}
#navigation div div span{display: block;}
.nav_glas, .nav_ram {display: inline-block;font-size: 13px;text-align: center;}
.nav_glas div, .nav_ram div{padding: 1px 13px 0 10px;}
.nav_glas div a, .nav_ram div a{display: inline-block; margin: 8px 0 10px;}
.nav_ram{float: right;}
.work_area {margin-bottom: 0; background: url("images/bg_image.png") repeat scroll 0 0 transparent; height: auto;width: 958px;}
.border, .grid{margin-top: 0px;position: absolute;top: 0;}
.grid_on {width: 50px}
.headers h1{display: inline-block;}
.headers h1:first-child{float: left; margin-left: 10px; }
.headers{display: block!important;padding: 0 !important;}
.hidden {display: none;}
我的一个媒体查询
@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (orientation : portrait) {
div.scales
{
transform: scale(0.37);
-ms-transform: scale(0.37); /* IE 9 */
-webkit-transform: scale(0.37); /* Safari and Chrome */
-o-transform: scale(0.37); /* Opera */
-moz-transform: scale(0.37); /* Firefox */
transform-origin: top center;
-ms-transform-origin: top center;
-webkit-transform-origin: top center;
-o-transform-origin: top center;
-moz-transform-origin: top center;
}
}
这是我的jQuery：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function changeImage(el, img_url) {
$(document).find(el).attr('src', img_url);
}
$(document).ready(function(){
// add color btns event
$('.nav_glas').find('a.spegel').click(function(){
changeImage('#mirror', 'images/spegel.png');
});
$('.nav_glas').find('a.vit_traskiva').click(function(){
changeImage('#mirror', 'images/vit_traskiva.png');
});
$('.nav_glas').find('a.vitt_glas').click(function(){
changeImage('#mirror', 'images/vitt_glas.png');
});
$('.nav_glas').find('a.metall_glas').click(function(){
changeImage('#mirror', 'images/metall_gra.png');
});
$('.nav_glas').find('a.gult_glas').click(function(){
changeImage('#mirror', 'images/gult_glas.png');
});
$('.nav_glas').find('a.rott_glas').click(function(){
changeImage('#mirror', 'images/rott_glas.png');
});
$('.nav_glas').find('a.svart_glas').click(function(){
changeImage('#mirror', 'images/svart_glas.png');
});
});
</script>
<script type="text/javascript">
function changeImage(el, img_url) {
$(document).find(el).attr('src', img_url);
}
var app = {
isActive: function(el){
if($(el).hasClass('active')) {
return true;
}
else {
return false;
}
},
whoActive: function(){
return $('.active').attr('id');
},
change_grid: function(image){
changeImage('#grid', image);
}
}
$(document).ready(function(){
// add color btns event
$('.nav_ram').find('a.vit').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
changeImage('#border', 'images/vit_el.png');
app.change_grid('images/grid_vit.png');
});
$('.nav_ram').find('a.silvermatt').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
changeImage('#border', 'images/silver_el.png');
app.change_grid('images/grid_silvermatt.png');
});
$('.nav_ram').find('a.svart').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
changeImage('#border', 'images/svart_blank_el.png');
app.change_grid('images/grid_svart.png');
});
// grid_turn_on event
$('.grid_turn_on').click(function(event){
var grid_on = $('.grid_on'); // div el
var grid = $('#grid');
var is_hidden = false;
if(grid.hasClass('hidden')) {
is_hidden = true;
}
else {
is_hidden = false;
}
log(app.whoActive());
switch (app.whoActive()) {
case 'vit':
log('is vit');
if(is_hidden) {
grid.removeClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_on.jpg');
changeImage('#grid', 'images/grid_silvermatt.png');
} else {
grid.addClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_off.jpg');
}
break;
case 'silvermatt':
log('is silver');
if(is_hidden) {
grid.removeClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_on.jpg');
changeImage('#grid', 'images/grid_silvermatt.png');
} else {
grid.addClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_off.jpg');
}
break;
case 'svart':
log('is svart');
if(is_hidden) {
grid.removeClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_on.jpg');
changeImage('#grid', 'images/grid_svart.png');
} else {
grid.addClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_off.jpg');
}
break;
default:
if(is_hidden) {
grid.removeClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_on.jpg');
}
else {
grid.addClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_off.jpg');
}
}
});
});
</script>
这是我的HTML。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title>mirror</title>
</head>
<body>
<div class="scales" id="ChangableElements">
<div class="work_area">
<img src="images/grid_svart.png" alt="" id="grid" class="grid">
<img src="images/svart_blank_el.png" alt="" id="border" class="border">
<img src="images/vitt_glas.png" alt="" id="mirror">
</div>
<div id="navigation">
<div class="nav_glas">
<h1>Välj färg på glas/skiva</h1>
<div><a class="spegel"><img src="images/pic1.jpg" alt=""></a><span>Spegel</span></div>
<div><a class="vit_traskiva"><img src="images/pic2.jpg" alt=""></a><span>Vit träskiva</span></div>
<div><a class="vitt_glas"><img src="images/pic3.jpg" alt=""></a><span>Vitt glas</span></div>
<div><a class="metall_glas"><img src="images/pic4.jpg" alt=""></a><span>Metallgrått glas</span></div>
<div><a class="gult_glas"><img src="images/pic5.jpg" alt=""></a><span>Gult glas</span></div>
<div><a class="rott_glas"><img src="images/pic6.jpg" alt=""></a><span>Rött glas</span></div>
<div><a class="svart_glas"><img src="images/pic7.jpg" alt=""></a><span>Svart glas</span></div>
</div>
<div class="nav_ram" id="tfoot">
<div class="headers">
<h1>Spröjs</h1>
<h1>Välj färg på dörrens ram</h1>
</div>
<div class="grid_on"><a class="grid_turn_on" ><img src="images/grid_on.jpg" alt=""></a><span>Ja/Nej</span></div>
<div><a class="vit" id="vit"><img src="images/pic2_1.jpg" alt=""></a><span>Vit blank</span></div>
<div><a class="silvermatt" id="silvermatt"><img src="images/pic2_2.jpg" alt=""></a><span>Silvermatt</span></div>
<div><a class="svart" id="svart"><img src="images/pic2_3.jpg" alt=""></a><span>Svart blank</span></div>
</div>
</div>
</div>
</body>
</html>
可以看出，我在.scales中有很多元素，并且还有一个背景图像。这就是为什么我需要它来缩放而不是设置高度，因为有很多元素依赖于.scales的比例。
我希望我现在能够理解自己。 ：d
编辑： 最后学了一些jQ才能实现这个功能。
<script type="text/javascript">
$(document).ready(function(){
$(window).on('resize', function(){
var vpheight = $(window).height();
var vpwidth = $(window).width();
if(vpwidth>vpheight) {
// Landscape
var height = $(window).height() * 0.00148;
var width = height / 2 * -958;
$('.scales').css('transform', 'scale(' + height + ')');
$('.scales').css('-ms-transform', 'scale(' + height + ')');
$('.scales').css('-webkit-transform', 'scale(' + height + ')');
$('.scales').css('-o-transform', 'scale(' + height + ')');
$('.scales').css('-moz-transform', 'scale(' + height + ')');
$('#ChangableElements').css({'left': width + 'px'});
} else if(vpwidth <=720 && vpheight > 569 ) {
var height = $(window).height() * 0.000675;
var width = height / 2 * -958;
$('.scales').css('transform', 'scale(' + height + ')');
$('.scales').css('-ms-transform', 'scale(' + height + ')');
$('.scales').css('-webkit-transform', 'scale(' + height + ')');
$('.scales').css('-o-transform', 'scale(' + height + ')');
$('.scales').css('-moz-transform', 'scale(' + height + ')');
$('#ChangableElements').css({'left': width + 'px'});
} else {
// Portrait
var height = $(window).height() * 0.000895;
var width = height / 2 * -958;
$('.scales').css('transform', 'scale(' + height + ')');
$('.scales').css('-ms-transform', 'scale(' + height + ')');
$('.scales').css('-webkit-transform', 'scale(' + height + ')');
$('.scales').css('-o-transform', 'scale(' + height + ')');
$('.scales').css('-moz-transform', 'scale(' + height + ')');
$('#ChangableElements').css({'left': width + 'px'});
}
}).resize()
});
</script>
奇怪的vpwidth＆lt; = 720＆amp;＆amp; vpheight＆gt; 569是为了强制我的三星Galaxy S3功能。奇怪的决议......
答案 0 :(得分：1)
将顶级元素缩放到视口高度的某个百分比很容易。只需将html和body元素的height属性设置为100％，然后身体的任何子项都可以使用百分比高度，这将对应于视口高度。
例如，类似下面的CSS会使用 scale 类的div填充视口的高度。 Example codepen
html, body {
height:100%;
margin:0;
}
.scale {
background-color:orange;
width:200px;
height:100%;
margin:0 auto;
}
如果您不太担心旧浏览器，您也可以只在标记中的任何位置查看视口单元。这使事情变得更容易，并且还允许您根据视口高度设置宽度，反之亦然。
例如，边长与视口高度匹配的正方形可以像这样实现：
body {
margin:0;
}
.scale {
background-color:orange;
width:100vh;
height:100vh;
margin:0 auto;
}
也就是说，视口单元并不总是立即响应调整大小，并且在涉及滚动条时会出现意外行为，因此存在权衡。
答案 1 :(得分：0)
您可以使用$(window).height()，例如：
var winHeight = $(window).height();
然后根据高度更改宽度并设置两个属性，如：
$("#theElement").css({'width':varWidth, 'height':varHeight});