我一直有缩放问题...自动...动态......自适应......等等...
我已经看到网站，因为你使窗口变小，例如。抓住一个角落，使窗口变小，字体变大，东西四处移动......
我有动人的部分，我不知道如何动态检测浏览器视口......是一件令人耳目一新的事情还是？...
正如你在这里看到的那样，我所使用的这些动作只能用于屏幕刷新，特别是我有一个平板电脑，如果我在横向访问页面，它不适用;如果我旋转它然后刷新，它适用。
<script language="JavaScript" type="text/javascript">
var x = screen.width;
var y = screen.height;
function scale() {
var z = x/y;
if (z<1) {
document.getElementById('header').style.width = "100%";
document.getElementById('menu').style.marginLeft = "0";
document.getElementById('menu').style.width = "20%";
document.getElementById('menu2').style.width = "30%";
document.getElementById('menu3').style.width = "20%";
document.getElementById('menu4').style.width = "20%";
document.getElementById('properties').style.width = "30%";
document.getElementById('properties').style.marginLeft = "35%";
}
}
scale();
</script>
这是来自Stack Overflow的人提供的关于字体的代码，我想它可能类似于我要去的方向
$( window ).resize(function() {
$( "#container" ).css("font-size",function() {
var value = $( "#container" ).css("width");
console.log(parseInt(value)/24 + "pt");
return parseInt(value)/24 + "pt";
}) ;
});
什么部分是动态的？
这个console.log，我之前没用过
任何帮助将不胜感激
在阅读了你的问题和评论后，我仍然有点困惑，但也许这会有所帮助。
首先，学习使用Chrome's Dev Tools。他们真棒！您现在需要知道的最重要的事情是：
要使用console.log：
console.log('Hello World!');Resources标签上，这是一个检查所有资源加载的好地方，但不是你想要的。Console的选项卡Hello World!是否已经运行了JS那一行。现在关于调整大小测试的更简单的视觉效果，请尝试以下jQuery增强JavaScript :(如果您愿意，请注释解释，删除注释）
// This first line is the same as JavaScript's `document.ready = function() {}
// This simply starts your code running as soon as the document is loaded and ready to go
// It's safe to use in <head> or in <body> and will always ensure your JS is running with the page load
$(function() {
// Here I use .on instead of direct reference to the event as this is just good practice4 with jQuery
// You'll later learn you can use this with prewritten methods to "turn on/off" methods asigned to specific events
$(window).on('resize', function(e) {
// Little JS Tip, No need to write `var` 50thousand times. Just use a comma and write your new variable
var x = $(this).width(), // variable for window width assigned to `x`
y = $(this).height(), // variable for window height assigned to `y`
z = x/y, // your conversion you were using in the code you have in your question, there's plenty of different ways to test for size changes, do some Googling on "aspect ratio" as it's usually best way to go
// this next line is a little complicated
// It's assigning a variable based on result of an `inline if statement`
// What it says: if (element with id 'myOutput' exist) then assign that element and empty it of all it's HTML, else build the element using jQuery's element object method and append it to the <body>
// jQuery's element object building is easy, just remember it like this: jQuery("<tagName />", { object of attributes })
output = $('#myOutput').length ? $('#myOutput').empty() : $('<div />', { id: 'myOutput', style: 'background: #ffa; padding: 10px; position: fixed; right: 30px; top: 30px; z-index: 999;' }).appendTo('body'),
// the following lines build the inner HTML for showing the results of our window dimensions
pX = $('<p />', { text: 'x: '+x }).appendTo(output),
pY = $('<p />', { text: 'y: '+y }).appendTo(output),
pZ = $('<p />', { text: 'z: '+z.toFixed(5) }).appendTo(output);
});
})
如果您现在正在使用Google Chrome，那么您现在就可以测试它！只需按F12并单击Console选项卡。复制下面的最小化代码，然后单击Console。您应该看到一个闪烁的光标准备输入。粘贴代码并按Enter键！然后只需调整窗口大小并观看右上角！ * notein最右边你可能会看到Chrome自己的尺寸框。我的背景是黄色的
缩小代码：
$(function(){$(window).on("resize",function(a){a=$(this).width();var c=$(this).height(),d=a/c,b=$("#myOutput").length?$("#myOutput").empty():$("<div />",{id:"myOutput",style:"background: #ffa; padding: 10px; position: fixed; right: 30px; top: 30px; z-index: 999;"}).appendTo("body");$("<p />",{text:"x: "+a}).appendTo(b);$("<p />",{text:"y: "+c}).appendTo(b);$("<p />",{text:"z: "+d.toFixed(5)}).appendTo(b)})});