我正在尝试将我的大脑包裹在视口/比例上。我有一个必须编程的网站,我得到的设计是响应式的,但如果设备的宽度低于 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 视口宽度?
你可以通过使用媒体查询在css中做到这一点,它允许你在不同的屏幕中操作evrything
。例如,如果您想更改 420px 屏幕中div 的宽度,您可以这样做:
@media (min-width:420px) {
div{
width:50px;
}
}
您可以只使用媒体查询来定位特定屏幕尺寸上的特定元素。
对于您的情况,您只需将wrappers
宽度限制为您喜欢的大小。
假设您有一个包装所有页面的div
,假设.wrapper
.
@media screen and (max-width:420px) {
.wrapper{
width:420px;
}
}
当然,您也可以在没有媒体查询的情况下通过设置包装器的 min-width
属性来执行此操作。
.wrapper{
min-width:420px;
}
但我想通过媒体查询,你会更灵活。