如何根据不同的屏幕宽度来缩放我的网站

根据所用设备的宽度，我想将网站的缩放比例改为0.7或类似。如何根据不同的屏幕宽度来缩放我的网站

唯一有用的信息，我能找到到目前为止以下<meta>标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我想知道是否有可能写出像下面的一个部分代码申请的网站有一定规模的只有如果设备的宽度匹配一定的宽度或宽度范围：

@media screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    .body { 
    initial-scale: 0.7; 
    } 
}

或者我说的是完全无意义的？对不起，我是CSS和HTML的新手，只是寻找一个快速的解决方法，将笔记本电脑屏幕上的初始缩放比从1.0降低到0.7。

您的答案将受到高度的欢迎。提前感谢！

最佳，

帕斯卡尔

来源

2016-04-15 Gaijin565

我不会推荐缩放网站，而是调整您的网站的组件来响应浏览器窗口。看看这个资源：http://weblogs.asp.net/dwahlin/getting-started-with-css-media-queries – buschschwick

每当我写HTML代码，我使用下面的行：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

现在，让我们明白这意味着什么：

初始规模：控制变焦级别第一次加载页面时。这会在设备屏幕上显示原始像素。

最大规模：定义用户可以多少初始规模后放大

最小刻度：定义一个用户可以多少初始比例后缩小。

用户可扩展= 0表示用户无法放大或缩小。

通过将以上行作为元标记，我们将所有内容都保存到：没有缩放设置，用户无法缩放。

现在我们可以将比例设置为0.7，并且相应地将其他3个值设置为如果我们想要。

但是写出的标准方式如上所述。

当发生断点后（移动设备的情况下），我们希望元素改变其方向以及它们如何在屏幕上排列（响应），而不改变代码结构/设计。

来源

2016-04-15 08:13:59 Avatar

感谢您的回答。你能再次发布你所指的代码行吗？我看不到它。谢谢！ – Gaijin565

– Avatar

谢谢！我想知道我是否可以将以下内容添加到我的网站： – Gaijin565

简单地套用在媒体查询覆盖默认的CSS一些额外的CSS（它使用媒体查询有道）：

.some-class { 
    font-size: 16px; 
    padding: 10px; 
} 

@media (max-width: 480px) { 
    .some-class { 
     font-size: 13px; 
     padding: 7px; 
    } 
}

来源

2016-04-15 05:37:11 Justinas

谢谢你的例子。我知道以某种方式应用媒体问卷。我只是寻找一种方法来根据不同的设备宽度来不同地扩展网站。 – Gaijin565

-1

您还可以添加对你的代码块“重要”，如下所示，以确保它需要所需的值

.some-class { 
    font-size: 16px; 
    padding: 10px; 
} 

@media (max-width: 480px) { 
    .some-class { 
     font-size: 13px!important; 
     padding: 7px!important; 
    } 
}

来源

2016-04-15 06:14:19

使用！重要的CSS是一种不好的做法。 – claudios

如何根据不同的屏幕宽度来缩放我的网站

回答

相关问题