如何根據不同的屏幕寬度來縮放我的網站

根據所用設備的寬度，我想將網站的縮放比例改爲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

如何根據不同的屏幕寬度來縮放我的網站

回答

相關問題