Question

我试图围绕视口/鳞片包裹我的大脑。我有一个网站，我必须编程，我给出的设计是响应性的，但如果设备的宽度低于420px，它确实不起作用。

在任何低于420px的情况下，如果浏览器将网站渲染为420px宽，我只是喜欢它，只需缩小所有内容，但我无法弄清楚如何做到这一点。

我已经看到了如何动态更改元视口标记，但是当我这样做时，它似乎没有任何影响，我不确定是什么接近我想要实现的目标的最佳方式。

无论如何，这就是我的尝试：

var minBP = 420;
//ww = window width

if (self.ww < minBP && lastScreenWidth > minBP){ //site is smaller than minimum allowed width, modify viewport
    var viewportString = "width=" + minBP + ", initial-scale=1.0";
    $('#blackrock-viewport').attr('content',viewportString);
}

当浏览器低于这些尺寸时，任何人都知道如何渲染按比例缩小的420视口宽度？

Answer 1

你可以使用Media Queries在css中做到这一点，它允许你在不同的屏幕中操纵evrything

例如，如果要在420px屏幕中更改div的宽度，可以执行以下操作：

@media (min-width:420px) { 
div{
 width:50px;
   }
}

Answer 2

您可以使用media queries定位特定屏幕尺寸的特定元素。

根据您的情况，您只需将// alert("I enter crvtre"); for(var m=0; m<max; m++){ for(var n=m+1; n<max; n++){ // we should add in (tre[m][0] != tre[n][0]) to draw between trees only and inside one tree if(tre[m][5]==0 && tre[n][5]==0 && (tre[m][0] != tre[n][0])){ var object = scene.getObjectById(tre[m][1],true); console.log(object.userData[1]) } } } //animate(); }宽度限制为首选尺寸。

假设您有wrappers包裹了所有网页，请说div。

.wrapper

当然，只需设置包装器的@media screen and (max-width:420px) { .wrapper{ width:420px; } }属性，即可在没有媒体查询的情况下执行此操作。

min-width

但我想，通过媒体查询，您可以更灵活。

如何为站点/视口设置最小宽度，如果宽度低于该值，则使用浏览器缩放

2 个答案: